Web Site Development

CS2020: Web Science, Sytems and Design

Introduction to Style Sheets

Adding cascading style sheets (CSS) to web pages is not difficult. Style sheets are typically external files that define syles that can be applied to text in your html document. For example, you may create a style called "BigBlue" that has a font of size 24 and is blue in color. Then you when you come to some text in your html you wish to format in this fashion you can simply refer to the "BigBlue" style.

So, there are 2 parts to CSS, the first is defining the styles and the second is their application within an HTML document. While there is a standard to CSS, it is true that different browsers and versions of a browser may support CSS differently. You must read up on the documentation of each browser (and its version) to understand this.

First lets look at how to use style sheets in your web pages

What are style sheets?

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.

Specific Markup

<LINK>, <STYLE>, <DIV>, <SPAN>, CLASS, ID

Adding styles to your web pages

Basic Syntax

Style 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.

Linking style sheets to HTML

Style sheet methods can be applied at three different levels:

Linked. This means you create a single style sheet that each page of your web site links to, thus creating a consistent look to your entire site.
Embedded. This means you include the style sheet at the beginning of a specific web page. This will define the look of a single page.
Inline. This allows you to apply styles to a section or group of tags on a page.

Linking to a style sheet file

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

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.

Grouping

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).

Embedding a style sheet

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.

Inlining style

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.

The Cascade

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 and IDs

Using classes

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.

Using IDs

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.

Divisions and spans

The `SPAN` Element

The 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.

The `DIV` Element

The 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.

Introduction to Style Sheets

What are style sheets?

Specific Markup

Adding styles to your web pages

Basic Syntax

Linking style sheets to HTML

Linking to a style sheet file

Contextual Selectors

Grouping

Embedding a style sheet

Inlining style

The Cascade

Classes and IDs

Using classes

Using IDs

Divisions and spans

The `SPAN` Element

The `DIV` Element

This heading has a wheat-coloured background.

Useful Reference

W3.org

Introduction to Style Sheets

Specific Markup

Basic Syntax

Linking style sheets to HTML

Contextual Selectors

Grouping

Using classes

The SPAN Element

The DIV Element

This heading has a wheat-coloured background.

The `SPAN` Element

The `DIV` Element