Re: [PLUG] Simple CSS Advice Needed

[Doug Stewart <zamoose@gmail.com>]

Also of tremendous help: use either Chrome's developer console or Firebug if you're using FF. Their CSS inheritance mapping and the ability to view CSS changes in real time are invaluable. 

--
Doug Stewart

On Dec 18, 2011, at 6:46 PM, "Eric at Lucii.org" <eric@lucii.org> wrote:

> -----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
___________________________________________________________________________
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