| Text only | |||||
 |
 |
||||
|
|||||
WWW Information Pack
Topics covered: Styles, advantages of CSS, linking and importing external CSS files, document-level styles, inline styles, the cascade, classes, selectors, <div> and <span>, absolute and relative positioning, browser support, CSS validation.
Cascading Style Sheets (CSS) are an important method of controlling the visual appearance of web pages, using a simple but powerful set of style definitions. Wherever possible, you should use CSS to specify the visual formatting styles for the text within your XHTML documents.
If you are familiar with Microsoft Word, you may know that standard elements within your document (such as headings, footers, or defined paragraph types) can be formatted consistently throughout the document according to a set of styles (Figure 13.1). You can amend the formatting rules for any style, or define new styles for yourself.
Figure 13.1 - Applying document styles in Microsoft Word
CSS provides an analogous technique for applying styles to your web pages (Figure 13.2). For example, you could specify that "all bullet-list items in this web page will be displayed in green Arial font", and this rule could then be applied consistently throughout the web page - or even across an entire web site.
Figure 13.2 - CSS styles can be applied to a web document in Dreamweaver MX
When the HTML language was first devised, it was intended to convey the logical structure of documents, not their visual appearance. Indeed it was accepted that web documents might be rendered (interpreted for display) in very different ways on different users' computers.
However, as the web became more popular and commercial during the mid 1990s, a new generation of web designers began to push the limitations of HTML, in search of more pleasing visual effects and elaborate page layouts. Their complex coding tricks and new visual tags forced HTML into a role for which it was never intended. Such practices included:
Although it has undoubtedly helped to popularise the web as a communications and design medium, the use of HTML for visual formatting in this way has several major disadvantages:
The Word Wide Web Consortium (W3C) therefore devised CSS as a better method for controlling visual presentation on the web. By separating the visual information into a completely new style language, the remaining HTML (or XHTML) code can then be "freed" to do the job for which it was originally intended - i.e. to convey document meaning and structure.
The W3C published the first version of CSS (called CSS1) as an official recommendation in December 1996. This was followed by an extended version CSS2 in May 1998. CSS is now the W3C's officially recommended method for visual formatting of XHTML documents.
CSS confers the following advantages over older HTML-based formatting methods:
As with XHTML pages, there are essentially two approaches to working with CSS:
If you favour this approach, it is strongly recommended that you attend the DISS tutorial classes on web authoring with Macromedia Dreamweaver (see www.abdn.ac.uk/diss/training/ for full details). These classes provide practical hands-on training in the use of Dreamweaver to create and apply CSS styles.
Dreamweaver presents the user with a "floating" menu box, which can be used to apply styles to any selected part of the document currently being edited (see Figure 13.2). The four small buttons to the lower-right of this menu box allow you to add new style rules and edit your style sheets (Figure 13.3). Their use is covered in detail in the above tutorial class.
Figure 13.3 - The four control buttons on Dreamweaver MX's window allow you to (from right to left): link the current page to a new external style sheet; add new style definitions; edit an existing style definition; delete a style definition.
As with XHTML, detailed knowledge of the underlying code is not strictly necessary if you just want to use CSS to achieve simple and quick results. However, it probably will be necessary if you attempt to establish a more elaborate formatting regime across a large and complex web site, or if you need to de-bug the occasional display peculiarities that arise when using CSS.
Much of the information given in the rest of this Factsheet focuses on the underlying principles of CSS, with examples of the code. Since this Factsheet can only provide a basic overview of this complex subject, it is recommended that you also consult some of the sources of additional information given at the end.
Cascading Style Sheets can be applied to web documents on three different levels:
This is the most efficient and powerful way of using CSS, because it allows you to control the formatting of an entire web site from a single style sheet file.
A single plain text file is created, with a filename ending in .css - we will use the filename styles.css for example. This file contains a list of all of the formatting styles to be applied to the site. (Section 13.8 describes the syntax in which these CSS rules are written.)
Any number of XHTML web pages can then be linked to this single CSS file, such that they automatically inherit its style rules. All of these web pages will therefore follow the same single set of CSS formatting styles (Figure 13.4). A single change to the external CSS file will automatically change the corresponding display styles of every linked web page.
Figure 13.4 - The CSS file is used by any number of XHTML web pages
There are two alternative ways of applying an external CSS file to a web page - you can either link or import the CSS file into your XHTML document:
To link an external style sheet file into an XHTML document, the following code is used in the <head> section of the XHTML file:
<link rel="stylesheet" type="text/css" href="styles.css" />
To import an external style sheet file into an XHTML document, the following code is used within the <head> section of the XHTML file:
<style type="text/css">
@import url(styles.css);
</style>
Dreamweaver similarly offers a choice between the link and import methods, when it attaches an external style sheet to a web document. It will then create the corresponding code for you automatically. In Dreamweaver MX the command for this is
The link method is perfectly adequate for most web authors' initial requirements. The following more subtle differences between the two methods are likely to be of interest only to more advanced web authors:
(i) - The <link> method can be used to specify multiple alternate style sheets as follows:
<link rel="stylesheet" type="text/css"
href="sheet1.css" title="Default" />
<link rel="alternate stylesheet" type="text/css" href="large_text.css"
title="large text" />
When a web page makes use of alternate style sheets, it is intended that the user should be presented with a choice between these available style sheets, so that the same page may be viewed in multiple ways, according to the user's preference or needs. Internet Explorer 6 does not yet support this use of alternate style sheets, although the Mozilla browser now does.
(ii) - The @import command will not work for older browsers (e.g. Netscape 4). Older browsers will simply ignore any style sheets referenced by an @import command. This can be an advantage, because Netscape 4's support for CSS is so notoriously poor that you may want to prevent your style sheets from being applied when a page is viewed in such an old browser. So some advanced web developers may choose to use @import deliberately, so that their CSS work does not cause their pages to look "broken" in older browsers.
You can embed CSS rules within the <head> section of a single XHTML document, in order to create a set of presentation rules for that document only (Example 13.1). These rules will then apply throughout that document, but nowhere else.
<html>
<head><title>CSS demonstration</title>
<style type="text/css">
<!--
h1 {
font-weight: normal;
color: green;
}
-->
</style>
</head>
<body><h1>test header</h1></body>
</html>
Example 13.1 - The use of a style definition in the <head> section of a single web document. This example formats level-1 headings in a normal (non-bold) font weight, and sets the colour to green. Note also the use of <!-- and --> comment tags which ensure that older browsers which do not support CSS will simply ignore the style definitions.
CSS statements can be used individually within the <body> of a single XHTML document to define the visual styles of individual document elements (i.e. individual tags). In this case, the style rule is only applied once, at the point in the document where it is used:
<h1 style="color:blue; font-weight:bold">header text</h1>
Note however that such in-line styles are deprecated (discouraged from use, and likely to be removed in future) in the new XHTML1.1 specifications from the W3C. They confer little real advantage over the older <font> formatting technique, and their use is therefore best kept to a minimum.
Sometimes a single HTML document can be affected by the actions of several different sets of style sheet rules, which might try to format the same elements within the document in different and potentially contradictory ways. In such cases, the different style sheet rules will override one another, in the following "cascading" manner:
Figure 13.5 - The cascading effect of multiple style sheet rules
A style that is specified "closer" to the actual code of the document always takes precedence over other more distant "higher-level" styles. So, in-line styles will override any competing effects of document-level style sheets, which in turn will override any competing effects of external style sheets.
This overriding process only happens when two rules try to operate in contradictory ways on the same document element - any other rules remain in place and are inherited unaffected by their passage through the above cascade. What emerges at the end of this process may therefore be a document whose formatting rules have been specified at several different levels in the above hierarchy.
CSS files contain a simple plain-text listing of style rules.
Each of these rules consists of a selector, which identifies the element(s) to which the rule applies, followed by a list of property : value statements:
h2 {
color: green;
margin-left: 20px;
font-style: italic;
}
In the example above, the selector h2 means that the rule applies to all level-2 headings. Three display properties for these level-2 headings are then declared: their font colour (green), their left-hand margin (20 pixels), and the fact that they should be displayed in italic text.
The same set of display properties can be applied to more than one type of page element, by grouping the selectors into a comma-separated list:
h1, h2, h3, h4, h5, h6 {color: green; margin-left: 20px; font-style: italic }
The above example would apply the same set of three display rules to all document headers from level 1 to 6. Note that the properties can all be placed on one line, provided you still remember to separate them with semi-colons.
Note: This kind of simple CSS rule can also be created in Dreamweaver MX, by using the command and selecting the option.
Your CSS style rules do not necessarily have to apply to every occurrence of a particular XHTML tag. CSS allows you the flexibility to define special sub-types (classes) of XHTML tags.
For example, you could define a special CSS class, called .important , and use it to override the usual display properties of a generic XHTML element such as <h2>. In your CSS rules, you could specify:
h2 {color:green; margin-left:20px; font-style:italic}
.important {color:red}
(Note the class name .important starts with a dot.)
The normal (generic) type of level-2 headers is now set be displayed in green, italic font with a 20-pixel left margin. However in your XHTML you could create an "important" class of level-2 header which would be displayed in red:
<h2 class="important">This is an
important level-2 header and so will be red</h2>
<h2>This is a generic level-2 header and so will be green</h2>
The result is shown below:
Figure 13.6 - The result of defining a new "important" class of <h2> element, and setting its font colour to red. Note that the "important" class of headers still inherits the italic font and the 20-pixel left margin from the generic <h2> style rules.
Note : CSS classes can also be created in Dreamweaver MX, by using the command and selecting the option.
The <div> and <span> XHTML tags allow you to apply CSS styles flexibly to any section of your document.
The <div> tag is used to specify discrete blocks of page content for CSS formatting. For example, we can place a whole paragraph of text, plus an image, inside a <div> element, and apply a style to that entire block of content, as follows:
<p>generic page text</p>
<div class="indented">
<p>text within the indented div style definition</p>
<img src="flower.jpg" alt="image of a
flower" />
</div>
<p>more generic page text</p>
Example 13.2 - In this example, a whole paragraph of text plus an image are placed inside a <div> element, for which we have defined a class called "indented". We can now create a CSS rule to format this "indented" class:
.indented {margin-left: 10%}
The resultant page (Figure 13.7) shows that the paragraph and image within the <div> tag are formatted with additional margin space to the left.
Figure 13.7 - Indenting a block of page content, using a <div> tag and associated CSS formatting rule.
The <span> tag is used to apply styles to
in-line pieces of text, e.g.:
<p>This is generic text of which <span class="redtext">this is red</span> and the rest is not</p>
Again, the above example requires a matching CSS rule:
.redtext{color:red}
The result is shown in Figure 13.8:
Figure 13.8 - The result of using a <span> tag to apply a CSS formatting rule to some in-line text
CSS selectors allow you to define even more powerful formatting rules. Here
are some illustrative examples:
td em {color: red}
This means that any text marked by the <em>
emphasis tag will be displayed in red only if it occurs inside
a table cell <td>. The technical name for
this kind of CSS definition is a contextual selector.
a img { border: none }
This is another example of a contextual selector, which specifies that when
an image is used as a hyperlink (by putting the <img>
tag inside an <a href> tag), the image should
not be surrounded by a border. (Browsers normally do place a blue border around
any image that is being used as a link.)
p:first-letter {font-size:150%}
You can apply styles to the first letter of every paragraph (p:first-letter)
or the first line of every paragraph (p:first-line).
The above example increases the size of the first letter of every paragraph.
Note the use of a colon (:) rather then the more usual dot (.) in the above
example.
a:link {text-decoration:none}
a:visited {text-decoration:none}
a:hover {text-decoration:underline}
When all three link styles are specified as above, these rules will remove the underlining from hyperlinks. However when the mouse hovers over a link, the underlining will temporarily reappear. This "animated" effect is popular with some web designers - but if you use it you should make sure that your link colours are carefully specified so that users will still know where your hyperlinks are!
You will find many more complex examples of CSS selector options in the recommended books at the end of this FactSheet.
Note : CSS selectors can also be defined in Dreamweaver MX, by using the command and selecting the option.
So far we have mostly discussed the use of CSS for text formatting. However the CSS2 specifications also allow web designers to control the positioning of XHTML elements on the page. In time, it is likely that CSS positioning techniques will replace the older practice of using HTML tables for page layout.
However, it is important to realise that support for CSS positioning is currently extremely buggy and inconsistently implemented in many browsers. Although this situation is slowly improving, you will need to test the appearance of your pages very carefully in a range of different browsers if you intend to rely upon CSS positioning. You are liable to find that page designs that look wonderful in a modern browser disintegrate into an illegible jumble of overlapping text in older browsers. Netscape 4.x is particularly bad in this respect, because it was built before the CSS2 specifications were finalised.
CSS positioning is based around the idea that every page element occupies a box, and that these boxes would normally be displayed one after another in the natural flow of the page. CSS positioning rules enable you to shift the location of an element's box relative to where it would normally be displayed in the flow. Alternatively, you can remove that element from the flow altogether and position it absolutely with respect to the sides of the document.
For example, the following code uses <div> tags to create two blocks of page content, 100 pixels wide, and position them absolutely to either side of the page. (These might then be used for a web site's navigation links, or perhaps for small advertisements.) Then a third central page block is used to store the main page content - this central block is not absolutely positioned, and so adapts its width and height in accordance with the overall flow of the page.
In a file called styles.css:
body {
margin: 0px;
padding: 0px;
}
#left {
position: absolute;
top: 0px;
left: 0px;
margin: 5px;
padding: 10px;
border: 1px solid black;
background-color: #dddddd;
width: 100px;
}
#right {
position: absolute;
top: 0px;
right: 0px;
margin: 5px;
padding: 10px;
border: 1px solid black;
background-color: #dddddd;
width: 100px;
}
#main {
margin: 5px 132px 0px 132px;
padding: 10px;
border: 1px solid white;
}
In the associated XHTML file:
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en">
<head><title>CSS positioning</title>
<style type="text/css">
@import url(styles.css);
</style>
</head><body>
<div id="left"><p>left hand navigation links go here</p><hr
/><p>left hand navigation links go here</p></div>
<div id="right"><p>right hand adverts go here</p><hr
/><p>right hand adverts go here</p></div>
<div id="main">
<h1>Main page content</h1><p>Main page content goes here</p><p>This
box will expand vertically as necessary, and will also fit itself to the available
horizontal width.</p>
</div>
</body></html>
Example 13.3 - The CSS and XHTML code needed to produce a three-column page layout. Note that we have specified three page sub-elements ("left", "right", and "main") and referenced them with <div> tags. Note that when we know that there will be only one element on the page with each of these names, then we use the syntax <div id=""> in the XHTML, and prefix the name with a hash symbol (#) in the CSS.
When viewed in Internet Explorer 6 (or any other CSS-compliant browser such as Mozilla 1 or Opera 7) the above page will be rendered as in Figure 13.9.
Figure 13.9 - A three-column layout achieved entirely in CSS, with no tables. Note that the border of the central box is set to white, and so is not visible.
Be aware that the precise widths of the boxes may vary between browsers - Internet Explorer 5 has an annoying bug that causes it to miscalculate the arithmetic of box widths, padding and margins, to create boxes that are too narrow. For the full details of the CSS box model, see the references at the end of this FactSheet.
Note also that Netscape 4's attempts to render the above CSS positioning would be badly broken (with the two grey boxes superimposed on top of one another) - so we have chosen to prevent Netscape 4 from using these style definitions at all, by using the @import method of calling in the style sheet. Netscape 4 will therefore simply render the above code as a purely linear page, with no attempts at positioning.
Dreamweaver MX also supports this type of absolute positioning. The command will place an absolutely positioned box into your page, which you can re-size and drag to wherever you want it (Figure 13.10). All of the usual caveats apply, however - be sure to preview your pages in a range of browsers, and check how they behave on lower-resolution screens. The careless use of absolute positioning can result in pages that are too wide to fit into smaller screen sizes, and therefore require the user to scroll horizontally in order to read them.
(Note also in Figure 13.10 that Dreamweaver MX uses the deprecated "in-line" form of style definitions to control the position, size and formatting of the boxes.)
Figure 13.10 - Two absolutely positioned boxes, created in Dreamweaver MX
As mentioned earlier, you can define different CSS style sheets for different media. If you want to format the printed versions of your web pages differently from the on-screen versions, then you can specify different style sheets for these different media:
<link rel="stylesheet" href="styles.css"
type="text/css" media="screen" />
<link rel="stylesheet" href="print_styles.css" type="text/css"
media="print" />
The rules in the print_styles.css file will then only be applied when the page is printed (or previewed with the IE6 command).
Useful rules to include in a print-only style sheet might include a serif font, or a smaller line spacing from that used on-screen. More advanced web designers might consider preventing entire sections of their pages from printing altogether, so that the user is not required to print out unnecessary navigation-block images. For example, in Example 13.3 above, the following rules in the print style sheet:
#left {display:none}
#right {display:none}
would prevent the navigation and advertising side-bars to the left and right of the page being printed.
When experimenting with such techniques, you should always check that your pages print correctly from a variety of different browsers.
See www.w3.org/TR/REC-CSS2/media.html for further details of media-specific CSS rules (but again be aware that not all of these are supported by all browsers).
When working with CSS there will inevitably be times when your pages will not display as intended, and you may wonder whether there is an error in your CSS coding. In such cases, it is useful to be able to validate your CSS code, to check that it conforms to the correct syntax.
There is a free CSS validation service at jigsaw.w3.org/css-validator/ which allows you either to submit the URL of a published web page for checking, or to paste smaller sections of code into a form. Even if you have encountered no specific problems, it is still good practice to validate your CSS code, since not all CSS errors are immediately apparent.
The DISS tutorial class Introduction to Macromedia Dreamweaver can provide you with practical training in the use of Dreamweaver to create CSS rules. See www.abdn.ac.uk/tad for more details.
For a detailed reference guide to every aspect of CSS, the book Cascading Style Sheets: The Definitive Guide is recommended, written by Eric Meyer and published by O'Reilly. Be sure to check on-line for the most recent edition before ordering.
If you just need a short practical overview CSS (and many other aspects of web development) the book Web Design in a Nutshell by Jennifer Niederst, published by O'Reilly, is an excellent source of reference. It is currently in its second edition, but again be sure to check for more recent versions.
Useful basic CSS tutorials on the web include:
www.w3schools.com/css/ and
www.westciv.com.au/style_master/academy/css_tutorial/introduction/
For more information on CSS positioning and the box model, the book Cascading Style Sheets: Separating Content from Presentation by Owen Briggs, Steve Champeon, Eric Costello, Matthew Patterson, published by Glasshaus, contains a number of useful practical examples.
Web sites dealing with CSS positioning include:
www.dcjt.demon.co.uk/dc/web/2002/layout.html
glish.com/CSS/
www.thenoodleincident.com/tutorials/box_lesson/
jessey.net/simon/articles/003.html
The CSS box model is described in depth at:
www.w3.org/TR/REC-CSS2/box.html
 Contents page | Next Factsheet  |
