Internal CSS

It is possible to create a CSS within an html document instead of having a separate file for your stylings. While there is nothing wrong with doing this it does negate two of the three advantages to using css.

Firstly by using it internally it doesn't reduce the file size and therefore there is no increase in loading speed.

Secondly if you want to make site wide changes you will still need to change the individual internal css on every page. This may not be as time consuming as changing each individual styling but it is certainly not as fast as changing only a single line.

Valid XHTML 1.0 Transitional

Cascading Style Sheets (C S S)

Cascading Style Sheets are separate files that hold the information about how a page will look. During this program we create a separate css and use it to style many of the basic elements of a standard Web page and by its conclusion you should have a good working understanding of the capabilities of a css. All steps will include working examples for easy reference.

These sections are outlined below.

  1. Introduction   Outlines the different sections (you're here now!)
  2. Saving   How to save a .css file and "call it" from an .html document.
  3. Syntax   Outlining the basic syntax of a css command
  4. Block   How to style single and multiple block level elements.
  5. Span   How to style basic in-line level elements using the <span> tag.
  6. Links   Adding styles to hyperlinks. Includes examples of how to create different colour and weight links and different hover colours.
  7. Images   Images add interest to your site. To maximize their impact style their placement and spacing as well as how the surrounding text interacts with them.
  8. Spacing   The spacing of elements on a page is important to its overall appearance and readability. Use margin and padding settings to put them where you want without having to use spacer images and &nbsp;'s.
  9. Lists   Learn how to style lists and turn them into useful navigation elements that can run across the page.

For convenience the page links can also be found in the navigation bar to the left.

Saving and Calling a CSS →