Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Adding a Style Sheet
One major concern when using style sheets, especially today when only the very latest browsers understand them, is making sure that older browsers can still view pages that use them.
Using our example, we'll add a style sheet to a page by using the STYLE tag. We can hide the style sheet from older browsers by putting comment tags around everything within the STYLE container. Here's what it looks like in the HEAD section of our current example
<HEAD>
<TITLE>CSS Examples</TITLE>
<STYLE TYPE="text/css">
<!--
H1 {
font-family: Verdana
}
-->
</STYLE>
</HEAD>
Because the style sheet itself is enclosed in HTML comments, browsers that don't understand the STYLE tag are prevented from displaying the style sheet in the browser window. Browsers that do understand the style sheet will ignore the comment tags and apply the style sheet to the page.
Let's pretend that we're an older browser, so we can see why we don't get confused by the style sheet here. We're merrily reading through the file (top-to-bottom), and we get to the STYLE tag. Because we don't know what it is, we just ignore it (that's one of the rules of HTML: Ignore the tags you don't understand). Then, we get to the comment beginning with <!--, and we become blind to everything until we see the comment ending with -->, so none of the style sheet syntax is noticed by us at all! Now, we see the end tag for the STYLE element (</STYLE>), which we ignore, and we can merrily continue as if nothing happened.
We'll look at the style sheet itself more closely in the "Cascading Style Sheets (CSS): Text" article, but right now, let's see what a new browser and an older browser do with it. First, Figure 2 shows a screen shot of this page in Netscape Navigator 4, which understands simple CSS style sheets.
){kind=link}
Figure 2 css2.html in Netscape Navigator 4.
Figure 3 shows what it looks like in a browser that does not understand style sheets.
){kind=link}
Figure 3 css2.html in a browser that doesn't understand CSS
Figure 4 shows what some of your users may see if you don't hide your style sheet with comment tags.
){kind=link}
Figure 4 css2.html in a non-CSS browser without the comment tags
As you can see, browsers that don't understand the style sheets ignore them because of the comment tags. When you add a style sheet to an HTML document, it's always a good idea to use the comment tags inside the STYLE element so that older browsers won't display the style sheet.