Software Technologies for the Web
 

Cascading Style Sheets (CSS)

Cascading style sheets are a method to add style to a web page.
They can be used to add colour, change the attributes of elements (like the font), or even affect the layout of a page. There are many things you can do with CSS, and many sites that will show you how to do them. The articles below are going to describe how to use CSS with your HTML, and show you a few examples.

They work by keeping the styling and layout of a page seperarte from the content. This lets you change the style of a site by editing only one file, not spending hours trawling through pages of source code making multiple edits. It is now considered as the standard method to use in web design, superceding the use of tables and frames (Squanderette 2006).

 

Applying CSS

Div V's Span

To use CSS in your web page/site you need to be able to define areas of your page. This is performed by using the <div> and <span> tags. Both of these tags allow you to assign either of the id or class attributes. By doing this you can define your own selectors of any style rules.

<DIV>

Div tags are a bit like bookends on a shelf, they define an area. This area is a logical division of your web page (Kyrnin 2008). They let you apply style(s) to a large section of the page, possibily effecting many elements as some of the rules will be inheritited.

<SPAN>

Span tags perform a simular job to div tags. the main difference is in the area they effect. Then span tag only effects the text within them. If no rules are applied to the span tag, it will have no impact on how the browser interprets the data. They are often use to format text within divs, for a one-off change to the set styling.

ID V's Class

When using div and span tags you have the choice of declaring the style rule as either an ID or class. Both of these allow you to create a style using an arbituary selector. The main difference between them is in the frequency of the called selector. Items declared as ID can only be called once per page, failure to do so will result in the second calling not having its styles applied.
They are prefixed in the CSS file with a # character.

/* delaring an ID in a CSS sheet */
#toRed { color: red; }

Classes can be applied many times in the same document. For this reason many find them more convient to use.
They are prefixed in the CSS file with a . character.

/* delaring an ID in a CSS sheet */
.toRed { color: yellow; }
Back to top
 

Including CSS

There are three ways in which you can include CSS into your web pages. These are covered below;

In-line

This is act of putting the style declaration in the HTML tag, in the line of code.
With this approach the selector element of the CSS in the tag in which it appears, with the added attribute of a style declarartion.

<!-- set heading colour to blue -->
<h1 style="color: blue">blue text</h1>

CSS will support the declaration of colours by name, or by hexidecimal code (this will support more colours).
N.B. Notice the american style of spelling the world color.
This method is not preferred as it contradicts the best-practice approach that the HTML should be a stand-alone, presentation free document (Griffiths 2007).

Embedded

Embedded CSS is a halfway house between in-line and linked methods. It involves placing all the styling in the <style> tag. When using this method the style tag is placed in the <head> tag of the page.

<html>
<head>
<title>Embedded Example</title>
<style type="text/css">
h1
{
color: blue;
}

p
{
color: red;
}
</style>
</head>
...

This example will turn all h1 headings blue, and all text in the paragrahps red.

As this method has the styling contained within the HTML source code, it again is considered inferior as it does not seperate the two.

Linked

Many regard this as the best method of using CSS. It complies with the best-pratice approach as the HTML source and the styles are independant. It has the advantage of a single set of styles being applied to multiply pages of HTML. By using this method a whole site may have its appearence changed by the editing of one single file.

It works by placing all the styles in a cascading style sheet file. This file is saved using the extension of .css

h1
{
color: blue;
}

p
{
color: red;
}

You then call the style sheet into the HTML source using a <link> tag in the <head> section. This example calls the above CSS (which has been saved as style.css).

<html>
<head>
<title>Linked Example</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
...
Back to top
 

CSS Examples

To get you started here are some things you can do with your first attempt of using CSS;

Capitalizing words

You can use CSS to manipulate text. One effect is to capitalize words.
This uses the text-transform property, which has four possible values;

  • capitalize
  • uppercase
  • lowercase
  • none

In the style sheet we will asign this rule to the selector class caps, and apply it to a <p> tag.

.caps
{
text-transform: capitalize;
}

So when you apply the class caps

<p class="caps">some text<p>

you get

some text

Different cursors

You can even use CSS to alter how the cursor reacts. For example when the cursor hovers over a hyperlink it changes from a arrow to a pointing hand. With CSS you can change this to one of several looks, we will use it to change the cursor to a crosshair when hovering over hyperlinks. As with the above example we will apply this to a selector class called xhair.

.xhair
{
cursor: crosshair;
}

We will apply this to the link;

<a href="#" class="xhair">Cursor change</a>

Example Cursor change here.

Changing hyperlinks

Altering hyperlinks is different to changing other elements. This is because they have four states, all of which can be individually affected. You can make some changes to all the states with one declaration, for example colour.

a {color: red;}

When changing individual states care must be taken in the declaration order. The order is;

  • a:link
  • a:visited
  • a:hover
  • a:active

A:hover must be declared after the A:link and A:visited rules. This is because of the cascading rules will overide the A:hover rule. A:active needs to be declared after A:hover, the active rule will be applied when the user both activates and hovers over the hyperlink (Quackit.com 2008).

The following example will both underline and overline a link when it is hovered over using the text-decoration property, and change the text to orange and uppercase when in the hover state;

.lines a:link, a:visited
{
text-decoration: none;
}

.lines a:hover, a:active
{
color: orange;
text-decoration: underline overline;
text-transform: uppercase;
}

We will apply this to the link;

<div class="lines">
<a href="#">text-decoration</a>
</div>

Example of text-decoration here.

Horizontal lists

With the best-approach pratice of coding and the seperating of content from style CSS has devolped the use of HTML tags. One example of this is how lists are used. Traditionally lists are vertical, but by using the CSS property display you can format a list to appear horizontally. This approach has been adopted to create navigation bars for many websites.

.horizontal li
{
display: inline;
}

This has the following effect;

  • one |
  • two |
  • three

When applied with rules on hyperlinks you can generate navigation bars that you used only to done by using Javascript. Look at listamatic for many examples of this.

Example:

Back to top

References

Back to top

In this page

Unit List

Source Code


   Views:193

Valid XHTML 1.0 Transitional roonspace.co.uk © 2008 . Valid CSS & XHTML. Valid CSS!