Home

27. Cascading 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. 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.
  5. View the example page.



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
--------------------------------------------------------

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