CSS rules for styling page elements do themselves reside in a new HTML element tag; the "<style> tag. Typically it resides in the <head> of the page (I make it a habit to only put my styles in the <head>, that way I can later collect them and stuff them in a separate stylesheet, "mystyles.css" and use them on more than one page.
<style type="text/css">
.red { color: #f00; font-style: italic; }
</style>
In the case of an external stylesheet, the <style> tags are left out, and the sheet just contains the rules. It is pulled into the page using the <link> tag, also in the <head> of the page:
<link rel="stylesheet" type="text/css" href="mystyles.css" media="all" />Another way to bring in an external stylesheet is with the CSS @import directive. This directive is invoked within an on-page stylesheet.
<style type="text/css"> @import url(more_important_styles.css); .red { color: #f00; font-style: italic; } </style>The @import directives for any external sheets must appear first in the <style> tag.
NOTE: Rules in imported stylesheets take precedence over other styles in the sheet that imports it.
Rules consist of two basic parts, selectors that tell which page HTML element type the rule applies to, and declarations which consist of a property followed by a colon and its value, ending in a semicolon. The rules associated with a selector are placed within brackets. In our example above we used this small rule for making text red:
| Selector | Declaration | ||||
| .red |
|
A selector is most often an HTML element, but not always. In the example it is not -- it is a special type called a "class" and is identified as such by the period (".") prefix. Class selectors can be used with any tag to alter the tag's attributes. To assign rules to ordinary HTML elements like the page body, paragraphs and headings, you might use:
body { background: #fff; }
p { color: #999; }
h2 { color: #f90; }
The other type of selector is the "id" selector which has a prefix of the pound-sign ("#") such as:
#header {color: #0f0; font-weight: 700;}
This would apply its rule to the element with its "id" attribute set to "header":
<h1 id="header">Heavy Green Type</h1>
In use, id selectors can only apply to one element; that's because id's must be only used once on a page. It's much like children in a family -- you wouldn't name both your sons "Bill" because it would be confusing. If you want rules to apply to more than one element of a type, use a class selector like "boys" to include them all (put them in a class.) Id selectors are most often used to target block-level elements, such as headings, paragraphs and "div" blocks. These types of "id'd" elements are generally located in a fixed place on each page, such as for the main site navigation links, or a footer that appears on every page.
As with most programming languages, it is often helpful for designers to place little explanitory notes or "comments" interspersed with the code. CSS allows for this with the comment phrase "/* ... */":
<style type="text/css">
/* Use this class to turn text red */
.red { color: #f00; font-style: italic; }
</style>
Any text after the initial "/*" and up to a following "*/" is ignored by the browser. Comments cannot be nested. For example, this may cause all the rules following it in the stylesheet to be ignored:
/* This is a comment, in which we find another comment, which is WRONG /* Another comment */ and back to the first comment. */
You can put comments on their own lines, or after rules:
/* Comment on its own line */
body {background: #fff;}
p {color: #999;} /* Comment after a rule */
h2 {color: #f90;}
Rules can be assigned to more than one selector. Let's say you wanted h1 and h2 headings and paragraphs to both appear in gray text. You simply group them before the declaration braces, separating the selectors with commas:
h1, h2, p {color: #999;} /* All three will appear gray */
Since you can group selectors together in a single rule, it follows that you can also group declarations. You could write styles like this:
h1 {font: 18px Helvetica;}
h1 {color: #f0f;}
h1 {background: #0ff;}
But that is inefficient. Imagine the mess if a selector has 10 or 15 styles! Instead, you can group them together:
h1 {font: 18px Helvetica; color: #f0f; background: #0ff;}
Whitespace (spaces, tabs and carriage returns) characters are ignored in declarations, so you can make nicely formatted, easy to maintain declaration lists like this:
h1 {
font: 18px Helvetica;
color: #f0f;
background: #0ff;
}
p {
font: 12px Times;
color: #000;
background: #fff;
}
Don't forget the semicolons at the end of your declarations!
OK, let's format a little HTML page with some CSS using what we've learned so far. Here's the stylesheet:
| Web page: | Markup: |
PlutoniumUseful for many applications, plutonium can also be dangerous if improperly handled. Safety InformationWhen handling plutonium, take care to avoid the accumulation of a critical mass. With plutonium, the possibility of implosion is very real, and must be avoided at all costs. This can be accomplished by keeping the various masses separate. CommentsIt's best to avoid using plutonium at all if it can be avoided. |
<html>
<head>
<title>CSS Formatting</title>
<style type="text/css">
body { color: #000;
font: 12px Times; }
h1, h2, h3 { color: #0ff;
font-family: Helvetica; }
h2 { font-size: 18px; }
h3 { font-size: 16px; }
.red { color: #f00; }
.warning { font-weight: 700;
font-style: italic;
color: #f00; }
.tint {
background: #fee;
}
</style>
</head>
<body>
<h1>Plutonium</h1>
<p>
Useful for many applications, plutonium
can also be dangerous if improperly
handled.
</p>
<h2>Safety Information</h2>
<p class="warning">
When handling plutonium, take care to
avoid the accumulation of a critical
mass.
</p>
<p>
With plutonium, <span class="red">the
possibility of implosion is very real, and
must be avoided at all costs.</span>
This can be accomplished by keeping the
various masses separate.
</p>
<h3>Comments</h3>
<p>
It's best to avoid using plutonium
<span class="warning">at all</span>
if it can be avoided.
</p>
</body>
</html>
|
A useful feature of CSS is that we can apply more than one class at a time, by putting two or more class names, separated by spaces, in the class attribute of an element. Assume we had the following rules in the stylesheet:
.warning { font-weight: 700;
font-style: italic;
color: #f00; }
.tint {
background: #eef; /* pale blue */
padding: 2px; /* add some space */
}
To color the text red and make it italic and make the background pale blue, you could write:
<p class="warning tint">When handling plutonium, take care to avoid the accumulation of a critical mass.</p>
So we get this:
When handling plutonium, take care to
avoid the accumulation of a critical mass.
<< Overview of XHTML and CSS | Index | Structure and Cascading >>