Exploring online research methods - Incorporating TRI-ORM

Introduction to Cascading Style Sheets

[Skip instructions]

[i] Click on the headings to open them. They will open on this page. Open the following link for further information about these headings if required.

Your browser does not support these headings. To ensure that the contents remain accessible, they have been automatically opened so that all the information on the page is displayed.

However, to take advantage of the headings and to ensure that the layout and design of this site are displayed correctly, you are recommended to upgrade to a current version of one of the following standards compliant browsers:

Glossary links are included within this page. If a word appears as a link, clicking on this link will show the definition of the word in a 'pop-up window'. Select the following link for information about these glossary links if required.

  1. Select the links see the definitions in a pop-up window.
  2. NB. If you use pop-up window blocking software, you will need to deactivate it for pop-ups on this site to use the glossary links. Alternatively, all glossary definitions can be seen on the 'Glossary' page in the 'Resources' section.
  3. Use of the glossary links is JavaScript dependent. If JavaScript is disabled, it will be necessary to open the 'Glossary' page to view the definitions. Opening this page in a new window may allow you to refer more easily to the definitions while you navigate the site.

Open/close headingIntroduction

CSS (Cascading Style Sheets - also referred to simply as 'Style Sheets') provide a means of adding design elements to basic HTML pages. For example, using CSS, it is possible to control the colour, positioning and spacing of objects such as text, links, images and tables. All the main design elements of this website are produced through the use of Style Sheets.

The use of CSS separates the presentation of web content from the structure, bringing three major benefits:

  1. Design options are increased because CSS can provide more precise and wide-ranging control over design elements on the page (though it is important to make allowances for the fact that different browsers may interpret Style Sheet information differently and to thoroughly test pages).
  2. Changes are easier to make during design and development because Style Sheet information is applied across all elements of a page or site. For example, if you want to change the style of all the links, it is necessary only to change the Style Sheet, rather than changing every link on the page or site.
  3. Accessibility is increased as users can choose how they wish the site to appear by applying their own Style Sheets to a page, or by accessing the site content only without the style information. (It is thus important to design pages in such a way that the content remains accessible when the design features are removed, and to test that this is the case - e.g. by ensuring that colour is not used to impart meaning that can not be accessed when the colour is removed).

This page will provide the knowledge required to produce a Style Sheet and apply it to an HTML page. It does not aim to provide comprehensive coverage of CSS, but to provide an introduction to the basics.

As with the production of HTML pages, the only requirement is that you have a simple text editor, such as notepad for windows, and a browser such as MS Explorer or Mozilla Firefox in which you can test your pages. However, most WYSIWYG (What You See Is What You Get) software packages such as Macromedia Dreamweaver or Microsoft FrontPage allow for the automation of some aspects of CSS creation.

 

Close heading CLOSE

Open/close headingLearning activity: CSS in action

The following extract from a webpage uses CSS for layout, font, and colours. The HTML document is reproduced below, with the different sections divided up and labeled.

My Page

Welcome to my web page

It is styled using CSS

Hope you like it

 

[?] Examine the HTML document and try to establish where the CSS information is located, what effect it has and how it links to the HTML. Try to notice the patterns in the syntax and punctuation of the CSS. When you have studied the document, turn on 'help' by selecting the question mark icon. This will allow you to hold your mouse over different sections of the document to see explanations.

You can also use this activity to check your knowledge of the structure of HTML documents and tags, by identifying the function of all the different tags, before turning on 'help'.

An alternative text-only version is provided below.

 

Open/close headingText-only alternative

[?]Examine the following HTML document and try to establish where the CSS information is located, what effect it has and how it links to the HTML. Try to notice the patterns in the syntax and punctuation of the CSS. When you have studied the document, select 'Explanation' at the bottom of this section to see explanations of the different sections of the document.

You can also use this activity to check your knowledge of the structure of HTML documents and tags, by identifying the function of all the different tags, before checking the explanations.

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CSS in action</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
color: #003;
background-color: #ff9;
}
h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 120%;
font-weight: bold;
color: #006;
}
p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 90%;
}
.red {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 90%;
color: #f00;
font-style: italic;
}
</style>
</head>
<body>
<h1>My Page</h1>
<p>Welcome to my web page</p>
<p class="red">It is styled using CSS</p>
<p style="text-align: center; color: #906;"> Hope you like it</p>
</body>
</html>

 

Open/close headingExplanation

Section of code Explanation
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> The DOCTYPE (document type) definition, known as a DTD. This declares what type of page it is and what language is being used, and it allows the page to be validated as conforming to Worldwide Web Consortium (W3C) standards.
<html> The 'open HTML' tag. Tells the browser that what follows is an HTML document.
<head> The 'open head' tag. The head contains information which is basically not intended for display. It is loaded into the browser before the body section. CSS rules are placed between these tags.
<title>CSS in action</title> The title. This states what the title of the page is, allows the title to be displayed at the top of the browser window, and provides a title that can be saved to a user's favourites list.
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> Meta command. These commands provide extra information about the pages. This meta command describes the type of content and which set of characters is in use.
<style type="text/css"> The 'open style' tag. The style rules must be placed within style tags or in a separate file linked to the document.
body {
color: #003;
background-color: #ff9;
}
Style rule that applies the following style to all the tags in the body of the HTML page(s) linked to the Style Sheet:
Dark blue text colour
Light yellow background colour
[NB. The full hexadecimal code for these colours are #000033 (dark blue) and #ffff99 (light yellow), but these shortened (#003 and #ff9) codes can be used in Style Sheets].
h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 120%;
font-weight: bold;
color: #006;
}
Style rule that applies the following style to all the <h1></h1> tags contained in the HTML page(s) linked to the Style Sheet:
They are displayed in the first font in the font-family
list that is available on the user's computer;
The text is sized at 120% of the default size, in bold
and in a blue colour.
p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 90%;
}
Style rule that applies the following style to all the <p></p> tags contained in the HTML page(s) linked to the Style Sheet:
They are displayed in the first font in the font-family
list that is available on the user's computer;
The text is sized at 90% of the default size.
.red {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 90%;
color: #f00;
font-style: italic;
}
A style 'class' that is not tied to a particular HTML element. This style rule can be applied to any tag contained in the HTML page(s) linked to the Style Sheet. The style is applied to the tag in an HTML document by labeling it with the name 'red' , e.g.

<h3 class="red">A red heading</h3>
</style> The 'close style' tag. The style rules must be placed within style tags or in a separate file linked to the document.
</head> The 'close head' tag. The head contains information which is basically not intended for display. It is loaded into the browser before the body section. CSS rules are placed between these tags.
<body> The 'open body' tag. The body of an HTML document contains the main display content. It is here that text, images, links, form elements, tables and lists are placed.
<h1>My Page</h1> An <h1></h1> heading. This takes the style set in the h1 style rule above.
<p>Welcome to my web page</p>
A paragraph. This takes the style set in the p style rule above.
<p class="red">It is styled using CSS</p> A paragraph with the style specified in the style class '.red' above.
<p style="text-align: center; color: #906;"> Hope you like it</p> A paragraph with the style specified 'inline'. This takes the style set in the p style rule above, and alters or adds the style set in the line. Thus the font family and size set in the p style rule above apply to this paragraph and further styles are also added (centred text and a purple colour). Where the styles are in conflict, the inline style overrules the style set in the style tags.
</body> The 'close body' tag. The body of an HTML document contains the main display content. It is here that text, images, links, form elements, tables and lists are placed.
</html> The 'close HTML' tag. Required to end an HTML document.

 

Close heading CLOSE

 

Close heading CLOSE

 

Close heading CLOSE

Open/close headingLinking CSS to HTML documents

As shown in the activity above, Style Sheets consist of a set of rules which provide information on how particular elements on a page should be displayed. The style information can be linked to the HTML document using the following three methods:

Open/close heading1. Embedded CSS

The style rules are placed in the document head between the following tags:

<style type="text/css">

and

</style>

 

Close heading CLOSE

Open/close heading2. External CSS

The rules are placed in a separate text file (without style tags) which is saved with a .css extension. The file can then be linked to the HTML document by placing the following in the head of the document:

<link href="filename.css" rel="stylesheet" type="text/css">

It is also possible to link to the CSS file by importing the file when the page loads, using the following syntax:

<style type="text/css"><!--
@import url("mystyle.css");
--></style>

Because older browsers do not recognise the @import syntax, it is common to use both methods together to link to different CSS files depending on what kind of browser is being used. If a Style Sheet designed for older browsers is placed in an href link, followed by an @import link, modern browsers will override the first Style Sheet with the second, while older browsers will use the first and ignore the second.

 

Close heading CLOSE

Open/close heading3. Inline CSS

Style information is added to an HTML tag in a similar way to that in which a range of attributes and values can be added (see the 'Introduction to HTML 1' and 'Introduction to HTML 2' sections). E.g.

<p style="font-weight: bold; color: #009"; text-align: center;> Text styled with inline CSS</p>

produces:

Text styled with inline CSS

 

Close heading CLOSE

The term 'Cascading Style Sheets' derives from the fact that the Style Sheet information from all three methods can work together with the information from the latter overriding the information from the former in a 'cascade' (See 'the cascade' section below).

It is worth noting that the latest standards of XHTML recommend using external CSS only rather than using inline or embedded styles. This is because external Style Sheets allow the maximum separation of content from presentation, so that all content information is effectively placed in one file and all presentation placed in another. This makes it easier for users to display only the content or to apply their own Style Sheet.

 

Close heading CLOSE

Open/close headingStyle Sheet syntax

The rules that Style Sheets are made up of consist of the following elements:

Selectors - A references to which elements on the HTML page the style should be applied to, or to the name of a style 'class' which can be applied to any tag (see the 'creating CSS classes' section below.

Declarations - A series of statements about what the style should be. These are made up of properties and values.

The syntax is as follows:

selector {

property 1: value(s);
property 2: value(s);

}

e.g.

p {

font-family: Verdana, Arial, Helvetica, sans-serif;
color: #006;

}

applies a style to all the <p></p> tags contained in the HTML page(s) linked to the Style Sheet. They are displayed in the first font in the font-family list that is available on the user's computer, and in a blue colour.

The same syntax can be added inline to a tag in an HTML document by replacing the curly brackets with 'style=' and quotation marks as follows:

<p style="font-family: Verdana, Arial, Helvetica, sans-serif; color: #006;">Add text here</p>

Punctuation and spacing

A CSS rule must be accurately punctuated to allow the browser to recognise and distinguish between different selectors, declarations, properties and values.

p { font-family: Verdana, Arial, Helvetica, sans-serif; color: #006; } (Curly brackets surround the declarations, a colon separates a property from its value(s), semi-colons separate each declaration).
The use of punctuation in a CSS rule

It is common to space Style Sheet rules as shown above with each declaration on a new line and indented from the selector. This is done for clarity to make reading and editing Style Sheets easier, but it is not obligatory and has no effect on how the browser interprets the information.

 

Close heading CLOSE

Open/close headingCreating CSS Classes

Different styles can be added to HTML elements through the use of classes. This is done by adding an extension to the selectors in the Style Sheet, placing the extension name after the HTML element name and a full-stop. The styles can then be applied by referring to the extension in the HTML document.

e.g. Two different paragraph styles can be created as follows:

p.bluesans {

font-family: Verdana, Arial, Helvetica, sans-serif;
color: #006;

}

p.redserif {

font-family: Georgia, Times New Roman, Times, serif;
color: #f00;

}

The styles can then be applied to different paragraphs in the HTML document, as follows:

<p class="bluesans">This is a paragraph with the "bluesans" style applied.</p>

<p class="redserif">This is a paragraph with the "redserif" style</p>

which produces the following:

This is a paragraph with the "bluesans" style applied.

This is a paragraph with the "redserif" style applied.

Classes can also be created without attachment to a particular HTML element. The procedure is the same as above, but instead of adding an extension to an HTML element, it is created independently. To do this, a full-stop is added before the class name as follows:

.bluesans {

font-family: Verdana, Arial, Helvetica, sans-serif;
color: #006;

}

.redserif {

font-family: Georgia, Times New Roman, Times, serif;
color: #f00;

}

The styles can then be applied to different elements in the HTML document, as follows:

<h2 class="redserif">This is a header (<h2>) with the "redserif" style applied.</h2>

<p class="bluesans">This is a paragraph with the "bluesans" style applied.</p>

<h4 class="bluesans">This is a header (<h3>) with the "bluesans" style applied.</h4>

<p class="redserif">This is a paragraph with the "redserif" style applied.</p>

which produces the following:

This is a header (<h2>) with the "redserif" style applied.

This is a paragraph with the "bluesans" style applied.

This is a header (<h3>) with the "bluesans" style applied.

This is a paragraph with the "redserif" style applied.

The styles will be applied to the elements and will override any conflicting colour and font styles that are already applied to them. Any styles that do not conflict will also be maintained through the 'cascade' (see section below).

 

Close heading CLOSE

Open/close headingClasses with <div> and <span> tags

<div></div> tags can be used in the HTML document to create a 'division' in the page in which all elements will have a particular style attached.

e.g.

Style Sheet:

.rightbold {

text-align: right;
font-weight: bold;

}

.centeritalic {

text-align: right;
font-style: italic;

}

.bluesans {

font-family: Verdana, Arial, Helvetica, sans-serif;
color: #006;

}

.redserif {

font-family: Georgia, Times New Roman, Times, serif;
color: #f00;

}

HTML Document:

-><div class="rightbold">

<h2 class="redserif">This is a header (<h1>) with the "redserif" style applied.</h2>

<p class="bluesans">This is a paragraph with the "bluesans" style applied.</p>

<p>in both cases, the "rightbold" style is applied.</p>

-></div>

-><div class="centeritalic">

<h4 class="bluesans">This is a header (<h2>) with the "bluesans" style applied.</h4>

<p class="redserif">This is a paragraph with the "redserif" style applied.</p>

<p>The "centeritalic" style is applied in both cases.</p>

-></div>

The styles linked to the <div></div> tags (shown next to the ->arrows) are applied to all the tags within, as follows:

This is a header (<h2>) with the "redserif" style applied.

This is a paragraph with the "bluesans" style applied.

In both cases, the "rightbold" style is applied.

This is a header (<h3>) with the "bluesans" style applied.

This is a paragraph with the "redserif" style applied.

The "centeritalic" style is applied in both cases.

<span></span> tags are used in a very similar way and also apply style to a section of a document. However, while <div> tags are always followed by a line-break, <span> tags are not.

<span> tags can thus be used to apply different styles to text within sentences and paragraphs.

e.g.

<p>Using &lt;span&gt; tags it is possible to apply the <span class="bluesans">"bluesans" style</span> and the <span class="redserif">"redserif" style in the same line.</span></p>

produces:

Using <span> tags it is possible to apply the "bluesans" style and the "redserif" style in the same line.

Replacing the <span> tags with <div> tags produces the following:

Using <span> tags it is possible to apply the

"bluesans" style
and the
"redserif" style

in the same line.

 

Close heading CLOSE

Open/close headingThe cascade

Cascading Style Sheets are particularly useful in that they allow a set of generic styles to be applied to elements of an entire site. Changes can be made across the whole site simply by making one change to an external Style Sheet which all the pages are linked to.

e.g. If the following rule is included in an external Style Sheet linked to all the pages of a site

h2 {

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 140%;
color: #006;
background-color: #ff9;
font-weight: bold;
text-align: center;

}

all the <h2></h2> headings will appear as follows:

Example header

However, where the designer wishes to add particular styles to individual pages or sections, or to make a generically-styled element on a particular page look different, s/he can take advantage of the 'cascade' which allows Style Sheet information from different sources to work together.

Where one change is required on a particular page, this can most easily be achieved by adding an inline style rule.

e.g. Adding the following syntax maintains the information from the generic Style Sheet, but replaces conflicting rules (concerning colour) with the inline style.

<h2 style="color: #303;">Example header</h2>

Thus a purple text colour is applied as follows:

Example header

Where a change is needed a number of times, an embedded style rule can be added, or a second external Style Sheet can be included.

Thus, adding the following in the head of the document maintains the external style information with the exception of the conflicting style rules (background colour and alignment):

<style type="text/css">

h2 {

background-color: #ff0;
text-align: left;

}

</style>

and all <h2></h2> headers on the page will appear with a left alignment and a bright yellow background, as follows:

Example header

The effect would be the same if this information were added to a second external Style Sheet with a link placed after the first in the head of the document. The information in the second will work together with that in the first, overriding any rules that refer to the same properties, but preserving any other rules.

The browser will apply any inline styles, before applying embedded styles and finally applying external styles. Where there is style information from different sources that conflicts with each other, this is the order of precedence. Inline styles will overrule embedded styles which will overrule external styles. Styles from any source that do not conflict will be preserved.

Thus if the following inline style is added to a heading on a page with the style information above :

<h2 style="color: #303; text-align: right;">Example header</h2>

the following heading results:

Example header

The information from the three sources 'cascades' as follows:

See description below
The combination of styles working together in a 'cascade'
Description

Image showing the following style information:
Inline style - <h2 style="color: #303; text-align: right;"> Example header</h2>
Embedded Style Sheet -h2 { background-color: #ff0; text-align: left; } ( text-align: left; is overridden by the information in the inline style)
External Style Sheet - h2 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 140%; color: #006; background-color: #ff9; font-weight: bold; text-align: center;} ( text-align: center;and color: #006; are overridden by the information in the inline style; background-color: #ff9; is overridden by the information in the embedded Style Sheet.
The final style is a combination from the three sources - color: #303; text-align: right; background-color: #ff0; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 140%; font-weight: bold;

 

Close heading CLOSE

Open/close headingInheritance

HTML documents can be thought of as having a family tree structure where different elements are the parent or child of other elements. Thus for example, the <body> element is the parent of all other tags, and the list item tags (<li></li>) are the children of the list tags (<ol></ol> or <ul></ul>).

Most of the styles that are applied to the parent element will be inherited by the child element. This means that if a particular rule has been applied to the parent, it is not necessary to apply it again to the child element.

e.g.

In the following Style Sheet, the font-family information can be placed in the body selector, removing the need to repeat it in the other tags. The inheritance of the colour and font-family information is overridden in the 'h1' and '.red' selectors by specifying an alternative colour and family.

<style type="text/css">

body {

color: #003;
background-color: #ff9;

}

p {

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 90%;

}

h1 {

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 120%;
color: #006;
font-weight: bold;

}

.red {

font-family: Georgia, Times New Roman, Times, serif;
font-size: 90%;
color: #f00;

}

Thus, the following Style Sheet produces exactly the same results.

<style type="text/css">

body {

color: #003;
background-color: #ff9;
font-family: Verdana, Arial, Helvetica, sans-serif;

}

p {

font-size: 90%;

}

h1 {

font-size: 120%;
color: #006;
font-weight: bold;

}

.red {

font-family: Georgia, Times New Roman, Times, serif;
font-size: 90%;
color: #f00;

}

Careful use of inheritance can provide a means of making CSS information smaller and more efficient.

 

Close heading CLOSE

Open/close headingResources for further development

Once you have an understanding CSS, one of the most important resources for use when working with Style Sheets is a reference to the properties and possible values that can be applied to different elements of an HTML page. A clear example is provided at [External Link - opens in a new window]http://www.w3schools.com/ css/css_reference.asp, which offers further information on the use of different properties.

W3schools also provides tutorials, examples and quizzes at [External Link - opens in a new window]http://www.w3schools.com /css/default.asp

The Worldwide Web Consortium (W3C)'s CSS page at [External Link - opens in a new window]http://www.w3.org/Style/CSS/ offers a wealth of information, and provides an opportunity to validate your CSS at [External Link - opens in a new window]http://jigsaw.w3.org/ css-validator/. This makes it possible to check that your CSS meets web standards and guidelines by entering a link to your CSS file, uploading your file from your computer, or pasting your CSS into a text box on the page.

A useful article by John Gallant and Holly Bergevin on using CSS 'short hand' properties to reduce the size of CSS files and increase efficiency is also available at [External Link - opens in a new window]http://www.communitymx.com/ content/article.cfm?cid=90F55

 

Close heading CLOSE

Open/close headingLearning activity: Review

Part 1

[?] Check your understanding of CSS punctuation by completing the following Style Sheet. The missing punctuation is given at the top of the page and you should drag this to the correct positions. Press 'check answers' at the bottom of the page for feedback.

Open/close headingText-only alternative

[?]Check your understanding of CSS punctuation by completing the following Style Sheet. The missing punctuation is given below, and you should use this to complete the gaps in the Style Sheet. Select 'Answers' at the bottom of this section for feedback.

Missing punctuation:

, | . | : | ; | # | < | = | } | { | >

HTML Document:

style type "text/css"
p bluesans
font-family Helvetica sans-serif
color: 006;

</style>

Open/close headingAnswers

<style type="text/css">
p.bluesans {
font-family: Helvetica, sans-serif;
color: #006;
}
</style>

 

Close heading CLOSE

 

Close heading CLOSE

Part 2

[?] Check your understanding of CSS 'cascades' and classes by answering the following questions.

Open/close headingText-only alternative

[?]Check your understanding of CSS 'cascades' and classes by answering the following questions.

1. Look at the following style information and decide which of the following options (a, b, c, or d) would be the final style applied.

Inline style:

<h2 style="color: #303;
font-weight: normal;">
Example header</h2>

Embedded Style Sheet:

h2 {
background-color: #ff0;
text-align: left;
font-weight: bold;
}

External Style Sheet:

h2 {
font-size: 140%;
color: #006;
background-color: #ff9;
font-weight: normal;
text-align: right;
}

a.

color: #303;
text-align: right;
background-color: #ff0;
font-size: 140%;
font-weight: bold;

b.

color: #006;
text-align: right;
background-color: #ff9;
font-size: 140%;
font-weight: normal;

c.

color: #303;
text-align: left;
background-color: #ff0;
font-size: 140%;
font-weight: normal;

d.

color: #303;
text-align: left;
background-color: #ff0;
font-size: 140%;
font-weight: bold;

2. Look at the following style information and HTML, and decide which of the following options (1, 2, 3, or 4) would be the final style applied.

Style Sheet

body {
font-family: Arial,
Helvetica, sans-serif;
color: #003;
text-align: left;
}
.bold {
font-weight: bold;
}
.italic {
font-style: italic;
}

HTML

<div class="italic">
<p>Paragraph 1 is <span class="bold">here</span></p>
</div>
<p>This is <div class="bold">paragraph 2</div> which is the penultimate paragraph</p>
<p style="text-align:center;">This is the last</p>

a.

Paragraph 1 is

here

This is paragraph 2 which is the penultimate paragraph

This is the last

b.

Paragraph 1 is here

This is

paragraph 2

which is the penultimate paragraph

This is the last

c.

Paragraph 1 is here

This is

paragraph 2

which is the penultimate paragraph

This is the last

d.

Paragraph 1 is here

This is paragraph 2 which is the penultimate paragraph

This is the last

Open/close headingAnswers

1=c

2=b

 

Close heading CLOSE

 

Close heading CLOSE

 

Close heading CLOSE

  © 2004-2010  All rights reserved    |    Maintained by ReStore    |    About this website    |    Disclaimer    |    Copyright    |    Citation policy    |    Contact us