CSS Tutorials > Introduction to CSS
Figure 7-80. Switching off list-item markers
list-style-type is inherited, so if you want to have different styles of bullet in nested lists, you'll need to define them individually. You may also have to explicitly declare styles for nested lists because the user agent's style sheet may already have defined such styles. Assume that a UA has the following styles defined:
UL {list-style-type: disc;}
UL UL {list-style-type: circle;}
Introduction to CSS
Style sheets (or to give them their full title, cascading style sheets or CSS) are becoming more and more common on the Web. They were first introduced in a limited form to Internet Explorer 3.0, and are recognised by all version 4 browsers.
This tutorial will show you what style sheets are, when to use them, and (hopefully) how to use them!
What are style sheets?
Style sheets are a way to separate style from content in Web pages. In an ideal world, you would put all your content (e.g. text and graphics) in one place, and define how that content is laid out (the style) in another.
Straight HTML mixes style with content. For example, each time you want a bold, centred paragraph to represent a quote, you have to have to use <p align="center"> and <b> tags to achieve the effect. You're mixing what you want to say, with how you want to say it.
The markup metalanguage, XML, will hopefully move us towards total content and style separation. In the meantime, we have the pretty good compromise of style sheets.
Style sheets allow you to modify the default attributes of many standard HTML tags. For example, the <b> tag normally just makes text bolder, as it is doing here. However, you could use a style sheet to modify the <b> tag to make text red, all in capitals, or one font size bigger. It's totally up to you.
Even better - if you make all documents use the same style sheet, you only have to change the properties for <b> in the single style sheet file, and all the documents in your website will display <b> in the new way! Cool, huh?
For example, if you're using IE 3+ or Netscape 4+, you'll notice that the headings on this page are in a dark green colour, and that there's a gap between each heading and the paragraph above it. You'll also notice that the links are yellow, and that if you use IE4+ or Netscape 6+ the links change from yellow to white as the mouse rolls over them.
Lovely! How do I use them?
There are two main ways to use style sheets - linked and embedded. (You can also place styles straight into the thick of the HTML itself - called inlining - but this is less frequently used and won't be covered here. There's not enough space!)
You can create a style sheet in a separate file and then link one or more web pages to it - this is called linking, amazingly enough. Or, you can embed style definitions directly into the <head> section of individual web pages, using the <style> tag - we humans call this embedding.
Now it doesn't take a genius to work out that linking is more powerful than embedding. If you link many pages to one style sheet file, you only have to change a style in that one file, and all the linked pages will change their appearance. With embedding, you'd have to change the <style> tags for each page...
However, embedding can be used in tandem with linking. Say you've done a perfect style sheet which makes everything in <b></b> tags appear blue, and 100 pages link to it. But then you realise that your 99th page would look much better if the stuff in <b></b> looked red, just for that one page! No problem - then you embed a style into just that page, using the <style> tag. Embedded styles override the styles defined in the linked style sheet, so for this one page the bold stuff will look red, not blue. Clever! (This is why they're called cascading style sheets, by the way.)
So you get the general idea. Let's get stuck in.
The nuts and bolts of it all
Let's examine a simple style sheet, and then see how you would link a web page to it.
p { text-align: justify;
font-family: Verdana, Arial, Sans-Serif; }
h4 { color: #ff4400; margin-top: 45px; }
A:link, A:visited, A:active { text-decoration: none;
font-weight: bold; color: #0000ff }
A:hover {color:red;text-transform:uppercase;}
This style sheet is divided into four sections. Each section redefines a standard HTML attribute:
The p section affects all paragraphs (enclosed with <p> and </p>) and makes them justified with the left and right margins. It also specifies the preferred fonts. The left-most font is used if your computer has it. If not, the browser works through the list from left to right until it finds the font; it's a good idea to put either serif or sans-serif at the end to specify a generic serifed or non-serifed font respectively.
The h4 section redefines level 4 headings. Any text within an <h4></h4> tag will now be coloured orange, and there will be a 45 pixel gap between the heading and the end of the paragraph above.
The A:link, A:visited, A:active section defines the attributes for the normal, visited and active (clicked on) links in the page. text-decoration:none removes those nasty underlines from under the link text. font-weight:bold and color: #0000ff should be self-explanatory.
The last section, A:hover, only works for IE4+ and Netscape 6+. It does a mouse rollover effect for the text links. Move the mouse over a link and it will turn red and all the letters become uppercase. Now there's no mistaking where the links are in your page! :)
That's the style sheet - now how do we link our pages it to it? Simple - with one line in the <head> section:
<link rel="stylesheet" type="text/css" href="style.css">
This assumes the style sheet file is in the same directory as the web page, and it is called style.css. If it was in the directory above, we would of course use href="../style.css".
That's how you link to a style sheet. Suppose instead that we wanted to embed the above styles. We'd put them in the <head> section of our web page, within <style> tags:
<head>
<title>Web page with embedded styles</title>
<style type="text/css">
<!--
p { text-align: justify; font-family:
Verdana, Arial, Sans-Serif; }
h4 { color: #ff4400; margin-top: 45px; }
A:link, A:visited, A:active { text-decoration: none;
font-weight: bold; color: #0000ff; }
A:hover {color:red;text-transform:uppercase;}
-->
</style>
</head>
<body>
.
.
.
Note that it's a good idea to put comment tags ( <!-- --> ) around the style definition, to hide it from browsers that don't understand the <style> tag.
That's how you embed a style sheet. Don't forget that you can link to another stylesheet as well as embed one in your page, but the embedded style definitions will override the linked ones.
Classes
For further control over the style of your web pages, it's possible to create classes of tags. For example, the <p> tag could have a class, quote, specifically for quotations. This class could indent both sides of the paragraph and make the text italicised.
The style sheet would look like this:
p.quote { margin-left: 20px; margin-right: 20px;
text-decoration: italic; }
... and you'd reference the quote class in your HTML like this:
<p class="quote">
In the beginning God created the heavens and the earth.
Now the earth was formless and empty, darkness was over
the surface of the deep, and the Spirit of God was
hovering over the waters.
</p>
... which would make this modern translation from the Masoretic Text appear indented on both sides and italicised!
More fun with style sheets
We've covered the basics of style sheets. For a more thorough treatment of the subject, you could do worse than look at this paper from the guys who invented the thing. This covers all the different tags and stuff that you can modify with style sheets.
The End
That's the end of this tutorial. We hope you found it useful. If you're still stuck and would like further help, check out our online Help Forums, where you can get assistance from members of my and other webmasters.
If you would like to offer us feedback on this or any of the tutorials, please contact us. Have fun!
