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

Copy your "drafts" folder from your remote "425" folder to the local desktop.
Open your "biopage.htm" file on the local desktop and save it as "biopage2.htm".
Important: Remove all the font and center tags and any align instructions inside the other tages from "biopage2.htm".
Make a new file in Notepad and save it as "biopage.css" inside your local "drafts" folder (i.e., the copy on your local desktop).
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.
Open your "biopage2.htm" in Mozilla/Firefox (shortcut: Ctrl + O) so you can see the page in your browser window.
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.
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 and Background Color

The first thing we're going to do is use CSS to add a border and background color to your "wrapper" div so that we can see its dimensions clearly against the body of your page.

Add the following CSS code to "biopage.css":
div.wrapper {
border: solid red 2px;
background-color: #ccff99;
}

This CSS instructions should produce a solid 2px red border around all four sides of your "wrapper" div and a light green background.
Refresh the view of your bio page in Mozilla and make sure the red border is there.

Centering

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

First, check again that all the <center> tags are gone from "biopage2.htm". Refresh the view in Mozilla to check that nothing is centering. If anything is centering, repeat until nothing is centering.
Now add the following CSS code at the top of "biopage.css":
body {
text-align: center;
}

This CSS instruction should affect every element between the two <body> tags in "biopage2.htm".
Refresh the view of your bio page in Mozilla. There now should be a lot of centering taking place.
Use CSS to set 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;
    background-color: #ccff99;
    width: 700px;
}
Refresh the view of your bio page in Mozilla. Your wrapper should be less wide. Also: Your cotent should center inside your "wrapper" div, but your "wrapper" div itself does not center on the page.
To fix that, set the "wrapper" div's left and right margins to "auto" by adding the following new code to the wrapper.div instructions in your "biopage.css" file:
div.wrapper {
    border: solid red 2px;
    background-color: #ccff99;
    width: 700px;
    margin-left: auto;
    margin-right: auto;
}
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.
Finally, return left alignment to your content 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;
    background-color: #ccff99;
    width: 700px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}
Refresh the view of your bio page in Mozilla and check that your content is aligning left again.

Font Family and Font Size

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 a size value of 1em (there should be no space between the numeral "1" and the unit value "em").
Add the following font styling instructions to the wrapper.div instructions in your biopage.css file:

div.wrapper {
    border: solid red 2px;
    background-color: #ccff99;
    width: 700px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    font-family: Verdana, Helvetica, sans-serif;
    font-size: 1em;
    color: #a1a1a1;
}
Refresh the view of your bio page in Mozilla and check that your content is aligning left again. Try increasing and/or decreasing the font-size value (e.g., .5em, 2em, 4em, etc.) to see what happens.
You can 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.

First, look at this interactive CSS border demo to get a sense of the variety of border styling possible with CSS.
Read about setting setting borders at W3 Schools.
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).

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

return to schedule

~Jonathan Bass