Style sheets are a good way to create common look and feel for your documents. If you want to have all your web pages have the same headers, fonts, colors, etc., you can use style sheets to accomplish this fairly easily. In the following exercises you will be taking a plain HTML file, adding inline style declarations, document-level style declarations, and external style sheet files. After each change, you will view the document to see what has changed and match the changes to the style sheet declarations. Then, after you have used all three types of style sheets, you will put them together to see the cascading part.
[top]
Use this file to create a simple web page.
Look at the source and save the html to a working file under a new filename. Open the new file in a browser to see that it's the same as the original page. Then work with the new file in notepad and replace one <h5> tag with the following inline style declaration:
<h5 style="color: orange; font-style: italic">
Now view the document again, using the browser. What are the differences? Can you see where these differences came from in the style declarations? Modify the style declarations, changing colors, fonts, etc to see what you can do with your document.
This is called an inline style sheet because the style attribute is used in the same line as the tag. This style declaration applies only to the tag in which it is embedded and not to any other tags in the document.
[top]
Now go back and make another copy of the original HTML file and add the following document-level style declarations somewhere in the head section of the document.
<style type="text/css">
<!--
/* make all level 5 headers green */
h5 {color: green; font-style: italic}
-->
</style>
View the file in your browser. How is this different from the inline style sheet?
Modify the styles as above and view the document yet again.
These are called document level style sheets because they affect each occurrence of the <h5> tag in the document, not just one tag.
[top]
Now go back and create yet a third copy of the original HTML file. Also get a copy of the sample_style.css file. Create a stylesheets directory in your working directory and put sample_style.css in it.
There are two ways to have your HTML document read an external style sheet, linked and imported, but we will go with linked for this example. Add the code below to your HTML file so it can use the styles in the linked style sheet. These lines MUST be in the head section of the file.
<link rel="stylesheet" type="text/css" href="stylesheets/sample_style.css">
The url can be entered as a relative or absolute address.
Now view the file in your browser yet again. How is this different from the other two examples? Can you find the specific declarations that cause each change?
[top]
Okay. Now what happens if we put them all together?
Add the document-level style declarations to the HTML file in the last part, and view the document. What happened? Why?
Now add the inline styles to the HTML file and view it again. Now what happened? Explain what is going on. How does the cascading work? How can you use these techniques to customize your web pages? How can you use them to create a common look and feel among your pages?
The styles "cascade". But what does that mean? When a page is linked to several different kinds of style rules (external, document level, inline), it merges all the different instructions. But when instructions conflict, the W3C set up a precedence so that some instructions carry more weight and thus "cascade" over instructions that carry less weight. In principle, the cascade goes from the more specific to the more general rules. The more specific rules cascade, or override, the more general rules. The following list is a hierarchy of styles, from general to specific. In this list, the cascade goes back up the list.
[top]