my learning experiences in building a better web page

CSS and making it look great

I finished off the last section with a new web page and a poem. I am sure Shelly would forgive my changes. And if he wouldn't, he is beyond caring right now.

Just to refresh, it looks like this.

<head>
<title>
Ode to the 44th President
</title>
</head>
<body>
I met a traveller from an antique land 
Who said: "Two vast and trunkless legs of stone 
Stand in the desert. Near them on the sand, 
Half sunk, a shattered visage lies, whose frown 
And wrinkled lip and sneer of cold command 
Tell that its sculptor well those passions read 
Which yet survive, stamped on these lifeless things, 
The hand that mocked them and the heart that fed. 
And on the pedestal these words appear: 
`My name is 0bamandias, King of Kings: 
Look on my works, ye mighty, and despair!' 
Nothing beside remains. Round the decay 
Of that colossal wreck, boundless and bare, 
The lone and level sands stretch far away. 
</body>
</html>

The web page is very basic. We could use the various HTML formating tags to make it look better, but they require way to much effort for very little positive result. Instead, there is something called Cascading Style Sheets. or CSS

The metaphor behind is sort of like a city water system, with the highest level being the reservoir at the top of the hill with your basic H20, then the city chlorinating plant, where floride and chloride are added in, then to the house where it cycles to the water heater or to the sink or the bathtub where other things happen to it. It cascades from one level to the next, and things change it at that level which affect it for all levels further downstream

Each HTML tag can be modified in by the CSS commands. Since Tags can be nested, one inside the other like Matroshka dolls, the inner tags inherit the characteristics of the tags above. if you define a style in the <BODY> style, then the  will also use the same style. If the style makes a change to a definition from the <body> style, those changes only affect the style.

Since styles cascade, each element has its own style, which you can change. In addition, you can define your own styles for sections of your web page using the <DIV> tags. You can define your own style class which you can use to format your page to your needs. For this page, I have created ltext, rtext, resources, sidebar and discussion classes. Each class helps me place my text in a way I feel is most useful to the reader.

It is time to have some fun with this, but first a couple things we need to add. First, if you are going to use CSS styles, the "DOCTYPE" declaration is required. Second, while it is possible to define styles inline, I think it makes for very confusing code. For clarity, I am only going to use styles defined in the head section. So now, lets look at the poem with Style®

Copy the following text into your text editor and save it to either your web space or to your desktop. The first line, the DOCTYPE declaration has to be on one line, even though it shows up as three lines here. After you have checked it out, play around with the numbers in the styles declarations. The letters in the background color declarations are Hexidecimal numbers. You can see the valid color number codes here.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body
{
margin :15%;
background-color: #ffff66;
font-family :Helvetia;
font-size: 16pt;
first-letter :24pt;
}
.sand
{
background-color:#ccc;
padding:22px;
width: 460px;
}

</style>
<title>
Ode to the 43rd President
</title>
</head>
<body>
<div class="sand">
I met a traveller from an antique land 
Who said: "Two vast and trunkless legs of stone 
Stand in the desert. Near them on the sand, 
Half sunk, a shattered visage lies, whose frown 
And wrinkled lip and sneer of cold command 
Tell that its sculptor well those passions read 
Which yet survive, stamped on these lifeless things, 
The hand that mocked them and the heart that fed. 
And on the pedestal these words appear: 
`My name is 0bamandias, King of Kings: 
Look on my works, ye mighty, and despair!' 
Nothing beside remains. Round the decay 
Of that colossal wreck, boundless and bare, 
The lone and level sands stretch far away. 
</div>
</body>
</html>

It is beyond the scope of this demo here, but you can also add image (<IMG>) tags to your page to improve things even more. Images can be placed in an absolute position in the page, and they can be repeated within the page. I added a couple graphics to the page. You can check it out and see how CSS helped position the images. If you want to see the code behind it, you can go to the view window of most browsers and click on the "view source" or "page source" menu items.

CSS makes for quick formating of your web page. CSS files can even be loaded into the web page, like this one, so that the style is consistant all through the web site. If I want to change the background color of all the pages here, I don't have to make changes in each one, but in one place. Maintenance which might otherwise be a several hour chore becomes a 30 second fix.

I am already up to ten pages, and we are still looking at individual pieces. It is like we are looking at pipes, wires, nails, lumber, sheetrock, bags of cement, shingles and all the rest of the pieces, but we are no where near a house yet. We need to look at one more piece, then we can start talking about plans and how all the pieces come together.

Resources

CSS and making it look great