Here is an overview of the basic CSS selectors. Please make sure you have read the CSS tutorials on the w3schools site before proceeding.
selecting particular tag names
p {
/* some css code here */
}
This select would match any and all <p> tags in the XHTML document.
selecting particular tag ids
p#some_id {
/* some css code here */
}
This selector would apply styles to any p tag with an id=”some_id”, such as:
<p id="some_id">some text</p>
selecting particular classes
p.some_class {
/* some css code here */
}
This selector would apply styles to any <p> tags with class=”some_class”. For example, it would match this code in the XHTML:
<p class="some_class">This is some text in the paragraph</p>
selecting particular child elements
p#some_id a {
/* some css code here }
This selector matches any <a> tag that is a child of a <p> tag with id=”some_id”. For example, it would match the <a> tag in the following code snippet:
<p id="some_id"> This is a paragraph of text with a <a href="http://google.com">link in it</a> </p>
selecting direct descendents of an element
p > a {
/* some css code here */
}
This CSS code would match any <a> elements that are direct descendents of any <p> elements. For example, it would match the <a> tag in the following code snippet:
<p> This is a paragraph of text with a <a href="http://google.com">link in it</a> </p>
But it would NOT match the <a> tag in this example:
<p>
This is a paragraph of text with a
<ul>
<li>This is a <a href="http://google.com">link</a></li>
</ul>
</p>
This does not match because the <a> tag is not a direct descendant of the <p> tag. It is a grandchild element of the <p>, not a direct child element.