cass1
Style sheets are a very powerful tool for the Web site developer. They give you the chance to be completely consistent with the look and feel of your pages, while giving you much more control over the layout and design than straight HTML ever did.
Invented in 1997, Cascading Style Sheets (CSS) are just now starting to be widely used among browsers and Web developers are learning to be more comfortable with them. Those of you who use HomeSite 4.0 know that they are eventually going to take the place of tags such as <FONT>, which have been deprecated in HTML 4.0.
There are three parts to CSS: the styles, their placement, and the fact that they can cascade.
The Styles
One of the more common styles applied to HTML is the color and size of text. In HTML 3.2 you would create a blue H4 headline like this:
<font color="#0000ff"><h4>a blue headline</h4></font>
Which would look like:
a blue headline
However, there was no way to ensure that all H4 headlines were blue except by typing in the font tag before and after each one. With CSS, you simply declare that all H4 headlines are blue, and for all pages that use that style sheet and all elements that use that style, they will be blue:
H4 { color: #0000ff; }
<h4>another blue headline</h4>
Which would look like:
another blue headline
Style rules are comprised of two things, the selector and the declaration.
• selector - The HTML tag that will be affected by the rule
• declaration - The specific style calls that will affect the selector
The complete syntax for a style rule is:
selector {property : value;}
So, to set all bold text to be the color red, you would write:
b {color: red;}
One of the things that makes CSS so easy to use, is that you can group together components that you would like to have the same style. For example, if you wanted all the H1, H2 and bold text red, you could write:
b {color: red;}
h1 {color: red;}
h2 {color: red;}
But with grouping, you put them all on the same line:
b, h1, h2 {color: red;}
You can also group together rules (separated by a semi-colon (;) ). For example, to make all h3 text blue and Arial font, you would write:
h3 {
font-family: Arial;
color: blue;
}
By convention, we put separate rules on separate lines, but this is not required.
Style sheets can be place in three places in a document, in the <head>, in an external file, or within an individual tag. Style calls placed within an individual tag will only affect that tag, while other style calls affect the entire page or any page that loads the style sheet. For the above example, while the demonstration showed a style call used within a style sheet created either in the head of the document or on another page, the actual style use was within the H4 tag itself. For example:
<h4 style="color: #0000ff;">another blue headline</h4>
Creating styles as an attribute of a tag is a quick way to generate the style you would like without impacting your entire page. One common way this is used is to hide random links throughout the page. For the links you would like hidden, you would give them a style of "text-decoration: none". For example:
This link has the default decoration
This link, while still a link, is not underlined and has a color of black.
(Editor's note: The above two lines are not links.)
To create a style sheet within the header of your HTML document, you enclose it in <STYLE> tags. It is a good idea to define the mime type of the styles you are creating (usually text/css), and then to put the style rules within comment tags so that older browsers do not display them as text on the page. For example:
<head>
<style type="text/css">
<!--
H4 { color: blue; }
-->
</style>
</head>
Finally, you can create a separate document with all of your style information in it and either link or import it into your document. If you have a large site and would like to maintain consistency across it, then external style sheets are the way to go. They provide you with a simple way to dictate how all instances of various tags will be displayed.
Linking a Style Sheet
The benefit to linking a style sheet into your document is that it is supported by both the major 4.0 browsers. You call a linked style sheet like this:
<link rel="stylesheet" type="text/css" href="stylesheet.css">
Importing a Style Sheet
Importing style sheets are only currently supported by Internet Explorer 4.0. They allow you to keep all your style information in the same place, within the <style> element, while also loading external files as style commands. For example:
<style>
@import URL (http://yoursite.com/stylesheet.css);
H4 { color: #0000ff; }
</style>
Cascading is something that makes CSS even more powerful. Style sheets cascade when The Web Writer or user (or both) have created an order of precedence for the browser to apply the style rules in multiple sheets. The style rule or sheet that has the highest precedence is the one that is used. The following list is a simplification of how your browser decides precedence for a style:
- Look for the style element that is created, if it is not in the document, use the default rules in the browser.
- Determine if any of the style rules are marked as important and apply those to the appropriate elements.
- Any style rules in the document will have precedence over the default browser settings.
- The more specific the style rule, the higher the precedence it will have.
- Finally, if two rules apply to the same element, the one that was loaded last will have the highest precedence.
Cascading is something that makes CSS even more powerful. Style sheets cascade when The Web Writer or user (or both) have created an order of precedence for the browser to apply the style rules in multiple sheets. The style rule or sheet that has the highest precedence is the one that is used. The following list is a simplification of how your browser decides precedence for a style:
- Look for the style element that is created, if it is not in the document, use the default rules in the browser.
- Determine if any of the style rules are marked as important and apply those to the appropriate elements.
- Any style rules in the document will have precedence over the default browser settings.
- The more specific the style rule, the higher the precedence it will have.
- Finally, if two rules apply to the same element, the one that was loaded last will have the highest precedence.