 |
| css |
Introduction to CSS
As you’ve seen, browsers render certain HTML elements with distinct styles (for example,
headings are large and bold, paragraphs are followed by a blank line, and so
forth). These styles are very basic and are primarily intended to help the reader understand
the structure and meaning of the document.
To go beyond this simple structure-based rendering, you use Cascading Style Sheets
(CSS). CSS is a stylesheet language that you use to define the visual presentation of an
HTML document. You can use CSS to define simple things like the text color, size, and
style (bold, italic, etc.), or complex things like page layout, gradients, opacity, and much
more.
Example 1-4 shows a CSS rule that instructs the browser to display any text in the body
element using the color red. In this example, body is the selector (this specifies what is
affected by the rule) and the curly braces enclose the declaration (the rule itself). The
declaration includes a set of properties and their values. In this example, color is the
property, and red is the value of the color property.
Example 1-4. A simple CSS rule
body { color: red; }
Property names are predefined in the CSS specification, which means that you can’t
just make them up. Each property expects an appropriate value, and there can be lots
of appropriate values and value formats for a given property.
For example, you can specify colors with predefined keywords like red, or by using
HTML color code notation, which uses a hexadecimal notation: a hash/pound sign
(#) followed by three pairs of hexadecimal digits (0–F) representing (from left to right)
red, green, and blue values (red is represented as #FF0000). Properties that expect measurements
can accept values like 10px, 75%, and 1em. Example 1-5 shows some common
declarations. The color code shown for background-color corresponds to the CSS
“gray.”
Example 1-5. Some common CSS declarations
body {
color: red;
background-color: #808080;
font-size: 12px;
font-style: italic;
font-weight: bold;
font-family: Arial;
}
Selectors come in a variety of flavors. If you want all of your hyperlinks (the a element)
to display in italics, add the following to your stylesheet:
a { font-style: italic; }
If you want to be more specific and only italicize the hyperlinks that are contained
somewhere within an h1 tag, add the following to your stylesheet:
h1 a { font-style: italic; }
You can also define your own custom selectors by adding id and/or class attributes to
your HTML tags. Consider the following HTML snippet:
<h1 class="loud">Hi there!</h1>
<p>Thanks for visiting my web page.</p>
<p>I hope you like it.</p>
<ul>
<li class="loud">Pizza</li>
<li>Beer</li>
<li>Dogs</li>
</ul>
If we add .loud { font-style: italic; } to the CSS for this HTML, Hi there! and
Pizza will show up italicized because they both have the loud class. The dot in front of
the .loud selector is important—it’s how the CSS knows to look for HTML tags with
a class of loud. If you omit the dot, the CSS will look for a loud tag, which doesn’t exist
in this snippet (or in HTML at all, for that matter).
Applying CSS by id is similar. To add a yellow background fill to the highlight paragraph
tag, use the following rule:
#highlight { background-color: yellow; }
Here, the # symbol tells the CSS to look for an HTML tag with the ID highlight.
To recap, you can opt to select elements by tag name (e.g., body, h1, p), by class name
(e.g., .loud, .subtle, .error), or by ID (e.g., #highlight, #login, #promo). And, you can
get more specific by chaining selectors together (e.g., h1 a, body ul .loud).
There are differences between class and id. Use class attributes when
you have more than one item on the page with the same class value.
Conversely, id values have to be unique to a page.
When I first learned this, I figured I’d just always use class attributes so
I wouldn’t have to worry about whether I was duping an ID value.
However, selecting elements by ID is much faster than by class, so you
can hurt your performance by overusing class selectors.
Applying a stylesheet
So now you understand the basics of CSS, but how do you apply a stylesheet to an
HTML page? Quite simple, actually! First, you save the CSS somewhere on your server
(usually in the same directory as your HTML file, though you can put it in a subdirectory).
Next, link to the stylesheet in the head of the HTML document, as shown in
Example 1-6. The href attribute in this example is a relative path, meaning it points to
a text file named screen.css in the same directory as the HTML page. You can also
specify absolute links, such as the following:
http://example.com/screen.css
If you are saving your HTML files on your local machine, you’ll want
to keep things simple: put the CSS file in the same directory as the HTML
file and use a relative path as shown in Example 1-6.
Example 1-6. Linking to a CSS stylesheet
<html>
<head>
<title>My Awesome Page</title>
<link rel="stylesheet" href="screen.css" type="text/css" />
</head>
<body>
<h1 class="loud">Hi there!</h1>
<p>Thanks for visiting my web page.</p>
<p>I hope you like it.</p>
<ul>
<li class="loud">Pizza</li>
<li>Beer</li>
<li>Dogs</li>
</ul>
</body>
</html>
Example 1-7 shows the contents of screen.css. You should save this file in the same
location as the HTML file:
Example 1-7. A simple stylesheet
body {
font-size: 12px;
font-weight: bold;
font-family: Arial;
}
a { font-style: italic; }
h1 a { font-style: italic; }
.loud { font-style: italic; }
#highlight { background-color: yellow; }
It’s worth pointing out that you can link to stylesheets that are hosted
on domains other than the one hosting the HTML document. However,
it’s considered very rude to link to someone else’s stylesheets without
permission, so please only link to your own.
For a quick and thorough crash course in CSS, I highly recommend CSS Pocket Refer
ence: Visual Presentation for the Web by Eric Meyer (O’Reilly). Meyer is the last word
when it comes to CSS, and this particular book is short enough to read during the typical
morning carpool (unless you are the person driving, in which case it could take considerably
longer—did I say “crash” course?).
