Article
HTML Utopia: Designing Without Tables Using CSS, Chapter 1: Getting The Lay Of The Land
Where Can CSS Styles Be Defined?
Finally, you can define CSS styles in any of three places, in conjunction with a Web page.
Inline CSS
First, you can define a style entirely within an appropriate HTML tag. This type of style is referred to as an inline style because it is defined in line with the document's HTML code. You can assign a style attribute to almost all HTML elements. For example, to make a second-level heading in a document appear in red text and all capital letters, you could code a line like this:
<h2 style="color: red; text-transform: uppercase;">An Unusual
Heading</h2>
If you follow the advice in this book, you won’t use many inline styles. As you’ll learn, separating content from presentation is one of the big advantages of CSS, and embedding styles directly in HTML tags defeats that purpose. Inline styles are mainly useful for rapid prototyping—quickly applying style properties to a particular element to experiment with an effect before giving the properties a more permanent place in an embedded or external style rule.
Embedded CSS
Specifying style properties in an embedded style is probably the method that’s most common today, particularly among beginning Web designers or those just learning the techniques involved in CSS design. It’s not my favorite, but it does have the singular virtue of being easy to deal with, so you’ll see it used from time to time in this book.
To embed a style sheet in a Web page, you place a style block in the head of the document’s HTML, as shown here in bold:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Style Sheet Demo</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
h1, h2 {
color: green;
}
h3 {
color: blue;
}
-->
</style>
</head>
...
The CSS rules contained in the style block apply to all the designated parts of the current document. In this case, the first rule directs the browser to display all level 1 and 2 headings (h1, h2) in green. The second rule displays all level 3 headings (h3) in blue.
Notice the HTML comment delimiters (<!-- -->) just inside the <style> tags.
These prevent ancient browsers that do not support CSS from interpreting the style rules as document content and displaying them in the browser window. All CSS capable browsers will ignore the comment delimiters. Even though it’s probably safe (or nearly so) to omit these symbols today, as so few ancient browsers are still in use, it does no harm to include them. I recommend you do so, just because it’s good form.
The second thing to notice about the style element’s syntax is that each rule starts on a new line, and each property specified within the rule appears indented within braces on its own line. This is not, strictly speaking, required, but it’s a good rule of thumb that improves the readability of your code, especially if you’re used to the look of JavaScript code.
External CSS
Finally, you can define CSS rules in a file that’s completely separate from the Web page. You can then link to this file by including a <link> tag in the head portion of any Web page on which you want to implement the styles contained in that file.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Style Sheet Demo</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="corpstyle.css" />
</head>
...
In this example, the file corpstyle.css contains a set of external styles that
have been linked to this page. Here's what the contents of this file might look
like:
h1, h2 {
color: green;
}
h3 {
color: blue;
}
This is my personal preference for the way we should deal with all CSS usage, for a number of reasons.
First, this is the least “locked-in” of the three basic methods designers can use to insert styles into a Web page. If you define an external style sheet file, you can bring it to bear on as many pages on your site as you want, simply by linking to the style sheet from each page on which you want it used. Making a change to a style that appears on every page of your site becomes a simple matter of modifying the shared .css file. If you use embedded or, worse yet, inline styles, you’ll have to copy and paste them into other documents if you want to use them.
Second, and closely related to the first advantage, is that this method is the easiest way to ensure the maintainability of your CSS styles. If you define all your site’s styles in external files, implementing a site-wide style change is a simple matter of making one edit in a single file. All the pages that use that style sheet will display the new styles immediately, following this one change.
With the other techniques, you have to either remember which styles are defined on which pages, or use search mechanisms to help you deal with the decentralized styling rules.
Third, external style sheets are treated as separate files by the browser. When the browser navigates to a new page, using the same style sheet, the external style sheet does not need to be downloaded again. Pages that use external styles are therefore quicker to load.
Last, but not least, external style sheets are simply more professional. By using them, you demonstrate an understanding of the importance of the first two issues I’ve just raised, and you make it much easier to discuss them, share them with colleagues, analyze their effects, and, in general, to work with them as if they were a serious part of the site’s design, rather than an afterthought.