New Page 1

Class 17 Notes

Cascading Style Sheets

CSS allows for consolidation of similar code - for example:

Can be used in the <style> element in the heading section of html code

Without style rules, the code would look like this:

<h1 align="center"><font color="red">the heading</font></h1>

With style rules it looks like this:

Can also be used as a separate file so that many html pages can reference one CSS

Create a new text file and save it with the file extension ".css" ie "bikesite.css"
Declare style rules in this file (no <style> element necessary)
Link to this style sheet file from within the heading of all the pages you wish to reference this CSS.

That's all there is to it - any changes made to the CSS will be reflected in all pages that reference it.

General Rules For Selecting

You may use multiple selectors:

h1, h2 {color: green}

Text inside either <h1> or <h2> elements will be green

You may select by content:

p i {color: blue}

Text inside an <i> element within a <p> element will be blue

You may create your own Classes

Create the class in the <style> element or in the external CSS

Use the "." as a flag character

Follow this with a class name that makes sense for its purpose

.quote {font-style: italic}

Reference the class in your html using the class attribute

<p class="quote">This is a quote</p>

The text will take on the characteristics defined in the class created in the CSS

Combine with block elements to control sections of content

Example 1:
In CSS:

    div.title {color: white; background-color: red}

In html file:

    <div class="title">This is the Title</div>

Example 2:
In CSS:

    span.quote {text-style: italics}

In html file:

    <span class="quote">This is the quote that is in line with other text</span>

Example 3:
In CSS:

    p.quotation {margin-left: 40 px; margin-right: 40 px; font-style: italic}

In html file:

    <p class="quotation"> This is text that will treated as a stand-alone quotation </p>