CSS - Cascading Style Sheets

Cascading Style Sheets (CSS) allow you to separate the content of your website from your site's design.  They also allow you to have different style sheets or designs based on how your site is being viewed.  For example, you can have different style sheets for when you site is viewed in a regular browser vs when it is viewed in a hand held devise.  You can also specifiy a different style sheet to use when a web page is printed.  

  • Edit your index.html file again and add alink to style sheet within the header area of the file:
      <link rel="stylesheet" href="style.css">  
  • Save the file
  • Close the file: index.html 
  • Select:  New File
  • Name the file: style.css
  • Select: Create New File
  • Right click on the icon next to style.css and select: Edit
  • Copy and paste:
    body {
  •      font-family: sans-serif;
    h1 { 
         color: green; 
         font-size: 40px;
  • Select save and reload in browser

Different types of CSS files:

AllSuitable/intended for all devises (default)
ScreenIntended for computer screens
PrintIntended for printed documents
HandheldIntended for handheld devices