Working with style sheets

Modern web sites use html to layout a web page and css to style and format the content.

CSS stands for “cascading style sheets”. In most cases the CSS file is external to all the html pages and a style is linked to each page of the website.

CSS can be applied to web pages in two ways:

  1. External Style Sheets

External style sheets are independent files and can be used with multiple web pages. External style sheets have the advantage that changes made to them are effected throughout the web site. Since you can use them with multiple pages, you can easily keep a consistent style throughout your web pages. An external style sheet has to be linked from your webpage using a tag in the head section of the html.

  1. Inline Styles

Inline styles can be used directly in the element tag; no external pages or files are needed. To use inline styles, you would just need your web page and elements: a, img, div, span, etc. This is fine if that style applies only to that one page. Inline styles can be applied in addition to external style sheets but care needs to be taken to avoid a conflict between an external style sheet and an in line style.

Where the styles apply to all pages or most pages of the web site they should be created in an external style sheet - this file will have the suffix .css

External style sheets are simply text files. You can create them with a text editor such as notepad. Any file name can be given as long as the file ends in .css

Usually, the style sheet or sheets are stored in the root directory along with the home page (index.htm) and other main web pages.

The authoritative source for the rules relating to style sheets can be found at

W3 web site

Notes and jottings - not in any order

Whilst it is possible to express colours with names (e.g. “yellow”), this practice is not recommended. It is not supported by all browsers and their versions. It is better to express colours using their hex code.
Font sizes should not be expressed in pixels; the “ems” measure is recommended.

Page elements such as a table may be given an “id” name and styles applied to that “id”. This is done using the hash character.

Styles can be applied using the div tag and an “id”.

The application of style classes to tags should be minimised in preference to setting classes that can be used with tags.

More than one style sheet can be applied to any one web page. It is convenient to separate general styling from the styles created for navigation elements.

All pages in a web site need to be connected from the home page in links that spiders can follow. Hence, the home page should have plain text links to all other pages in the web site.

Your web site needs to be linked to other web sites that are indexed in google and which have content similar to your own.

Title tags should be written for each page and should use keywords to describe the content of each page.

Though not essential it is prudent to have a robot.txt file in the root of the web space, especially if spiders are not be told not to index certain pages.

Work on keywords to list words and phrases that people are most likely to type into search engines. Use online keywording resources to find out what people actually have typed into searche engines. These phrases must then appear in the body text of your home pages and other major pages of your web site.

Enter a meta tag description into the head tags of your web site code. You need not bother with meta tag keywords unless you are really keen on pleasing bots (roboting spiders - there no evidence that google reads meta tag keywords).

Leave a Reply

You must be logged in to post a comment.