Have you ever wished that you didn't have to bother with the font tag? Would you like to be able to make change to a single definition and have the style of all of your pages change instantly? Would you like more control over the formatting of your page than is allowed with normal HTML? Cascading Style Sheets(CSS) are the solution to all of these. How can you learn about them? Read on.
There are three ways of including style definitions. The first way is to them as the style attribute in a tag as follows:
< FOO STYLE="foo" >
The second way is to use the < STYLE > tag inside the < HEAD > area.
< HEAD > < TITLE >Title< /TITLE > < STYLE > styles go here < /STYLE > < /HEAD >
The third and most useful way of including styles is to create a file with style definitions and include the style sheet into the HTML document as follows:
< HEAD > < TITLE >FOO< /TITLE > < LINK REL="StyleSheet" HREF="foo.css" TYPE="text/css" MEDIA="screen" >
The HREF attribute points to the URL of the style sheet file. This final method is the most useful because it allows the author to use one style definition for many pages. If the author of the site wants to make a change to something like font color or background images, the author only has to change the style file.
Defining styles is much different from writing HTML, and it takes a little getting used to. To begin, we will experiment with the style attribute of a tag. CSS definitions use two values called "properties" and "values". Here's a mock example.
< DIV STYLE="property:value; property1:value1 value2 value3 value4; property2:value; property3: value('stringvalue');" >
The punctuation used in CSS is extremely important. There is a colon in-between each property and value set. After each property:value set is a semicolon. The last semicolon is optional, but I like to include them just in case I want to add more styles to the end later.
Some properties can have more than one value as did property1 in the previous example. Each value should be seperated by a space. An example of this would be font: 4pt #800080 bold;. That particular style would assign the font to be 4pt, maroon, and bold.
Some values have a text argument as in property3. The most common string value is the "url" value. It must be followed by a parenthesis and the url(in single quotes) of the value in question. Url values can be used to give HTML elements background images as in: background: url('foo.gif').
Let's look at a real life example now:
< DIV STYLE="font: arial 18pt #000000 oblique; background: #FFFFFF; left: 40px;" >SOMETEXT< /DIV >
In this example, "SOMETEXT" will be displayed in a black, 18pt italicized arial font. Its background will be white and the word will be displaced 40 pixels to the right of what would ordinarily be its normal, linear position in the document.
That last property, left:, is part of something called CSS-P. CSS-P is useful in DHTML and pixel-perfect positioning, but it has only been implemented in newer browser versions such as Netscape 4 and Internet Explorer 4 and up, making its usefullness is limited.
The syntax used within the < style > tags is slightly more complex. It is logical, however, and not difficult to learn. Let's look at an example:
< HEAD >
< TITLE >SOMETITLE< /TITLE >
< STYLE >
/*this is a comment that doesn't affect
the style definition*/
/*the following sets the font size and color
for all < P > elements*/
p {font: 12pt #000000}
b.foo { text-decoration: strikethrough}
.FOO {color:#800080}
#someID {
text-align:right; width:400px;
background:url('something.gif')
}
a:link, a:active {
text-decoration:none
}
p:first-line{color: #532850}
p: first-letter { font-weight:bold}
< /STYLE >
< /HEAD >
The first style definition inside of the style tag uses a tag selector. A selector is the part of the definition before the left curly bracket. The tag selector is the most basic of these. It defines a style to affect all instances of that tag in the document. For example, a person could define styles for the < p > to assign all < p > tags a specific font, color, or other CSS property.
Each seperate style must be encased within the curly brackets. There is no limit to how many you may use in a document. In fact, you can give a single tag more than one style. We'll learn about that in a few minutes.
The second style definition in our example uses the tag and class selectors. A class selector limits the number of tags the style will affect. It looks like this: tag.classname{style here}.Tags qualify for styles that use the class selector by having their class attribute set to the name of the class as in: < P CLASS="foo" >.
Notice that the class selector can be used by itself as in .someClass, allowing the editor to apply the style to apply to more than one type of tag. This would prove useful if the programmer wanted to make both bold and italics words the same color from time to time. Both the < b > and < i >tags could have their color set by the same style definition if they were given a class attribute. Then the programmer would only have to define one color, working less in the long run.
The third type of selector is the ID selector, which is delimited by a # sign. ID styles can only be attributed to one tag in the document. Each tag must have a unique ID. ID selectors are most useful in DHTML applications where the styles of a single item must be manipulated.
The fourth selector applies only in some cases. It affects for certain subdivisions of the tag, such as active link color, visited link color, first line, and first letter. This allows easy formatting without unweildy font tags that affect small areas. For a complete listing of all selectors, properties, and attributes, check out our CSS reference in the area.
The greatest power of CSS becomes evident when one single style file can be used to control the styles of a multitude of documents. The syntax used in a CSS file is exactly the same as the syntax used inside the < style > tags. The only difference is that there are no < style > tags. The only contents of the file are the style definitions themselves.
You can choose to include all of your style definitions in a single file, or you may choose to have multiple files, such as color-scheme files that change the color scheme of a site depending on what style file is used. You can even have a style file for fonts, one for headings, one for tables to infinity.
To include a style file, use the following syntax:
< link rel="StyleSheet" href="foo.css" type="text/css" media="screen" >
The media attribute points to the fact that styles can be created for audio browsers, printing, and projected presentations. While these implementations are beyond the scope of this tutorial and current browsers have not yet implemented these uses, it shows us where CSS is heading in the future. Note that Netscape Navigator will reject any external styles that are not explicitly defined for media="screen" .
Style definitions may also be overlapped, and browsers have pre-defined rules for applying conflicting styles. That's why they're called cascading style sheets. Here are the rules:
A style that includes the property !important as in p{color: #ffffff !important} will have preference over non-important styles.
More specific styles will always win over less specific styles. For example:
p, li, DIV.foo{color:#000000; font: verdana 12pt; text-indent: 30px;}
will lose to:
p{text-indent: 30px}The definition of specific refers to what tags it refers to, not how specific the definition is
An ID style will always wil over non-ID attributes
Class styles will always win over "blanket" styles.
If all of the rules have been applied, and both styles have equal scoring, the one farther down in the document wins.
Style sheets not only are easier to type, but they also make site maintenance more trouble-free. They are one of the three building-blocks of DHTML, and when used right, they can provide help for disabled internet surfers. Best of all, they allow the designer to get a little closer to the ideal of seperating content from physical appearance, making large sites easier to maintain and dynamic sites easier to create. Now that's an offer I can't resist.