 |
|
 |
| An Introduction to Style Sheets |  |
|
|
If you've been creating web pages for a while, you've most likely come to realize that HTML offers very little in the way of controlling the formatting (or presentation) of your web pages. By design, HTML (which stands for HyperText Markup Language) is a markup language as opposed to a presentational language. Therefore, you don't have the control over
presentation as you would with something like a Word document.
This article is the first in a series that will help you become more familiar with how to use style sheets. In this article, we'll cover some of the basic concepts of style sheets in order to start you on your way to using them. In subsequent articles, we'll go into more detail about the different options and commands that can be used to control the layout of your web pages.
What are Style Sheets?: Style Sheets are a new and powerful method of providing additional formatting options and better control over the HTML tags on your web pages, and allow you to control such things as leading, margins,
indents, typefaces, colors, and much more. They allow you to separate the presentation of your web pages from their informational content. With style sheets, you can change the appearance of your web pages by making changes either to a single file, or to lines in the HEAD section of each page.
How Do You Use Style Sheets?: Adding style sheets to your web pages can be done in three ways (or a
combination):
- By linking to a style sheet from your web page, which allows you to change the appearance of multiple web pages by making changes in a single file.
- By embedding a style sheet in your web page, which allows you to change the appearance of a single web page by changing a few lines in the HEAD section.
- By adding inline styles to your HTML file. This gives you a quick way to change the appearance of a single tag, a group of tags, or an entire section of your page.
Linked Style Sheet: A linked style sheet provides a huge advantage for changing the appearance of multiple web pages. With a linked style sheet, you need only make changes in a single file. The formatting and presentation of
any pages that link to this style sheet will then reflect these changes. To link to a style sheet, simply create a file with your style definitions in it, save it with a ".css" file extension, then link to it in the HEAD section of each page you'd like to apply the style sheet to. For example, if you've created a file called "mystyle.css" that contains all your style definitions, you'd add something like this in your HEAD section:
|
<LINK REL=STYLESHEET HREF="http://pages.prodigy.net/mystyle.css" TYPE="text/css">
|
Embedding a Style Sheet: An embedded style sheet is an excellent way to control the appearance of
a single web page. To add an embedded style sheet, simply add the <STYLE> </STYLE> to the HEAD section of your page. The following is an example of an embedded style sheet that controls the appearance of a single page:
<STYLE TYPE="text/css">
<!-- hide style sheet from non-supporting browsers
BODY {font: 15pt Arial; background: white}
H1 {font: 15pt/17pt Arial; font-weight: bold; color: maroon}
H2 {font: 13pt/15pt Arial; font-weight: bold; color: blue}
P {font: 8pt/10pt Arial;
color: green;
text-indent: 3em;
margin-left: 3em;
margin-right: 3em;
background: yellow}
-->
</STYLE>
|
A few things to make note of here... In the beginning STYLE tag, the TYPE="text/css" is used to specify the MIME type and allow browsers that do not support it to ignore it. At the end of the BODY style, the /* comment */ is the method by which you can add comments to your styles. This style sheet contains "rules" that will affect the presentation of
the BODY, H1, H2, and P elements of a web page. A rule consists of two parts, a "selector" (H1 for example), and one or more declarations (color: maroon for example). Each decoration also consists of two parts, a property (color) and a value (maroon). The property and value of a declaration should be separated by a color (:), and if you're using multiple declarations, they should be separated by a semicolon (;).
Inline Styles: An inline style is used to modify the appearance of a single ocurrence of an HTML tag. Because they affect only one occurrence of a tag, inline styles are perhaps the least desirable as opposed to a linked or
embedded style that can be changed only once to affect an entire page. The following is an example of using an inline style for the paragraph tag:
<P STYLE="font: 8pt/10pt Arial;
color: green;
text-indent: 3em;
margin-left: 3em;
margin-right: 3em;
background: yellow">Text would go here.</P>
|
In this example, the text in the paragraph would appear as green on a yellow background, be indented 3em on both the left and right sides, have a font size of 8pt Arial, and with the first line indented 3em.
A Word of Caution: While style sheets are a powerful method of providing additional formatting options and better control over HTML tags on your web pages, there are some pitfalls. Foremost of these is that not all browsers and browser versions support style sheets. So the time and energy that you spend getting style sheets to make your pages look "just so" will be lost on your visitors using these browsers. Perhaps the best method of getting around this limitation so that these visitors can enjoy your pages is to first use straight HTML to create your pages, then use style sheets to enhance them. The benefit of doing this is that if used properly, style sheets will "degrade" nicely for those visitors whose browsers don't support style sheets, and while they won't get the benefit of the enhancements, they'll still be able to see decent looking web page.
Additional References for Style Sheets: This has been a brief introduction in the use of style sheets. In our
next installment of this series, we'll go into more detail of how to go about changing the properties of body text, links, visited links, backgrounds, and more. In the meantime, if you'd like to get a head start on learning more about style sheets, be sure to check out the following references:
|
|
