Re: [PLUG] Simple CSS Advice Needed

Carl

On Sun, Dec 18, 2011 at 7:30 PM, Doug Stewart <zamoose@gmail.com> wrote:

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