1.6. Types of CSS Rules
There are several possible ways to categorize and think about CSS rules.
First, there is the question of what types of style properties the rules define. Second, there is the requirement of describing the type(s) of HTML elements that the rules affect. Finally, there is the issue of whether the styles are "inline", "embedded" or "external."
Let's take a brief look at each of these categorizations, so that you have a good overview of the organization of CSS rules before you embark on a detailed study of their actual use.
1.6.1. What Properties Can CSS Rules Affect?
CSS rules can include properties that affect virtually every aspect of the presentation of information on a Website. A complete reference to these properties is presented in Appendix B.
1.6.2. What Elements Can CSS Affect?
Stated another way, this question asks "How specifically can a CSS rule target a piece of information on a Web page for special presentation?" CSS allows the designer to affect all paragraphs, but how can you confine that impact to certain, specific paragraphs? Is this even possible?
The answer, unsurprisingly, is yes. Through various combinations of selector usage, the designer can become quite specific indeed about the circumstances under which a style rule is enforced. For example, you can assign rules so that they affect:
all elements of a specific type
all elements of a specific type that are assigned to a common group or class
all elements of a specific type that are contained within other elements of a specific type
all elements of a specific type that are both contained within another specific element type and assigned to a common group or class
all elements of a specific type only when they come immediately after an element of some other type
only a specific element of a specific type which is assigned a unique ID
Chapter 3, includes a detailed discussion of all the CSS selectors you can use to achieve this kind of precision targeting.
1.6.3. Where Can CSS Styles Be Defined?
Finally, you can define CSS styles in any of three places, in conjunction with a Web page.
1.6.4.1. 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.
1.6.4.2. 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.
1.6.4.3. 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.