Templates Lesson

CSS Box Properties - Templates Lesson

The next group of CSS standards involves the box properties

The CSS model assumes that every HTML element on a Web page is contained within a rectangular box. At the center of the box is the element itself, for example a text block or an image, next comes the padding, then the border, and finally the margin.

Box properties allows us to control the size of the padding, border, and margin. They also allow us to control the color of the border.

Box properties

padding left
padding right
padding top
padding-bottom
margin left
margin-right
margin-top
margin-bottom
border-color
border-width
border-style
clear
float
height
width

Is that a huge list or what? I will demonstrate the padding and margin properties.

padding properties

I would like to add some space between the picture of the fish and the text at the right. The "padding-right" property should produce this effect.

In the "mystyles.css" file I enter the IMG selector and assign the property padding-right and a value of one inch. That's probably more space than I need, but when experimenting with new properties I like to thing big.

IMG {padding-right:1.0in;}

As I view the file I get an unexpected surprise, the navigational buttons above the huma huma picture have had padding added to them so they no longer fit onto one line.

CSS can be a pain. Fortunately as I view the code on the huma page I see that there is a <P> tag which proceeds the <IMG> tag. There is no <P> preceding the images I use for the site navigation.

I can create a contextual selector which would cause padding to be added to the huma huma image, but not the navigational images.

P IMG {padding-right:1.0in;}

Now the browser will only apply this style to an image tag which is preceded by a <P> tag.

As I view the page I see quite a bit of improvement. The navigational graphics have returned to their normal state. The picture of the huma huma now has an area of padding along the right hand edge, which separates the text from the image.

Wonderful, or is it? Well once again I am in Internet Explorer not in Netscape. As I view the file in Netscape I see that a problem have arisen. The padding doesn't seem to be working, and I have lost my huma huma text. Well if I look closely, the Huma text is behind my image. What's it doing there? It seems that Netscape interprets CSS code differently than IE, what a surprise.

I was not able to resolve this problem using Netscape 4.7 for the Macintosh, hopefully the newer version of Netscape will be better.

Lesson learned, when experimenting with Cascading Style Sheet code, always test the pages on several browsers using several operating systems.

margin properties

Before I demonstrate margins, I'd like to use the "background-image" property again. The most common use of background-image is when it is used in the body tag to insert an image into the background of the entire page. Let's do that I add the background-image property to the body selector and assign a value of url open parenthesis, "fish-back.gif", and close my parenthesis.

BODY{background-image:url(fish-back.gif); background-color:ffffff; font-family:Arial, Helvetica, sans-serif; font-size: 12px; }

As I view the page I see the code worked, I now have a background image displaying on the page. Of course all my images and text are displaying over the background image and it doesn't look good. In the old days I inserted a list tag or used a table to move over all the page elements. Now the margin properties make the job easy.

I apply the margin-left property to the body style and enter a value of 1 inch Let's see what happens.

BODY{ margin-left:1.0in; background-image:url(fish-back.gif); background-color:ffffff; font-family:Arial, Helvetica, sans-serif; font-size: 12px; }

All elements on my page have now shifted 1 inch from the left. There is no longer an overlap between the page elements and the sidebar graphic. That's the good news, unfortunately the margin causes my navigational buttons to wrap. As I experiment with new properties I expect my page layout to degrade.

I return to the mystyles file and remove the background image from the body tag, easy come easy go.

If I can move elements away from the edge, can I also move them CLOSER to the edge? You bet, by assigning a negative value, my page should be crammed up against the left hand margin.

BODY{ margin-left:-0.25in; background-color:ffffff; font-family:Arial, Helvetica, sans-serif; font-size: 12px; }

As I view the page, I see it has done just what I expected. I don't really like this effect for this page, but there are times when you need the page elements to display at the edge of the screen

Now left hand margins are good, but right hand margins could come in handy as well. Long lines of text can be difficult to read and track. By using the right-margin property I can assure an inch of white space along the right hand side of the screen.

BODY{ margin-right:1.0in; background-color:ffffff; font-family:Arial, Helvetica, sans-serif; font-size: 12px; }

There are many more properties included in the box property category, but I am quickly running out of time, energy, and brain cells

here is the "mystyles.css" file with box properties added, the new code is underlined for clarity.

BODY{ background-color:ffffff; background-image:url(fish-back.gif); margin-left:1.0in; font-family:Arial, Helvetica, sans-serif; font-size: 12px; }

P IMG {padding-right:0.25in;}

P {text-align:justify;}

LI { background-color:ffcccc; list-style-image:url(fish-list-tr.gif);}

H4 { font-style:italic; text-decoration:line-through;}

H4 B {color:993300; text-decoration:none; font-weight:bold; font-style:normal; font-size:150%;}

TD { background-image:url(aqua-blend.jpg); background-color:66ccff; font-family:Arial, Helvetica, sans-serif;}

H3 { background-repeat:no-repeat; padding-top:40px; background-image:url(fish-blend.jpg);}

Huma + box properties
background image, left margin 1 inch

no background image, right margin 1 inch

"mystyles.css" is the same as above with the exception of this selector