<< .. Go to : : Syllabus : : Schedule : : Exercise 3 : : Demo 3A : : Demo 3B : : Demo 3C : : Demo 3D : : All Class Demos .. >>

Exercise 3 Demo: Part D : External CSS

CSS Cascading Style Sheets : Concepts

There are three ways to implement styles:

  • External Style Sheet : This is a separate document where all the style rules are stored. This style sheet can be linked to any number of HTML documents. Any of the style rules on the external sheet can be applied anywhere within the documents linked to the style sheet. There is NO HTML in a CSS style sheet.
  • Internal Level Styles : This means the style is written as a 'style rule' and placed between the <head> </head> tags. It can be applied anywhere within that document.
  • Inline: This means the style is placed directly inside an html element and only affects the content contained within the opening and closing tags. This is done using the 'style' attribute within an opening tag.

This hierarchy is important. An external style sheet can be applied to any document. However, any document level style that is applied will overrule the external style. Any inline style which is applied will overrule both the document level and the external styles. This is where the name "cascading" style sheets came from. Refer to the lecture for more details.


CSS Cascading Style Sheets : External Style Sheets

This is the code you'll need to link an external sheet to your HTML page:

<!DOCTYPE html>

<html>
<head>
<title> External Styles </title>

<link rel="stylesheet" type="text/css" href="style_sheet_name.css">

</head>


External Style Sheets : The Code

CSS declaration

Just to review what we learned earlier: CSS Styles are formatted slightly differently than HTML tags.They use:

  • colon - between the property and the value
  • semi colon - at the end of each declaration
  • curly braces - to open and close each declaration block

Write them the same way in the External Style Sheet as you did in the Internal/Document Styles.

Writing a style sheet is no big deal. You can use NotePad or TextEdit, just like writing your HTML pages. There are no special headers or any special things to do. Simply write your style rules and you can use the comments to remind yourself what they are for. It is exactly like writing them for the document level styles. Follow the same format and use the same syntax. The only difference is that this page is a stand-alone page, and there is...

NO HTML markup on these pages ... only CSS!

Remember this - it is very important. Do not use the extension .html when you save the page - it has an extension of .css


I used comments to remind myself what each style was about.


 
  /* sample style rules in a style sheet */ 
  
  /* Define some overall body styles */
  
  body {background-color: #78DBF0;
        font-family: helvetica, arial, sans-serif;
        }

  /* Define the paragraph styles */ 


  p {font-size: 12px;
     
     font-weight: bold;
     text-align: center;
     color: green; 
     }


  /* Define the headline one or h1 styles */ 


  h1 {font-family: Comic Sans MS, helvetica, arial;
     color: blue;
     }  

     

Be sure to name the sheet with a name that indicates how the sheet might be used. For example, I named mine "samplestyles.css".

See the links below for sample style sheets and HTML documents where those sheets are linked.

Check out an example of what a Style Sheet looks like.

See the effects of that sheet on an HTML Document.

Check out what the style sheet that is linked to my demo pages looks like.

To go back to Part C of Demo 3.

Go back to the Exercise 3 page.

© Claudia Faulk. Updated 9.17