Recapture of some basics for the foundation including selectors.
Code March 20, 2008
Let’s start at the top. You always want browsers to know how and in which language you built your site, this allows them to render your page accordingly. You need a title for the page and you also want to have the link to your CSS file there:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Page Title | Domain</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" media="screen" href="the_stylesheet.css" />
...
When it comes to CSS, it is good practice to follow some rules, it will make your life easier in the long run. One of these things is to use meaningful names for your classes and ID’s. Having a class called .style1 is really NOT helpful, but using something like .thumbnail would be.
Us ID’s and classes as intended: I have found many stylesheets to be overfilled with classes and the use of ID’s dropped, even when appropriate. ID’s are for unique selectors on a page and can occur only 1x on a page. Use it to label distinct layout areas, for example #footer or #mainNav. Also, don’t fall into classitis (over-use of classes) nor divitus (over-use of div’s). An example of classitis would be the following:
<h3 class="newsTitle">We are the Champions</h3>
<p class="newsText">Since 1920 it has been established that [...]</p>
<p class="newsText">Whenever the Olympic games [...]</p>
<p class="newsText"><a class="newsLink" href="olympics.html">Continue...</a>
The above can be written much lighter by using a distinct class in a div tag which applies to all and then to style the individual text selectors:
<div class="news">
<h3>We are the Champions</h3>
<p>Since 1920 it has been established that [...]</p>
<p>Whenever the Olympic games [...]</p>
<p><a href="olympics.html">Continue...</a></p>
</div>
Use <div> (for block-level elements) and <span> (for inline elements) tags sparingly (i.e. as above). Use them when there is no existing element that will do the job. When you have an unordered list there is no <div> tag needed as the <ul> tag wraps the <li> items.
The next, very important step is to know your selectors, as this is where the power of CSS is contained.
- Type : p {color:black;} a {text-decoration:none;}
- Descendant : li a {color:#555;}
- ID/Class : #footer {text-align:center;} .news {font-size:1.1em;}
- Pseudo-Classes : a:link {color:green;} a:hover {color:red;}
- Universal : * {margin:0;}
The following, advanced selectors are not supported by IE6 and below, but work well in Firefox and Safari.
- Child : #menu > li {font-weight:bold;} (only selects the immediate descendant and ignores descendants further down the line)
- (for IE6) Fake Child : #menu > li {font-weight:bold;} #menu > li * {font-weight:normal;}
- Adjacent : h3 + p {color:red;} (of 3 paragraphs, only the one right after the title, the first paragraph would be colored red)
- Attribute : abbr[title] {border-bottom:1px dotted yellow;} (will show the dotted lines under those abbr’s which contain the title attribute, as in <abbr title=”United States”>US</abbr>)
- Attribute Value : a[rel="nofollow"] {color:gray;} (will only apply the gray color to those specific anchor tags.
- (for IE6) Modified Attribute Value : .news {border-style:solid;} (for other browsers) [class="news"] {border-style: dotted}
- Selected Attribute Value : a[rel˜="friend"] {color:red;} (will color the following anchor red) : <a href=”…” rel=”collegue and friend”>Joe Doe</a>(select single value of an attribute with several values)
Last but not least, the Cascade (listed from highest to lowest specificity, higher dominates lower).
- style=”…”
- #container #main
- #main .news
- div#main
- #main
- p.hot .news
- p.hot
- div p
- p
As an end note : do not over-estimate your memory. What today seems logic as you have been working on it, can look cryptic even to you in 6 months time. Use /*commenting*/ liberally. Rather comment too much than too little, you spend less time removing some comments than trying to figure out what that specific hack did which you had coded 7 sites ago.
If you would like more indepth information on the above, I suggest CSS Mastery: Advanced Web Standards Solutions
