Saying It with Style
Script 11.1 shows part of a scene from Shakespeare's The Taming of the Shrew marked up as an HTML page with <div> tags. Without an attached style sheet, the text appears plain with no styles at all, as in Figure 11.1. If we want to display the entire play, we'll need a style sheet: something to get the browser to display that stage directions are emphasized and all dialog is indented. CSS-compliant browsers can use that style sheet to change the way that the text is displayed, according to the style sheet's directions.
Script 11.1. Adding a style sheet makes the difference between Figure 11.1 and Figure 11.2.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Taming of the Shrew</title>
<style type="text/css">@import "script02.css";</style>
</head>
<body>
<div class="menu">
<a href="act1.html">Act I</a> | <a href="act2.html">Act II</a> | <a href="act3.
 html">Act III</a> | <a href="act4.html">Act IV</a> | <a href="act5.html">Act V</a>
</div>
<p class="directions">Enter <span class= "character">Katharina</span></p>
<img src="images/shrew.gif" alt="Shrew folio" width="242" height="402" align="left" />
<div class="character">Petruchio</div>
<div class="dialog">
Good morrow, Kate; for that's your name, I hear.
</div>
<div class="character">Katharina</div>
<div class="dialog">
Well have you heard, but something hard of hearing:<br />
They call me Katharina that do talk of me.
</div>
<div class="character" id="week1"> Petruchio</div>
<div class="dialog">
You lie, in faith; for you are call'd plain Kate,<br />
And bonny Kate and sometimes Kate the curst;<br />
But Kate, the prettiest Kate in
Christendom<br />
Kate of Kate Hall, my super-dainty Kate,<br />
For dainties are all Kates, and therefore, Kate,<br />
Take this of me, Kate of my consolation;<br />
Hearing thy mildness praised in every town,<br />
Thy virtues spoke of, and thy beauty sounded,<br />
Yet not so deeply as to thee belongs, <br />
Myself am moved to woo thee for my wife.
</div>
<div class="character">Katharina</div>
<div class="dialog" id="week2">
Moved! in good time: let him that moved you hither<br />
Remove you hence: I knew you at the first<br />
You were a moveable.
</div>
</body>
</html>
|
The nice thing about using an external style sheet is that you can completely change the look of a site just by changing the style definitions in the style sheet, and without having to make any change to the HTML pages themselves. In this chapter, all the examples will use the same HTML page (Script 11.1); all we'll change for each example will be the style sheet. Script 11.2 adds a little style and Figure 11.2 shows the result.
Script 11.2. This CSS adds style to the body and img tags.
body {
background-color: white;
color: black;
font-weight: bold;
}
div {
font-weight: normal;
}
img {
margin-right: 10px;
}
|
To add a style sheet and some styles to your page:
1. |
<style type="text/css">@import "script02.css";</style>
In Script 11.1, the <style> tag is similar to the <script> tag: both go in the head section, and both require the type attribute. For styles, the type is always set to "text/css". The @import command is followed by the name (and if necessary, the directory path) of the external style sheet.
| 2. |
body {
background-color: white;
color: black;
font-weight: bold;
}
Now we move to Script 11.2, which shows how to apply styles to tags. This line (called a rule) says that all text within the <body> tag should be displayed with a background color of white, a text color of black, and in bold. A rule is made up of a selector usually an HTML element (in this case it's body)and the style (always surrounded by braces) to be applied to the selector.
| 3. |
div {
font-weight: normal;
}
This line demonstrates why the word "cascading" is in the name of CSS. While the previous step said that everything within the <body> should be bold, this step overrides that and says that everything within a <div> should be displayed normally. This ability to override what's been previously set gives a cascading effect to the formatting commands. The result is that the only text in bold in Figure 11.2 is the one line of Script 11.1 that isn't inside a div.
| | | 4. |
img {
margin-right: 10px;
}
This adds a 10-pixel margin to the right side of the folio image, giving it some breathing room, as you can also see in Figure 11.2.
|
 Tips
If you are targeting quite old browsers, you should add HTML comments around the contents of the <style> tag, similar to the ones for the <script> tag, so that older browsers don't get confused by tags they don't understand. We're aiming at modern browsers in this book, so we've left the comments off the examples in this chapter, but if you need them, you should have a line starting with <!-- just after your <style> tag and a line ending with --> just before your </style> tag. There are two ways to bring an external style sheet into your Web page: the <style> tag shown in this task, and the <link> tag, which uses the format: <link type="text/css" rel= "stylesheet" href="script02.css">
Each has its advantage and disadvantage; for example, the <link> method takes a few more characters to set up than the @import syntax. One of the main reasons for using the @import syntax here is that it's ignored by Netscape 4.x, allowing that browser to render pages plainly so that it won't crash (as it tends to do with some complex style sheets). Sites can use both the <link> and <style> tags, such that the combination results in a simple style applying to older browsers, while the newer, more capable browsers get the latest, greatest, and coolest effects.
|
