the web workshop

An external style sheet is an external text file with the extension .css.

Looks like:

/* CSS Document */

body {
margin: 0px;
padding: 0px;
background-color: #FFFFCC;
color: #000000;
}


h2 {
color:blue;
}

p {
font-family: Arial, Helvetica, sans-serif;
color:green;
}

Link to the external CSS

The external style sheet is linked to the HTML by the link element. The link tag is placed in the head element of the HTML. The link element is not a block element and does not require a closing tag. It does not contain any content.

The / within the tag acts as the closer.

The Syntax:

<element attribute=" value" attribute="value" />

Looks like:

<link href="styles.css" rel="stylesheet" />

link is the HTML element
href is the attribute of the HTML element
style.css is the name of the external css file
rel tells the browser what type of file it is

feetSteps to Success

  1. In Notepad, open a new file.
  2. Add the following code
    /* CSS Document */

    body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-color: #FFFFCC;
    color: #000000;
    }


    h2 {
    color:blue;
    }

    p {
    font-family: Arial, Helvetica, sans-serif;
    color:green;
    }

  3. Save as styles.css in the scripts folder inside the steps folder
    Remember to add .css as the extension of the file

  4. Open index.html
  5. Link to external style sheet in the head element using the following markup:
    <link href="styles.css" rel="stylesheet" type="text/css" />
  6. Add a h2 element inside the body element of index.html

    <h2>This is a h2 heading. It should be blue. It's presentation is controlled by the external css. </h2>
  7. Add a p element inside the body element

    <p>This is a green pargragh. It's presentation is controlled by the external css.</p>
    <p>This paragraph is also green.</p>
    <p>All paragraphs will be green except for the paragraph that is controlled by the inline style. It will be red.</p>
    <p>This is an example of the Cascade effect</p>
  8. Save and preview your web page in a browser.
    Read the content.

This workshop is brought to you by jdwwebdesign.com

Please feel free to contact us with any comments and/or concerns about this workshop