Change the Appearance of an HTML Page using a Style Sheet

The way this website is set up with a style sheet , you can make some interesting changes without touching the code of the web page.

Add or change some attributes in the style sheet and you can actually redesign the site.

What if you didn't like the light text on a dark background. Say you wanted black text on a white background or dark green text on a light green background.

Let's compromise and create dark green text on a white background.

Open the style sheet in NotePad.

We're going to change the look of the right column. We're going to place dark green text on a white background.
Here's the code:

#right {
color: #006600;
background-color: #ffffff }

Copy and paste the code into the style sheet. Save the style sheet.

Refresh the website pages in your browser.

What a difference. You may not like it, but what a change!

Wouldn't the white section of the page look better with a border?

Let's add one.

Open the style sheet and add this block of code:
#right {
border: outset #660000 2px }


Save the change to the style sheet and Refresh the pages in your browser.


Whoa!!! What's happened to your web page?

It seems the right division has fallen off the web page. Why?

Aligning Divisions

It's time to learn an important principle about aligning adjacent divisions.

Everything you add to a division in the way of margins, padding and borders adds to its size.

The width of our original right division was 600 pixels.

We added a 2 pixel wide border to each side which means that our right division now measures 604 pixels wide by 404 pixels high.

How do we fix it and keep the border?

We reduce the original size of the right division so that when we add the border it goes back to 600 wide by 400 high.

That means we must subtract 4 pixels from the original width and height.

find the settings in your style sheet that set the dimensions of the right division and change the width and height as shown below:
#right {
width: 596px;
height: 396px;
float: right;
background-color: #006600 }

Save the changes and refresh the page in your browser.


Adding a Background Image

Now let's say you're building a website for someone and he's a perfectionist and he says, "Could you put the same background that the strawberry is on behind the text? Would you have to redesign the whole site?"

Of course you say "Well that would be a major operation and I would have to charge you an extra days worK!"

Actually what you would do is grab your favorite graphics software and cut just a little chunk out of the strawberry picture. You'd save it in the images folder and change one line of text in the style sheet.

You name the image strawberry-back.gif
Find the block of code in the style sheet where you added the background color to the right column:
#right {
color: #006600;
background-color: #ffffff }

and change it to this:

#right {
color: #006600;
background-image : URL(images/strawberry-back.gif) }

Make the change, save the style sheet and Refresh the pages in your browser.

Once again the perfectionist walks in and says, "I don't like the fact that the body border looks different in the Mozilla browser. Can we have borders that look the same in IE and Mozilla."

Let's give it a try.

Examine the CSS code.

We already defined a border to the right division. We need to modify it.


Find this code in the style sheet .
#right {
border: outset #660000 2px }

Change it to:
#right {
border: solid #660000 2px }

Save the changes to the style sheet.

Refresh the web pages in your browser.

I don't know if we've improved the appearance of the website, but you should be seeing the power of using style sheets with HTML web pages.

Here's a little exercise that you can try.
1...Create a division for the footer and use the id attribute to name it footer.
2...Place the address tag in the footer division and remove the line breaks so that everything is on one line. You can separate the information with dashes if needed.
3...Add the style settings to size and center the division and add its background color.