Objectives:

  • Apply a Style Sheet to a web page

An Easier Approach to Starting CSS

  1. Start by reading this link to a nice, easy way to start using CSS:

    The Bare Bones, No Crap CSS Text Control Primer

  2. Create a brand new folder and name it CSS.

  3. Open up this starter file, view source and save the notepad file as start.htm inside the new folder you just made.

  4. Make a totally blank notepad file and save it in your new folder as firststyle.css.

  5. Note that when you open up the firststyle.css file, if you double-click on the file it will probably open up Microsoft's Front Page program. Instead of doing that, open the file by right-clicking on it and using open with... and select notepad. This will make it less confusing.

  6. Open up the file start.htmand view source.

  7. Copy this line:
    <link href="firststyle.css" rel="stylesheet" type="text/css">
    and paste it inside the head of your document so it looks like this:

  8. Open up your firststyle.css file by right-clicking on it and using open with Notepad.

  9. Paste this code into the file:

    body {
    margin: 200px;
    }



  10. Save the firststyle.css file and close it.

  11. Open up the start.htm file or refresh it. It should now display a 200 pixel margin. If it hasn't changed, find out why before you go on.

  12. Next let's add a style to adjust how the H1 header tag looks. Open up your firststyle.css file (remember to use Open with...) and paste this code underneath the code you already have there:

    H1{
    font-size: 60;
    }

  13. Next, open up your start.htm file and put place H1 tags around any word in your text. After you make this change, refresh your document and observe what you have done.

Assignment

Now that you have the general idea, and assuming you have actually read the article mentioned above, you are ready to do the assignment.Open up your style sheet and continue working on it adding styles for the following:

  • H2, H3 tags

  • The P tag

  • Make a rollover menu

  • Make up five independent styles of your own (see the section on independent styles in the above article).

  • Call me over for a check off when you are done.

    << Back to Skyline