| CSS Text | MoreCSS Text | CSS Structure | Images / Background | CSS Linking | Quick Reference |
Now that you can write style sheets, there is the question of how do you use them? You can write a style sheet for every page on your web site, but that would be an enormous and repetitive effort. It is more efficient to write one style sheet and use it for all the pages on your site. By doing this, not only do you save a lot of work, but you also gain a great deal of consistency throughout your site. There are three ways to do this.
The easiest way to have your different pages read one style sheet is to use the link element. For the link to work, the style sheet must be a separate file. You add the following line in the head of each of your HTML documents.
<link rel = style sheet href = &yourstylesheet">"yourstylesheet" is the url of the requested style sheet. The attribute, "rel=stylesheet" tells the browser the link is to a style sheet. This must be included in your call. This style sheet will be your default, but you can add other style sheets as well. If this is the case, the first will be your default and the subsequent style sheets will work according the rules of precedence.
<link rel = stylesheet href = "stylesheet-one" title="one">
<link rel = stylesheet href = "stylesheet-two" title="two">
<style type = "text/css">
Style sheet rules specific for this page go here
</style>
In this case, the style sheet, "stylesheet-one" is the default. "stylesheet-two" will add rules according to the rules of precedence, and the rules under style type="text/css", being the most specific, will have the highest precedence.
If you want to link to a style sheet for a grouping of rules, use the @ import declaration. This is also known as at-rules because of the use of the @ symbol. The @import is more specific than the link element. You include it in the style tag rather than a tag of its own.
<style type="text/css">
@import url ( Corporate-css)
Local rules follow here
</style>
You can add as many @import style sheets as you want. They can also be nested with a @import inside the @import style sheet. The advantage of using @import is that you can make your web pages modular. You can make style sheets for each of the basic elements and mix and match them as you please. For example, if you had several different sheets for the list element, you could use @import "list-style-1" for one page and @import "list-style-2" for another page. You could have a library of style sheets that could be imported into any document.
<style type = "text/css">
@import "basics";
@import "list-styles-1";
@import "headings";
@import "rules-2";
</style>
Remember the class attribute? When you are linking to an outside style sheet, the class attribute can play an important role. In you style sheet, you can make a library of properties and attributes for each element in your HTML document. You give each of the elements in your style sheet a class name. When you write your HTML page, you link to the style sheet with the class names. As you write the elements of your HTML page, you can refer to the class names in your style sheet. By doing this, you do not have to "reinvent the wheel" for every web page. You have a series of properties and attributes you can use consistently simply by referring to the class names. Lets look at an example.
This is a style sheet named "memo"Body{ background: silver; font: 14 pt helvetica;}
div.head {border: medium; padding: 10px;}
div.body {margin-top: 25px; margin-left: 15px}
H2. To, H2.from, H2.date, H2. confidentiality {
font-style: normal; font-weight: medium;}
h2.subject {font-style: italic; font-weight: medium;}
<html>
<title>Memo</title>
<link rel = stylesheet href = "/styles/memo">
<body>
<H1>Power Verbs Web Design</H1>
<div class = head>
<H2 class = to>To: Yasir Arafat </H2>
<H2 class = subject> Subject: Middle East Peace</H2>
<H2 class = from> From: Jimmy Carter</H2>
<H2 class = date>Date: 16 Nov 1979</H2>
<H2 class = confidentiality>Confidentiality: Arafat</H2>
</div>
<div class = body>
<p>The next time you are in Washington, lets double date</p>
</div>
</body>
</html>
So there you have it. Now you can write style sheets and link them to your documents. All you need now is a complete list of selectors, properties and values. Give it a shot. If you find you are having problems, be sure to check the links below for further information. Good luck and let us know how you do with what you have learned here.
| CSS Text | MoreCSS Text | CSS Structure | Images / Background | CSS Linking | Quick Reference |