27. CSS Style Sheets

Directions: Cascading Stylesheets (CSS) allow a web designer to separate the content of a web page from the design elements such as layout, background colors, link colors, and font style.

  1. Using Notepad create a file called stylesheet.css and save it to the root directory of your portfolio.
  2. Past the code below in the document and select the background color and link colors for your portfolio.
  3. Select the head command below and past it on each of the index.html files in your portfolio. The <head> command goes after the <html> command and before the <body> command.
  4. Make sure you remove any link codes or background commands in any of your <body> commands on each of your web pages.



Example

--------------------------------------------------------
Code that goes on the stylesheet.css
--------------------------------------------------------

BODY {MARGIN: 20px 0px 20px 0px; BACKGROUND-COLOR: #000000; FONT-FAMILY:
Arial, sans-serif}
A {TEXT-DECORATION: none; COLOR: #666666}
A:hover {TEXT-DECORATION: underline; COLOR: #ff0000}
A:active {COLOR: #ff0000}

TABLE {BACKGROUND-COLOR: #ffffff; FONT-FAMILY: Arial, sans-serif}

--------------------------------------------------------
Code that goes on the index.html portfolio homepage
--------------------------------------------------------

<head>
<title>Your Name</title>
<link href="stylesheet.css" type="text/css" rel="stylesheet">
</head>

--------------------------------------------------------
Code that goes on the index.html linked pages in the writing, reading, typing etc. folder.
--------------------------------------------------------

<head>
<title>Your Name</title>
<link href="../stylesheet.css" type="text/css" rel="stylesheet">
</head>

--------------------------------------------------------
Extra command.
--------------------------------------------------------

Adding the COLOR attribute to BODY will change the color of the text on the website.

BODY {MARGIN: 20px 0px 20px 0px; BACKGROUND-COLOR: #000000; FONT-FAMILY:
Arial, sans-serif; COLOR: #FF0000}