Cascading Style Sheets (CSS)

Remember earlier in this course we stated that HTML is a markup language, not a layout or formatting language. But, to make web pages more interesting and pleasing, we need to format content with power similar to the print world.

You'll notice in this document, for example, that the headings are red, and the text is a dark blue; and the background is a "line paper" image. These characteristics are all defined in an external Cascading Style Sheet (CSS).

A CSS file can define the formatting for every HTML element. And the truly great benefit of an external CSS file? You can include all of these formatting definitions in a single file and link it to every page in a web site. Then, if you need to make a style modification, you make it in one place and it automatically gets applied to every page that links to that CSS file.

A CSS file (which, by the way, is just a text file) defines the characteristics for as few or as many HTML elements as you want to define. We've created a simple CSS file for our Declaration of Independence example, as follows (the file is named DECLARATION.CSS):

body { font-family: "Book Antiqua", "Century Gothic", Courier; font-size: medium; font-style: oblique; color: #663300; background-image: url(../IMAGES/parchment.gif)}
   
p { font-family: "Times New Roman", Times, serif; font-style: oblique; color: #663300}
   
h1 { font-family: "Book Antiqua", "Century Gothic", Courier; font-size: xx-large; font-weight: bold; color: #663300; text-align: center}
   
h2 { font-family: "Book Antiqua", "Century Gothic", Courier; font-size: large; color: #663300; text-align: center}
   
li { font-family: "Times New Roman", Times, serif; font-variant: small-caps; color: #663300}

Reading through the CSS file, you can see there are definitions for the <BODY>, <P>, <H1>, <H2>, and <LI> elements, with font and alignment definitions, as well as a background image for the file.

 

 

 

Copyright © 2001 Michael J. Doyle
All Rights Reserved.

Designed & Developed by Mike Doyle
using Macromedia Dreamweaver & CourseBuilder

See Mike's Training Schedule for
HTML, Dreamweaver, & CourseBuilder Courses


Email Mike Doyle