Cascading Style Sheets (CSS)

Style Sheets, also called Cascading Style Sheets, are becoming more common on the World Wide Web. A good place to learn is W3Schools.com.

Here is a quote about style sheets:

CSS Saves a Lot of Work! CSS defines HOW HTML elements are to be displayed. Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in a Web site, just by editing one single file!

For small page like this one, you may place your styles inside the HEAD of your HTML file. However, the external css file is usually preferable if you have an extensive site with multiple pages that you want to all have the same basic format.

Syntax

The CSS syntax is made up of three parts: a selector, a property and a value:

selector {property:value}

The selector is normally the HTML element/tag you wish to define, the property is the attribute you wish to change, and each property can take a value. The property and value are separated by a colon, and surrounded by curly braces:

body {color:black}

Note: If the value is multiple words, put quotes around the value:

p {font-family:"sans serif"}

Note: If you want to specify more than one property, you must separate each property with a semicolon. The example below shows how to define a center aligned paragraph, with a red text color:

p {text-align:center;color:red}

The class Selector

With the class selector you can define different styles for the same type of HTML element.

Say that you would like to have two types of paragraphs in your document: one right-aligned paragraph, and one center-aligned paragraph. Here is how you can do it with styles:

p.right {text-align:right}
p.center {text-align:center}

You have to use the class attribute in your HTML document:

<p class="right">This paragraph will be right-aligned.</p>
<p class="center">This paragraph will be center-aligned.</p>

Example

(Use "View Source" to see the style sheet specifications in this page.)

Here is a link to the class Web page.

Exercise

  1. Open this page in your browser: http://wboardman.com/basic-css.html.
  2. Save the page to your desktop as a type Web Page, HTML only.
  3. In one window, open the page in your browser (File > Open).
  4. Start the Notepad text editor and open the same file so that you can view the HTML and make changes.
  5. Swtch back and forth between the views to see how the CSS works.
  6. Finally, change some of the definitions for the tags and see how it looks.