Re: [PLUG] Simple CSS Advice Needed

["Eric at Lucii.org" <eric@lucii.org>]

-----BEGIN PGP SIGNED MESSAGE-----
Hash: SHA1

Casey:

1. The dot indicates that the css rule applies to a class.
  So <div class='error'> blah blah blah </div>
would use the css rules:

 .error {
   padding: 2em;
   background-color:  #FDD ;
   border: thin solid red ;
 }

Items preceded with # are for the element id.
  <div id="error">....
is styled with:
  #error {
    ....
   }

2.  You need to specify the pulldown element by class or id to invoke the appropriate rule.
Rules for <li id='item-1' ...
or <input id='state'...
are identified like this:

#item-1 {
  css properties here
}

#state {
  ...
}

You could use class='item-1' but typically classes apply to one or more elements where id is unique per html document.

3. There may be some css "lint" type tools but I have not used them.
Typically, I break my css with typos and then fix it when I notice it does not work.

4. If you use css rules from a separate stylesheet or from a <style type='text/css'> ... </style> element within the document then you need to associate them with the specific element by class or id.  If you put the css rules in style="...." then they are applied only to that element.  Using style= is good for design and debugging but it slows down the rendering of the document.  Use a separate css stylesheet or a <style> block.

Hope that helps.

Eric



On 12/18/2011 06:16 PM, Casey Bralla wrote:
> I'm using CSS for a web-based python project, and I'm having a little trouble understadnig some of the syntax of the CSS file.
> 
>  
> 
> I understand the syntax of the settings themselves (like "text-align: center;") And I've been able to successfuly establish styles for lots of things like tables and input buttons. However, I'm stymied on pulldowns.
> 
>  
> 
> Also, some elements in a css can be defined with a prepended ".", and I dont' know why.
> 
>  
> 
> The worst thing is, when there is an error in my css, the element is simply ignored and I have to muck around with it until I stumble on the correct setting. Not exactly an efficient way to solve problems.<sigh>
> 
>  
> 
>  
> 
> So my questions are:
> 
>  
> 
> 1) What is the dot before a class definition?
> 
> example:
> 
> .elementname { background-color: black; font-size: 1em; }
> 
>  
> 
>  
> 
> 2) what is the name of the pulldown element? I've found "table" and "input", but "dropdown" did not work.
> 
>  
> 
> 3) Is there a way of checking the syntax of css to help troubleshoot problems?
> 
>  
> 
> 4) How come the elements seem to need to be referenced as "class=" instead of "style="?
> 
>  
> 
>  
> 
> Any help fromt he group would be greatly appreciated.
> 
> TIA!
> 
>  
> 
> -- 
> 
>  
> 
> Casey Bralla
> 
> Chief Nerd in Residence
> 
>  
> 
> The NerdWorld Organisation
> 
> http://www.NerdWorld.org
> 
> 
> 
> ___________________________________________________________________________
> Philadelphia Linux Users Group         --        http://www.phillylinux.org
> Announcements - http://lists.phillylinux.org/mailman/listinfo/plug-announce
> General Discussion  --   http://lists.phillylinux.org/mailman/listinfo/plug

- -- 
#  Eric Lucas
#
#                "Oh, I have slipped the surly bond of earth
#                 And danced the skies on laughter-silvered wings...
#                                        -- John Gillespie Magee Jr
-----BEGIN PGP SIGNATURE-----
Version: GnuPG v1.4.10 (GNU/Linux)
Comment: Using GnuPG with Mozilla - http://enigmail.mozdev.org/

iEYEARECAAYFAk7ue2kACgkQ2sGpvXQrZ/51egCg/ZlIsQbeTIarjCkYSwMflNqu
HFEAn1g3a7SMm074LgFFHwS232JQYluH
=S9/U
-----END PGP SIGNATURE-----
___________________________________________________________________________
Philadelphia Linux Users Group         --        http://www.phillylinux.org
Announcements - http://lists.phillylinux.org/mailman/listinfo/plug-announce
General Discussion  --   http://lists.phillylinux.org/mailman/listinfo/plug