Get in Style
Concepts
Style sheets help people who write HTML separate the content of their Web pages from a specification of how those Web pages should look.
First introduced in the HTML 4 specification, Cascading Style Sheets (CSS) allow you to specify the appearance of elements in HTML pages. Using style sheets to define appearance is far more efficient than element-by-element techniques.
How Style Sheets Work
A Web browser merges the contents of your Web documents (in an HTML file) with the specification (in a CSS file) of how the HTML elements should look. The result in the browser window is your content, but altered in appearance by the style sheet.
You write style sheets using a command syntax that describes how HTML elements should be rendered in a Web browser.
Here is an example:
A CSS file "mystyle.css" contains this | An HTML file "hellostyle.html" contains this | Displayed in a Web browser, hellostyle.html looks something like this: |
---|---|---|
H1 { font-family: rockwell, serif; color: green; } P.danger { color: red; font-weight: bold; text-decoration: underline; } P.warning { color: purple; font-weight: bold; } |
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <HTML> <HEAD> <TITLE> Style Sheet Demonstration </TITLE> <LINK rel="stylesheet" href="mystyle.css" type="text/css"> </HEAD> <BODY> <H1> Our Exciting Story </H1> <P> We started to dock at the station before we realized what was happening. </P> <P class="warning"> Alien approaching! </P> <P> The capsule on the weird craft started emitting a beam of some sort. </P> <P class="danger"> Destruction imminent! </P> </BODY> </HTML> |
Our Exciting StoryWe started to dock at the station before we realized what was happening. Alien approaching! The capsule on the weird craft started emitting a beam of some sort. Destruction imminent! |
We see in this example the key to linking an HTML file to a style sheet. It is a LINK element in the head of the document like this:
<LINK rel="stylesheet" href="mystyle.css" type="text/css">
The CSS file in this example alters the appearance of every H1 element in HTML files that reference it. The H1 elements appear in green. The font is changed to "rockwell," but if that is not available on the user's browser software, some other font of the "serif" family will be used.
The CSS file in this example creates two classes of the P element: the warning class and the danger class. Note that the actual class name is "warning," not "P.warning." The "P.warning" syntax is used in the CSS file to identify the element (P) and the class (warning). In your HTML document, all you need to do is use a P element with the class attribute set to "warning," like this:
<P class="warning">This is a warning</P>
Style Sheet Use for Information Producers
Because any HTML document can link to a style sheet, a style sheet gives you a single place to specify the appearance of an entire set of Web pages. Thus, you can use style sheets to efficiently create a consistent look and feel for your Web pages and change this look and feel quickly and easily.
For example, many HTML writers like to indent the first line of each
paragraph by five spaces. To do this, they would place the
entity five times at the start of each paragraph.
This worked fine for pages generated by HTML editors, or even on a
small scale for hand-prepared HTML pages. But what if the web
designer decided that the paragraphs should not have the first line
of each paragraph indented? It would be a laborious process to have
to go through all the pages of the web to remove the
entities. Instead, you could put this line in your
style sheet to ident every paragraph in your document by 10 pixels:
P {text-indent: 10px;}
Style Sheet Use for Consumers
The people who use your Web pages will need to have the latest versions of the popular Internet Explorer (3.0 or above) or Netscape Navigator (4.0 or above) in order to see the style effects. If your users don't have these style-enabled browsers, they won't see all the effects you create.
Therefore, in using style sheets, like many other kinds of new HTML elements that have come before, you will need to be sensitive to users who do not have the most current Web browser software. With a little common sense and creativity, however, you'll find that you can still meet the needs of users who cannot use the style sheets.
In fact, by using style sheets, you can avoid much of the kind of syntax gymnastics that HTML writers have had to put into their pages to make things "look right." The result is that your HTML pages can be leaner and cleaner. You can separate style from substance. Instead of diddling with your Web pages to make them look a certain way, you can focus more on what your Web pages mean.
Things to keep in mind
- With style sheets, you have the ability to fiddle with the appearance of every HTML element in your document. For aesthetic reasons, resist this urge.
- Name your classes after the meaning they serve, not their appearance.
- Think carefully about how you name style sheets. You can reference several style sheets in the same document, so you can create a set of modular style sheets that can be used by different collections of documents.
Exercise: Create Your Own Style
Download the mystyle.html and mystyle.css files and modify them to your own taste. (I copied the contents of mystyle.css into a file mystyle.css.txt so that your browser can read it, as some browsers have trouble displaying a css file directly.) You can discover more ways to affect text appearance at the CSS2 reference.
This page is available in Belorussian provided by Patricia.