You Are Going to Create the Following Web Page

ACTIVITY:

YOUR FIRST CSS PAGE LAYOUT TUTORIAL – CREATING A STANDARDS-COMPLIANT TWO-COLUMN LAYOUT WEB PAGE

Introduction

You are going to create the following web page:

This page has been written with semantically correct XHTML 1.0 Strict markup with the intention that it will work in browsers now and in the future - as well as degrading gracefully in older browsers. Additionally, it uses a fixed width for the main content area - so the layout will work well both at 800 x 600 as well as 1024 x 768 monitor resolutions.

The following screenshot shows how the page will look at 800 x 600: See how it is only extra ‘whitespace’ (on the right) which is lost

This is one of the tried and tested ways of creating a robust CSS page layout which is guaranteed to work reliably in the most important browsers.

In this exercise we are going to build the core style sheet for the site you see above by hand coding. We are going to apply this style sheet to single valid XHTML 1.0 web page which can be used as a template for all the other pages at the site. Never again will you have to define the background colour, image, or the various link colours in an individual document. Every time you create a new page, you can simply link it to your style sheet. If you want to overhaul your site, just edit the style sheet, and your whole site's appearance can change.

During this exercise you will learn:

o  what a style sheet is and how it actually styles a web page

o  all about the HTML containment hierarchy and inheritance

o  how to create a style sheet and a valid XHTML 1.0 document and link this document to the style sheet

o  all about the basic building blocks of any style sheet: rules, selectors, properties and values

o  the most important CSS selectors

§  type

§  class

§  link (pseudo selectors)

§  id

§  descendent

§  group

o  all the properties for controlling the basic appearance of text

§  color - for text colour

§  font-family - for the actual font used to display your text

§  font-size

§  text-align - for text justification

§  font-style - for italicization

§  letter-spacing

§  text-decoration - for underlining and striking through text

§  line-height - equivalent to leading from the old typesetting days, to control the spacing between lines of text

§  font-weight - to control the boldness of text

o  how to customize the appearance of links

o  the basics of static and absolute positioning and how to use the two together to create a fixed width page layout using all the following properties

§  position: static

§  position: absolute

§  position: relative

§  margin

§  border

§  top

§  left

§  width

§  height

§  padding

o  the background properties

§  background-color

§  background-image

§  background-repeat

§  background-position

o  all the techniques you need to turn a list of links into a semantically correct navbar

One thing to be aware of is that everything here is done using the web standards CSS and XHTML. The content of the web you will style is marked up with structural XHTML 1.0 elements. Top level headings are within <h1</h1 elements, paragraphs are within <p</p>, and so on. You will not find things like the ‘font tag’.

A Short Introduction to Style Sheets

A style sheet is a set of instructions each of which tells a browser how to draw a particular element on a page. It is very important to grasp this idea of HTML elements when you are working with CSS. Well-formed HTML documents are a collection of elements arranged in a kind of containment hierarchy.

Imagine for a moment that the document we want to style is as simple as the one in the figure above, you can use a style sheet to specify the different elements, and then say what styles should be applied to them. Once you see the document as a hierarchy like this a very important aspect of CSS - called inheritance - becomes much easier to understand. If you apply style to an element which contains other elements then this will be inherited by the elements inside. You might think of them as parent elements and child elements. This parent/child metaphor is in fact a standard way of describing this relationship and you will see it often. Child elements are contained by parent elements and inherit all their properties. So taking the example above, if you apply style to the parent, <div>, the child, <p>, will also get this style.

We refer to the instructions in a style sheet as statements. There are a few different types of statement, but the one you will use most is referred to as a rule. Rules have two parts: a selector and a declaration.

The selector tells a browser which elements in a page will be affected by the rule. There are a number of different types of selector.

The declaration tells the browser which set of properties to apply. There are many different properties.

All these statements are contained in a cascading style sheet. This is nothing more than a text file, with the suffix .css added to the name - something like core-style.css.

Rules have a very simple form: the selector, followed by the set of properties, which are surrounded by curly braces - that is { and }.

p {font-size: 1em}

selects any <p> element, or paragraph, and makes its font 1em.

So how does a browser know that there is a style sheet when it loads a page? Either there is a link to the style sheet in the page, or the style sheet is embedded in the <head> of the HTML document.

What browser should you use?

Everything you do in this tutorial works in the latest versions of Internet Explorer (and as far back as IE 5), Safari, Firefox and Opera. You will need one of these so you can see what you are doing at every step.

The tried and tested way of developing and testing a standards based web site is to write standards based code, keep it valid, and watch your site develop in a browser which supports the standards as closely as possible. The recommendation for this would be the latest version of Firefox on Windows (and Safari on the Mac). In addition, test as you go in Internet Explorer and try to overcome any problems while keeping your code valid. You should forget the idea that you are trying to create a page that looks the same in all browsing environments. Focus instead on creating a page that looks good in all browsers you care to target - and supports the standards so it will continue to look good in the future.

This will probably seem like a bit of a radical idea at first if you are used to the old way of developing web pages which was to ‘make it work in Internet Explorer’. Working the other way round is preferable when you are designing to meet web standards. You will not find yourself writing a whole lot of ‘hacked up’ code to make the page look right in Internet Explorer and then having to redo it all because not only is it not valid – but also it doesn't actually work as you were expecting in other browsers which support the standard more robustly.

Creating the root folder and index.html page

Locate the folder FirstCSSPageLayoutTutorial and copy this to your working area. This will serve as the root folder for your site and contained an index.html file and an images folder that contains the image files that you require for this site.

If you are working within Dreamweaver you will need to define a new site pointing to this folder.

Open the index.html in Code View in and note the Document Type Declaration at the top of the page. This document has been written to validate against the Strict XHTML 1.0 DTD standard.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Note: The code for the unordered list which makes up the navbar (<divid="navbar">) has no extra white space in it between the HTML elements. Obviously this is not the ideal, because it is much easier to edit later on if there are carriage returns so that each of the <li>s are on a separate line. However, if you insert any white space in this way you may find that this results in extra spacing between the items in the navbar when the page is viewed in Internet Explorer. Extra white space in the code should have no effect at all on how a page is rendered – but this can be another IE problem. There is, however, a CSS based fix to this problem,

Create a new style sheet document – saved as core-style.css.

We will add a comment that explains what this style sheet is for. A comment is another type of style sheet statement and takes the form:

/*Here is the actual text of the comment*/

/*This is the core style sheet of the site.*/

Linking your HTML document to your style sheet

There are two ways of making a style sheet actually affect the appearance of an HTML document. You can embed the style sheet in the <head> of the HTML document, or you can link to the style sheet from the <head> of the HTML document. We are going to use the second method here because it is the way to truly harness the efficiency of CSS. You can link as many pages to a single style sheet as you want. Making changes to this single document can then change the appearance of all the web pages linked to it.

To link to a style sheet we place a <link> element with a couple of special attributes in the <head> of the HTML document. It will look something like this.

<link rel="stylesheet" type="text/css" href="core-style.css" /

Let us look at each attribute.

rel="stylesheet" - This says that it is a forward link, and tells the browser what to expect at the other end, namely a style sheet.

type="text/css" - Theoretically, style sheets might be written using any number of languages. The style sheets we are talking about here are Cascading Style Sheets (CSS). Extensible Style Language (XSL) is another that will likely become important. This attribute tells the browser what format it is going to receive the style sheet in.

href="core-style.css" - This tells the browser where to locate the style sheet. The destination is specified in the same way as regular hypertext link destinations (a href="link destination"), with either a relative or absolute URL.

Link index.html to core-style.css by entering the line of code above into the <head> of the document.

Basic Page Appearance

A style sheet is a set of rules, each of which specify the elements to be affected by the rule (the selector), and how these affected elements should appear (the properties).

In this case we want to give a background colour to the whole page, so we want to affect the <body> element. To do this we will create a statement with a selector for the body.

x { }

where x is the selector and { } contains the declaration of properties.

This style of selector is referred to in CSS as a Type selector. Type selectors select every instance of the specified type of HTML element. For example, the selector for all p> elements is simply p.

The syntax for the body selector:

body { }

All CSS properties take a similar form: the property name followed by a colon, a space and then the value (if necessary, with its unit - although there must be no space before the unit!). The things to look out for are:

o  Make sure you get the property name exactly right: it's got to be color - not colour.

o  All CSS properties can only take a specified range of values. You should get accustomed to consulting the specification

o  Make sure the punctuation is correct.

As an example, if we wanted to make all <blockquote> elements have a red background, hexadecimal value f00 we would use the following:

blockquote {

background-color: #f00

}

Colour can be expressed in a number of different ways in CSS, but the most widely used are keywords and hexadecimal RGB. In this exercise we will use full hexadecimal RGB values. The most important thing is not to forget that # that must come before it.

To set the background colour of the page to this colour: 95b7cd, create the following style rule:

body {

background-color: #95b7cd}

Previewing

First, make sure you have saved the changes to the style sheet. Now remembering that the HTML document you created before is already linked to this style sheet, all you have to do is find index.html and open it in a web browser.

Text properties

The CSS property for text colour is called, simply enough, color. As you might guess, it takes the same types of value as background-color.

Adding an extra property to the same statement is simple, you just add it in after the previous one, but don't forget that semi-colon between properties. Also, your style sheet will be easier to read if you put each property on a new line.

To make all the text on the page a dark gunmetal gray colour. Use the value 666666.

body {

background-color: #95b7cd;

color: #666666;

}

White space is largely irrelevant in CSS (the exceptions being the rules about spaces referred to above), so use it to set up your style sheet for optimum readability.

font-family

The font-family property specifies a list of one or more fonts using the family name of each. The font names are separated by commas. A browser then uses the first font in the list that is installed on its system. You do not know what fonts will be installed on the millions of computers which will be used to view your page. This is why you create a list of acceptable fonts, and then at the end of that list you should always put one of five generic font names: