Basic CSS tutorial
I recommend searching the web for some fine tutorials. Here is a customized summary, with data that was key to me, understanding style sheets used by Drupal themes.
1) CSS entry have the format:
Select { Declarations }
with Declarations containing one or more: Property: Value
ex:
body {
margin: 0;
padding: 0
}
2) Basic Selectors can be:
Element
.Class
#ID
Respective example:
a { color: Red; } /* This will apply to all <a> HTML tags */
.aClass { color: Red; } /* This will apply to all elements with class="aClass" */
#anID { color: Red; } /* This will apply to all elements with id="anID" */
example:
<em class="aClass
">
<div id="anID ">
<div class="warning">
IDs are used once per page. Classes can be used many times. Example id="Footer" class="blockcontent"
3) More complex selectors:
.breakingnews { font-size: 110%; } /* This will apply to all
elements with class="breakingnews" */
p.breakingnews { font-weight: bold; } /*This will apply to all <p> HTML elements
with class="breakingnews" */
p#footer { font-weight: bold; } /*This will apply to all <p> HTML elements
with id="footer" */
.class1 .class2 .class3 ( color: Red; } /* This will apply elements of class3
within an element of class2 within an element of class1 */
<div class="sidenav">
<h2>Site navigation</h2>
<ul>
<li>List item</li>
<li><a href="#">List item</a></li>
<li>List item</li>
</ul>
</div>
div.sidenav { blah } /* styles overall div */
div.sidenav h2 { blah } /* styles h2 within the div */
div.sidenav ul { blah } /* styles ul within the div */
div.sidenav li { blah } /* styles li within the div */
div.sidenav li a { blah } /* styles a within li within the div
*/
p em {color: blue; } /* Applies to em elements that are within (a descendant) a p element */
#search .form-text /* This applies to descendants of an element with class="form-text " itself with a parent with id="search" */
4) Other tricks:
Elements can belong to multiple classes like: <p class="big indent">
(2 classes: big and indent)


delicious
digg
reddit
google
technorati