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>
.
</DIV><DIV STYLE="width: 100px;"><P>This paragraph is contained within a DIV with a width of 100 pixels,so its padding will still be 10% of the width of the paragraph's parent.There will, therefore, be half as much padding on this paragraph as thaton the first paragraph.</P>

Figure 7-59. Padding, percentages, and the widths of parent

We've seen this before, of course -- in Section 7.3, "Margins", in case you don't remember -- butit's worth reviewing again, just to see how it operates.

. .

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!

Introduction

The applications that you create with Java and XML will rely on the services provided by your Java XML Parser (using DOM or SAX). The information itself might be stored in a variety of persistence engines (object databases, relational databases, file systems, dynamic websites, etc.). The information however that comes out of these persistence storage engines must be converted to XML (if they are not in XML already). Once this is done, you have to be concerned with the material covered in this document. This document outlines the most popular Java XML application categories that are possible in an environment where data is encoded with XML, where web access is ubiquitous and platform independence is a necessity.

Java Application Layer

All of the code that you write (in your Java classes) might be considered the Java application layer. Other layers are the XML Parser layer, the XML source (that supplies the XML data that is necessary), and the persistence engine (where the data is actually stored and retrieved by the source).

Your code (in the Java application layer) has to make use of the DOM or SAX API and the XML parser in order to access the information in XML documents (that come from your source). The source might be responsible for pulling data from different persistence engines (relational or object databases) and even the web (dynamically generated websites that supply only XML data).

side of an element. As with float:none, this value mostly exists to allow for normaldocument behavior, in which elements will permit floated elements toboth sides. none can be used to override otherstyles, of course, as shown in Figure 7-78. Despitethe document-wide rule that H2 elements will notpermit floated elements to either side, one H2 inparticular has been set so that it does permit floated elements oneither side: