Page 1 of 5 In this article we will look at what might be considered best practices, or perhaps, good coding habits to get into. To begin, we will look at removing any defaults that a browser may add to our elements and then look at how we can explicitly set the values we want. If you are new to CSS, you may want to bring yourself up to speed by reading a series of tutorials I wrote called An introduction to CSS. This links to the first tutorial in the series, which has links to all the earlier tutorials.
The beauty of CSS is the control it gives us. If used correctly we can perform site wide changes on thousands of pages in seconds. If used incorrectly, CSS is little better than using font tags. The difference between getting it right and getting it wrong is huge, it really is. The object of CSS is to separate design from content. The greater the separation, the easier our life becomes, as we shall see.
We can use CSS in three ways.
Inline CSS is the least flexible of the three options listed above. When applying inline CSS you are styling your elements right inside the code. You can see an example of inline styling in Listing 1 below:
<p style="margin: 20px;">My paragraph text</p>
Listing 1: An inline style
The inline style in Listing 1 above is highlighted. Why is this method a poor one? The answer to that is simple, the style we have applied to that p element is only affecting that p element. This means that every single time we use a p element we will need to write an inline style to force the 20px margin we want to add to our paragraphs.
This situation is further complicated when we need to make changes to our code. Let's say my client wants to reduce the margins on his paragraphs from the 20 pixels we have set to 15 pixels. The site may contain 1000 pages, to complete the client's request we would need to find and change every single instance of that inline style on every page within the site; a job that could take hours.
Embedded CSS is somewhat of a halfway house between inline styles and an external style sheet. An embedded CSS file keeps our styles out of our code and moves them into the head of our document. An example of an embedded style sheet can be seen in Listing 2:
<style type="text/css">
p {
margin: 20px;
}
</style>
Listing 2: An embedded style sheet
An embedded style sheet is contained in an opening and closing style tag pair, and it exists in the head of your page. The problem here is that it exists in the head of every page. If we revisit our client's required change of reducing the margin on our p element from 20 pixels to 15 pixels, we do have a slight improvement. We would now only need to change the setting once in each page, from within our embedded style sheet. This is much better than changing many inline style instances in every page. Better, but still not great.
An external CSS file is the way to go. An external CSS file is exactly what it says; it resides outside the (x)html document. From there it is linked to from within the <head> of the document, and the link implements those external styles onto the page. Each page in our web site might carry the same link to the same style sheet, allowing each element within our pages to adopt its styles from a single CSS file. This is a major advantage to us, because it means that we only need to change any given selector in a single location - our external style sheet - and the changes we make to that selector will propagate throughout all our pages, so long as those pages are linked to the external style sheet.
An example of a link to an external style sheet can be seen in Listing 3:
<link href="/external.css" rel="stylesheet" type="text/css" />
Listing 3: Linking to an external style sheet
The selectors within our external style sheet would be written in exactly the same way as they would be in our embedded style sheet, the only difference being that we don't need to include the surrounding style tags in our external CSS file, as you can see from Listing 4:
p {
margin: 20px;
}
Listing 4: A selector from our external style sheet
An external style sheet is without a doubt the way to go, and your aim should always be to keep your selectors within your external style sheet. That is not to say that inline or embedded style sheets do not have their uses, they do, but those instances are the exception rather than the norm.
You can get further information on creating and linking an external style sheet to your documents in Dreamweaver by reading a tutorial I wrote earlier called: Creating An External Style Sheet In Dreamweaver MX
Keywords
CSS, style, sheets, good, coding, habits, best, practices, comments, selectors, flow,
