what is css?
Cascading Style Sheets (CSS) are a new feature of HTML, supported in Microsoft Internet Explorer 3.x and above, and have limited support in Netscape Communicator 4 and 5. It gives the web developer exact control over how media appears in the browser, by allowing you to define "style sheets" that give exact information on how to format text and graphics.
css syntax
Style sheets are definited in a <style> tag, usually located in the <head> of a file. The syntax, or format, for style sheets is very different from HTML. There are two parts to a style: name, and attibutes. To define a style, first have the name, then a list of all attributes. The list of attributes is enclosed in curly brackets ("{" and "}"), and each attribute is followed by a semicolon (";"). For example:
<style type="text/css">
.myStyle { color: white; }
</style>
Now, any text with the "myStyle" style will be white. This code implements the style:
<div style="myStyle">
This text is white!
</div>
<p>
This is normal text and <span style="myStyle">white</span>
text together in the same sentence.
</p>
To apply a style to some text, the class attribute is used. In Internet Explorer 4.x+, the class attribute is available to every HTML tag, however in Internet Explorer 3.x, only the <div> tag can use it. I generally use the <div> tag for maximum compatilibity. <div> acts just like a regular <p>, including line breaks before and after its affected text.
You'll also notice, in the above example, that I also used the <span> tag. It was created specifically for CSS use; it doesn't change the breaks and formatting at all, but lies invisibly around the text, and simply applies the CSS style to it. Note that the <span> tag is only available in the latest (version 4.0+) browsers.
You can also use CSS to change the look of existing tags. To define a default style for an HTML tag, simply create a style like you world normally, and set the name of the style to the name of the HTML tag. For instance:
<style type="text/css">
strong { font-size: large; color: green; }
</style>
This code modifies the effects that the <strong> tag creates. After applying this style sheet, simple bold text now looks like this:
Wow!!
The following sections will provide more information on this feature.
uses for css
So, now that you know how to define a style, you're probably wondering, "what's so special about CSS? I could just use a <font> tag," and you would be right. So why is this better than simply coding your changes using regular tags? Well, it's faster, for one thing, than typing a long <font> tag, especially when you get into more complex styles that are duplicated many times throughout the documents. Also, style sheets have more options than regular HTML. For example, you could apply a blurred filter to a style sheet and have it become clearer when the mouse moves over. There are infinite possibilities. A good reference, like the Microsoft CSS Reference, will help a lot.
hyperlink aesthetics
Before the days of CSS, it was impossible to have hyperlinks without them being underlined. However, CSS allows us to define default styles for HTML tags, which means we can now choose whether to underline or not.
<style type="text/css">
a = { text-decoration: none; }
</style>
The above example demonstrates setting the default style of hyperlinks (the <a> tag) to plain text. (The text-decoration attribute tells the browser whether there are any special instructions on drawing the text, such as underlining it.) Now, the style sheet above can be inserted in any HTML file, and, if being viewed with a CSS-compatible web browser, hyperlinks will not be underlined. We implemented this in the area bar to the left. Notice how the links to content pages are not underlined.
link hover styles
There's more. Internet Explorer, with version 4 and above, allows us to define a special style for hyperlinks when the mouse "hovers" above them. This can be used for some very nice visual effects, such as links changing color or being underlined when the mouse moves over them. This code shows how to have links default to normally blue text, then turn red and be underlined when the mouse moves over them:
<style type="text/css">
a {
color: blue;
text-decoration: none;
}
a:hover {
color: red;
text-decoration: underline
}
</style>
You can see a sample of this implemented on this hyperlink.
intersite styles
Now, for the killer app of CSS: site-wide style sheets. Using the <link> tag, we can force all HTML pages in a site to include a single file with a stylesheet in it. That way, if you modify the included file, you can change the styles for the entire site. This is extremely useful when you have a large site and you want to play around with different styles.
<link rel="stylesheet" href="style.css">
This tag goes in the <head> of the file.
the stylesheet
Now that you have a file that includes a style sheet (the href attribute specifies the location of the style sheet), we need to make something to include. To make your style sheet file, open up a blank file in a text editor and copy this code into it:
<style type="text/css">
...put your style info here...
</style>
Next, fill out the stylesheet with the style information you want. Then, save it to the place referenced to by the href attribute of the style tag, and you're ready to go.
practical uses
CSS is one of the most useful tools available to a web developer. By creating a style sheet and having it included in every HTML file on your site, you can change a style (say, the size of some text or the color of a link) by only editing one file, as opposed to dozens or even hundreds of individual HTML files.
Another application of CSS is that it lets you define default attributes for, among others, the <body> tag. You can insert the following code into your style sheet:
body { bgcolor="black";
text=#F0F0F0;
link="red";
alink="blue";
vlink="blue";
}
Now, in all of your HTML files that include this style sheet, your style will automatically be applied to all <body> tags instead of retyping everything. And, if you wanted to change something such as the link color, you only need to edit one file and it will be changed across the entire site.
The main downside of CSS is its incompatibility, specifically with Netscape browsers and older versions of IE. Currently, only Internet Explorer 4.x completely supports CSS, although IE3 supports many style sheet features. Netscape Navigator versions 3.0 and under do not integrate CSS reliably enough to be considered supportive.
This tutorial only covers the basics of CSS; we've only touched on the tip of the iceberg of possibilities. Some of them are useful, many aren't. Use discretion in applying your styles, and make sure that viewers with older browsers will still be able to see a non-enhanced version. If you follow the steps we've listed here, you'll become proficient very quickly. Good luck!
Click here to go back to the table of contents.
Copyright © 1998 Webworks Team. All rights reserved. Email alphaomega@proaxis.com with questions or comments about this web site.