Table of Contents
Table of Contents | |
There are three types of style sheets: external (or linked), embedded, and inline.
The inline style sheet overrides any commands given by the embedded or external style sheet. The embedded style sheet overrides any commands given by the external style sheet. This concept is known as inheritance.
While the inline style sheet has the last say in controlling the look of a web page, the external style sheet affects the most pages. Before style sheets, if your client wanted you to change the text for all of the H1 tags to blue on a 500 page web site, you would need to go to each of the 500 pages and make the change. If you had an external style sheet controlling the site, you would just go to the external style sheet and make one change and instantly all H1 tags on all 500 pages would change to blue.
An external style sheet is NOT an HTML document and therefore does NOT contain the HTML shell or have the file format .html. Instead, an external style sheet has the file format .css. This stands for Cascading Style Sheet. A common mistake in style sheets is placing HTML code in the style sheet.
The first step in using an external style sheet is to create the external style sheet. The second step is to link that style sheet to any HTML page that you want it to affect.
Style sheet syntax is made up of three parts: a selector, a property and a value.
The property and value are separated by a colon and contained in curly braces. If you wish to specify more than one property, then you should separate each one by a semi-colon. The example to the right shows how you would define all h1 tags to be shown centered and colored blue. |
Style Sheet Syntax
selector {property: value} H1 {text-align: center; color: blue} |
|
If you want your External Style Sheet to affect an HTML page, you must first link it to that page. This link goes within the HEAD tags on every HTML page that you want affected by your external style sheet. |
Style Sheet Link Syntax <link rel="stylesheet" type="text/css" href="style.css"> |
External Style Sheet |
HTML page with a style sheet link |
browser view  |
Your web site should be as consistent at possible. This aids your user in navigating and finding information on your web site quickly and easily. Sometimes though, you may want to make one web page a little different then the rest. You may have special sale on that page or important information that needs special attention. If you need to change on type of tag for an entire page, you must use the embedded style sheet to override the external style sheet. If your web site uses blue for the heading 1s, but for a special sale page you want to use green for all the heading 1s on that page, you must use the embedded style sheet to change the color.
Embedded Style Sheets
If you need to change a single individual tag on any page, you must use the inline style sheet to override any embedded or external style sheets. To review the concept of inheritance, an external style sheet effects many web pages, an embedded style sheet effects all the tags on one web page, and the inline effects just one tag. You must override one style sheet with another style sheet. One common mistake is to attempt to use HTML attributes to override a stylesheet. You should NOT make this mistake, because it is interpreted differently in IE and Netscape (IE will not allow HTML to override a style and in Netscape HTML always overrides all styles). This problem is one reason why you should use style sheets consistently.
<div></div> and <span></span> are HTML tags that are helpful to use with style sheets when you don't want the default formatting of the normal tags such as <p></p>. <div></div> forces a line break after the closing tag. Use it for larger sections of text. <div></div> is useful for centering tables and changing the text color of a single paragraph. See the example on the right. <span></span> does not force a line break. Use it within sentences and paragraphs. <span></span> is useful for changing the color or font size of a single word or sentence. |
This table will be centered. <div align="center"> <table><tr> <td>red</td> <td>blue</td> </tr></table> </div> Only this one <span style="color: blue"> word </span> will be blue. |
Classes are a way to create your own custom tags. For example, you could create a special style for your footer by doing the following. In your external style sheet put:
.footer {
Kelley School of Business
Developed by: Karen Banks
Copyright 2004
Indiana
University Bloomington