| Introducing CSS | | Print | |
markup in HTML and instead created a separate language with which to style documents called cascading
style sheets or CSS. CSS uses rules to say how a document should appear (rather than elements and
attributes). These rules usually live in a separate document rather than in the page with the content, thus
keeping the presentation rules separate from the structural and semantic markup.
Each CSS rule is made up of two parts:
❑ A selector to indicate which elements a rule applies to.
❑ Declarations indicating the properties of an element you want to change, such as its typeface or
color, and the value you want this to be, such as Arial or red. Declarations are very similar to
attribute names and their values.
Figure 1-5 shows an example of a CSS rule that would apply to the <body> element of a document.
Because it is used on the <body> element, it also applies to all of the elements between the opening
<body> tag and the closing </body> tag. It says the text inside a <body> element should be shown in a
black, Arial typeface.
CSS is covered in detail in Chapters 9 and 10, but it might help to look at an example of CSS so you can
see how it fits in when writingWeb pages. So, let’s go back to the first example in this chapter and create a
style sheet for it so that it looks more like the second example (with the Arial typeface and red text in the
paragraph), but keeping the extra stylistic markup out of the HTML document.
Some people add their CSS rules inside the <head>element of the HTML document, but if you are writing
more than one page for your site, you might as well use the same style sheet for all of the pages rather than
repeating the rules in each page, which is the approach taken here.
To make an HTML page use a separate CSS style sheet you need only to add the <link> element into the
<head> element (this example is ch01_eg03.css):
<head>
<title>Acme Toy Company: About Us</title>
<link rel="stylesheet" type="text/css" href="style_01.css" />
</head>
This will be covered in detail in Chapter 9, but for now you know that it creates a link to the following
style sheet called style_01.css. You can see the selectors on the left and the declarations on the right in
the curly brackets:
body {font-family:arial;
color:#000000;
background-color:#EFEFEF;}
p {color:#CC0000;}
Here, the first rule selects all markup inside the <body> element and says that the typeface
(font-family) used for all text inside this element should be Arial, the color should be black, and the
background color (background-color) should be light gray. The second rule selects the paragraph
elements and says the color of anything within that element should be red.
You can now see why CSS has the word “cascading” in its title. The directions applied to the <body>
element indicated that everything inside the <body> should use the Arial typeface, and this rule has
cascaded to other elements contained inside the <body> element, such as the <p> element.
Now, imagine you had a Web site with 20 pages. If you had included the rules for how the Web site
should look in every page (using stylistic markup such as the <font> element and color attributes
you saw in the second example), and you wanted to change the color or typeface of the text in all
paragraphs, you would have to alter 20 pages.With the presentation rules in a style sheet, however, you
can change the appearance of 20 pages simply by changing the style sheet. Thus, you do not have to add
all of those extra stylistic elements and attributes to each page, which means yourWeb pages are smaller
and simpler.
You learn more about styling your documents and using CSS in Chapters 9 and 10, where you will also
meet some more of its advantages.
This entry was posted on . You can follow any responses to this entry through the RSS 2.0 feed. You can leave a comment.
| Users' Comments (0) |
|
No comment posted
