|
|
|
Adding cascading style sheets (CSS) to web pages is a relatively simple process, although the topic as a whole is fairly sizeable. Technically speaking, style sheets are not part of HTML but act as an extension to it. Consequently there is a whole new syntax to learn, as well as the HTML used to implement style sheets. In addition to this, browsers have only recently started supporting style sheets and there are differences in the extent and manner of implementation.
First of all we will look at how to use style sheets in your web pages, followed by a detailed review of the presentation and formatting options available, and finally we will cover the differences between the browsers and some further tricks to bear in mind.
If are you are familiar with modern word processing packages such as Microsoft Word or WordPerfect then you are probably familiar with the concept of styles. Styles enable you to define a consistent 'look' for your documents by describing once how headings, paragraphs, quotes, etc. should be displayed.
In terms of web pages this means that to have all your level 1 headings centered, blue and Arial you do not have to apply the ALIGN attribute and <FONT> tag to each <H1> element, you simply state at the beginning of the document, or in a separate file, how the text within all the <H1> tags should be displayed. The result of this, is that all the presentation HTML is removed from your pages (tags such as the dreaded FONT
) and your code is simply left describing the structure of your pages. Just about any element can be defined by a style sheet; this includes headings, paragraphs, lists and logical element such as CODE or BLOCKQUOTE.
CSS offers much more flexibility in terms of the presentation effects that they provide. Properties such as colour, background, margin, border and many more can be applied to all elements. Style sheets also form an integral part of dynamic HTML as they can be accessed and changed on-the-fly by scripting languages.
At the time of writing, style sheets are at least partially supported by Microsoft Internet Explorer 3 upwards, Netscape Navigator 4 upwards, Opera 3.5 upwards, W3C's Amaya and many UNIX based browsers.
<LINK>, <STYLE>, <DIV>, <SPAN>, CLASS, ID
Adding styles to your web pagesStyle sheet syntax is simple, and is made up of three parts: a selector, a property and a value.
selector {property: value}
The selector is normally the element or tag you wish to define, the property is the attribute you wish to change, and each property takes a value. The property and value are separated by a colon and contained in curly braces. If you wish to specify more than one property than you should separate each one by a semi-colon. The example below shows how you would define level 1 headings to be shown centered and coloured blue.
H1 {text-align: center; color: blue}
The W3C Cascading Style Sheets Level 1 (CSS1) Specification and CSS2 Specification formally define the properties and values available. A full list of properties with examples may also be found in the Properties section.
An important note from experience of using style sheets is that you must use the closing tags for all situations. This means that if you start a paragraph using <P> you must end it using </P>. Remember to apply this to tags such as list items <LI></LI>, table cells <TD></TD> and any other elements where previously it has not been required to close the tag.
Style sheet methods can be applied at three different levels:
You can create an external style sheet for your entire website, or for a group of related pages on your website. Each web page must link to the style sheet using the <LINK> element. The <LINK> element must always be placed within the <HEAD> of your document, as follows:
<HEAD>
<TITLE>Style sheet example</TITLE>
<LINK REL="stylesheet" HREF="styles/mystyles.css" TYPE="text/css">
</HEAD>
The above example links to a style sheet file called mystyles.css in a directory called styles.
The style sheet can be written in any text editor. The file should not contain any HTML tags like <HEAD> or <STYLE> and must be of the form:
selector {property: value}
Your style sheet should be saved with a .css extension. An example of an entire style sheet file is shown below:
/* Example style sheet file (note how this comment was created) */
BODY {background: #FFFFD8;
margin-top: 20}
A:link {color: #400080;
background: #FFFFD8}
H1 {font-weight: bold;
text-align: center;
color: #006000;
background: #FFFFD8;
font-family: 'Gill Sans', Arial, sans-serif}
CITE {font-family: 'Gill Sans', Arial, sans-serif;
font-style: italic}
An linked style sheet is ideal when the style is applied to numerous pages. With a linked style sheet, an author could change the look of an entire site by simply changing one file. Additionally, most browsers will cache a linked style sheet, thus avoiding a delay in page presentation once the style sheet is cached.
Contextual selectors are merely strings of two or more simple selectors separated by a space. These selectors can be assigned normal properties and, due to the rules of cascading order, they will take precedence over simple selectors. For example, the contextual selector in:
P STRONG { background: yellow }
is P STRONG. This rule says that strongly emphasized text within a paragraph should have a yellow background; strong text in a heading would be unaffected.
In order to decrease repetitious statements within style sheets, grouping of selectors and declarations is allowed. For example, all of the headings in a document could be given identical declarations through a grouping separated by commas, thus:
H1, H2, H3, H4, H5, H6 {color: red;
font-family: sans-serif }
The above example would make all headings in the document coloured red and in a sans-serif font (if the browser supports it).
The implication of embedding a style sheet into a web page is that only a single web page will benefit from the styles you specify. If the web page also links to a style sheet, the embedded styles will take precedence in the case where two tags are defined differently (see The Cascade). Embedded styles are placed in the <HEAD> of your web page, surrounded by <STYLE></STYLE> tags. The example shows how the previously linked stylesheet (see above) could be embedded into a web page:
<HEAD> <TITLE>Style sheet example</TITLE> <STYLE TYPE="text/css"> <!-- BODY {background: #FFFFD8; margin-top: 20} A:link {color: #400080; background: #FFFFD8} H1 {font-weight: bold; text-align: center; color: #006000; background: #FFFFD8; font-family: 'Gill Sans', Arial, sans-serif} CITE {font-family: 'Gill Sans', Arial, sans-serif; font-style: italic} --> </STYLE> </HEAD>
Note the comment tags <!-- --> surrounding the stylesheet attributes. These ensure that the attributes remain hidden from browsers not supporting style sheets.
An embedded style sheet should be used when a single document has a unique style. If the same style sheet is used in multiple documents, then an external style sheet would be more appropriate.
Styles may be applied inline to any element in the <BODY> using the STYLE attribute in the relevant element tag. The STYLE attribute can contain any number of CSS properties. The following example demonstrates how to change the colour of a paragraph inline. Notice how the embolded word also retains the style properties defined for the paragraph.
<P STYLE="background-color:#F6F6FA; color:#860BA8">
Cor blimey, <B STYLE="font-size:120%">Guvnor</B> you don't get many of them to the pound!</P>
Cor blimey, Guvnor you don't get many of them to the pound!
Inlining styles loses many of the advantages of style sheets by mixing content with presentation. This method should be used sparingly, such as when a style is to be applied to a single occurrence of an element.
When multiple style sheets are used, the style sheets may fight over control of a particular selector. In these situations, there must be rules as to which style sheet's rule will win out. Style sheets override conflicts based on their level of specificity, where a more specific style will always win out over a less specific one - this cascade effect that leads to the name 'cascading style sheets' (CSS).
What this means is that the three methods outlined above can be combined together with the order of precedence: inline>embedded>linked. An inline style applies to an individual element and is therefore more specific than an embedded style sheet, which applies to an entire web page. Similarly, styles set in an embedded style sheet will override those set in a linked style sheet, which applies to multiple web pages.
Where a number of properties have been set for the same selector in different style sheets, values will be inherited from the more general style sheet. For instance, a linked style sheet may set the following properties for the H1 selector:
H1 {background-color:#FFFFD8; text-align:justify; font-size:12pt}
And an embedded style sheet may set these following properties:
H1 {text-align:left; font-size:150%}
This means that if the page with the embedded style sheet also links to the linked style sheet the resulting properties for H1 will be:
background-color:#FFFFD8; text-align:left; font-size:18pt
As you can see, the background-color is inherited from the linked style sheet, the text-alignment is replaced by the embedded style sheet and the percent increase in text size is applied to the linked style sheet, as opposed to a browser default.
Classes enable you to define different styles for the same element. For example, you may be writing a FAQ and wish your paragraphs to be displayed either red or green & italic, according to whether they are a question or an answer. In this case you could embed a style definition as follows:
<STYLE>
<!--
P.question {color: green;
font-style: italic}
.answer {color: red}
-->
</STYLE>
You would present your FAQ using the defined classes as follows:
<P CLASS="question">What is Jalfrezi?</P>
<P CLASS="answer">Jalfrezi is a hot curry from India, into which chillies are added.</P>
<P CLASS="question">What is Dhansak?</P>
<P CLASS="answer">Jalfrezi is a hot, sweet and sour curry, based on dhal.</P>
What is Jalfrezi?
Jalfrezi is a hot curry from India, into which chillies are added.
What is Dhansak?
Dhansak is a hot, sweet and sour curry, based on dhal.
In this example, the answer class may be applied to any element since it does not have an HTML element associated with it in the style sheet. Using the style sheet given above, the question class may only be applied to the <P> element.
Classes can be a very effective method of applying different styles to structurally identical sections of an HTML document.
A good practice is to name classes according to their function rather than their appearance. The answer class in the above example could have been named red, but this name would become meaningless if the author decided to change the style of the class to a different color. You can't start your class names with a digit or a dash.
IDs enable you to define a unique style for an element. In this case you could embed a style definition as follows:
<STYLE>
<!--
#copyright {font-style:italic;
font-size:smaller}
-->
</STYLE>
You would present your FAQ using the defined classes as follows:
<P ID="copyright">©1997-1999 Richard Rutter</P>
©1997-1999 Richard Rutter
Each ID attribute must have a unique value over the document. The value must be an initial letter followed by letters, numbers, digits or hyphens. The letters are restricted to A-Z and a-z. Note also the addition of a hash (#) in the ID style definition.
Use of ID for applying style is discouraged since the style may only be applied once in the document. Use of ID is normally reserved for use with dynamic HTML.
SPAN ElementThe SPAN element was introduced into HTML to allow authors to give style that could not be attached to a structural HTML element. <SPAN> may be used as a selector in a style sheet, and it also accepts the STYLE, CLASS, and ID attributes, at least one of which must be used for the tag to have any affect. You must also include the closing tag </SPAN>, as one would with any inline element.
Note that <SPAN> is an inline element, so it may be used just as elements such as <EM> and <STRONG> in HTML. The important distinction is that while <EM> and <STRONG> carry structural meaning, i.e. emphasis, <SPAN> has no such implied meaning. It exists purely to apply style, and so has no effect when the style sheet is disabled.
DIV ElementThe DIV element is similar to the SPAN element in function, with the main difference being that <DIV> (short for 'division') is a block-level element. DIV may contain paragraphs, headings, tables, and even other divisions. This makes DIV ideal for marking different sections of the page, such as chapters, abstracts, or notes. As with SPAN, the section of the page is defined using the <DIV></DIV> tags with a STYLE, CLASS, or ID attribute.
The following example demonstrates how to change the background colour of a heading and paragraph section in a document.
<P>This paragraph has the normal background colour.</P>
<DIV STYLE="background-color:wheat">
<H3>This heading has a wheat-coloured background.</H3>
<P>So does this paragraph, <SPAN STYLE="background-color:aqua">apart from this bit which is aqua</SPAN>.</P>
</DIV>
<P>Now we're back to normal.</P>
This paragraph has the normal background colour.
This heading has a wheat-coloured background.
So does this paragraph, apart from this bit which is aqua.
Now we're back to normal.
Now you know how to add style sheets to your HTML, you'll be wanting to know what properties you can define. »
Useful References   |  |     |