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.)

Exercise

  1. Open your 150m.com HTML File Manager in one window and open this page in a separate window or tab.
  2. Either create a new page to play with CSS options or use an existing page (you can always delete it later).
  3. Look at the code of this page by using View Source.
  4. Highlight and copy the text in the HEAD between and including the STYLE tags.
  5. Switch to your editing window and paste this STYLE text in the HEAD of your document.
  6. Make sure you have used the following tags in your page: P, H1, H2, H3, and OL, along with a hyperlink and a passage using the P style="quote" and/or P style="code" rules.
  7. Finally, change some of the values for the selectors and see how it looks.

Here is a link to the class Web page. Note how the link changes when hovering the mouse.