Schedule
Assignments
Students
Tue forum
Wed forum
Syllabus
Policies
Useful stuff

CSS Exercise 1

 

In this exercise you'll use CSS to add some basic styling to your personal bio page.

Note: For this exercise, and in general, you'll be using an external style sheet.

 

Setting Up

  1. Copy your "drafts" folder from your remote "425" folder to the local desktop.
  2. Open your "biopage.htm" file on the local desktop and save it as "biopage2.htm".
  3. Open a new file in Notepad and save it as "biopage.css" inside your local "drafts" folder (i.e., the copy on your local desktop).
  4. In the head section of your "biopage2.htm" file, add the following code (between angular brackets):
    <link rel="stylesheet" type="text/css" href="biopage.css" />
    This will connect "biopage2.htm" to , "biopage.css", the external CSS file you've just created.
  5. Open your "biopage2.htm" in Mozilla/Firefox (shortcut: Ctrl + O) so you can see the page in your browser window.
  6. In your "biopage2.htm" file in Notepad add an opening <div> tag after your <body> tag and a closing </div> tag just before your closing </body> tag.
  7. Add a class selector to the opening <div> tag. Name the class selector "contents"; thus:
    <div class="wrapper">

    Note: To find out more about using class selectors, see the W3 Schools syntax page and scroll down to the "class selector" section.

 

Adding a Border

The first thing we're going to do is use CSS to add a border to your "wrapper" div so that we can see it clearly.

  1. Add the following CSS code to "biopage.css":
    div.wrapper {
        border: solid red 2px;
    }
    This CSS instruction should produce a solid 2px red border around all four sides of your "wrapper" div.
  2. Refresh the view of your bio page in Mozilla and make sure the border is there.

 

Centering

The next thing we're going to use CSS to do is to center the content on your bio page.

  1. First, take out all <center> tags from "biopage2.htm". Refresh the view in Mozilla to check that nothing is centering. If anything is centering, repeat until nothing is centering.
  2. Now add the following CSS code to "biopage.css":
    body {
        text-align: center;
    }
    This CSS instruction should affect everything between the two <body> tags in biopage2.htm.
  3. Refresh the view of your bio page in Mozilla. There now should be a lot of centering taking place.
  4. Use CSS to fix the width of your "wrapper" div. Specify the width value by adding the following new code to the wrapper.div instructions in your biopage.css file:
    div.wrapper {
        border: solid red 2px;
        width: 700px;
    }
  5. Refresh the view of your bio page in Mozilla. Your wrapper should be less wide. Also: Your should center inside your "wrapper" div, but your "wrapper" div itself does not center on the page.
  6. To fix that, set the "wrapper" div's left and right margins to "auto" adding the following new code to the wrapper.div instructions in your biopage.css file:
    div.wrapper {
        border: solid red 2px;
        width: 700px;
        margin-left: auto;
        margin-right: auto;
    }
  7. Refresh the view of your bio page in Mozilla. Your "wrapper" div should now center inside the body of your page, i.e., the browser window.
  8. Finally, return left alignment to your inside the "wrapper" div by adding the following text-align instruction to the wrapper.div instructions in your biopage.css file:
    div.wrapper {
        border: solid red 2px;
        width: 700px;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
    }
  9. Refresh the view of your bio page in Mozilla and check that your content is aligning left again.

 

Font Family and Font Size

  1. Use CSS to change the font family, size, and color inside your "wrapper" div to a sans-serif font, preferrably Verdana or Helvetica, and to size value of 12px.

    Add the following font styling instructions to the wrapper.div instructions in your biopage.css file:

    div.wrapper {
        border: solid red 2px;
        width: 700px;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
        font-family: Verdana, Helvetica, sans-serif;
        font-size: 12px;
        color: #A1A1A1;
    }
  2. Refresh the view of your bio page in Mozilla and check that your content is aligning left again.
  3. Review the list of common fonts for all versions of Windows and Mac equivalents.
  4. Learn more about setting fonts at W3 Schools.

 

Change the Border

Use CSS to change the color, thickness, and style of the wrapper div border.

  1. First, look at this interactive CSS border demo to get a sense of the variety of border styling possible with CSS.
  2. Read about setting setting borders at W3 Schools.
  3. Change the borders for your wrapper dive from "solid red 2px" to whatever values you like.

 

Margins and Padding

Finally, use CSS to add a determinate amount of space above and below your wrapper div (i.e., the top and bottom margins) and between the border of the div and its content (i.e., padding).

  1. Read about setting margins.
  2. Next read about setting padding.
  3. Set the top and bottom margins and padding for your wrapper div.
  4. As necessary, review the basic CSS syntax and technique.

 

Extra: Images

From the perspective of CSS, an image is just another kind of box on the web page. Consequently, much of what you've just done with your wrapper div can be done with an image: e.g., you can control its margins and border or its position on the page.

Before finishing apply some CSS styling to the images on your bio page.

 

Saving

When you're finished, move "biopage2.htm" and "biopage.css" into your "drafts" folder on Eden.


back to top

 

return to schedule