Web Design Homepage

Cascading Style Sheets for Page Layout

CSS Layout Basics
Last week we learned how to format text using CSS. This week we study how you can use style sheets to add further formatting to your webpage and for positioning of items on your page. All web browsers are based upon a built in style sheet. This style sheet is part of the program and is not viewable. It instructs the browser how to display individual items or elements in your page. Every item in your page is based upon this built-in style sheet; it's size, color, position, and other characteristics are defined within it. When you add a style sheet to the page, you can override this built-in style sheet and tell the browser to display elements in a different way, according to your style sheet.

Each page element has certain default characteristics based upon the built-in style sheet. Each element can also be considered to be enclosed within an invisible box. Each webpage is an element. Within the page you can have paragraphs. Each paragraph is also an element and you can imagine that it is surrounded by an invisible box. Within a paragraph, you can also have elements, such as links or a section of bold text. Each of these is also an element (think invisible box). Once you realize that each element is contained within a box and that the position and size of that box is controlled by the built-in style sheet, it is easier to recognize how individual elements can be moved, manipulated, or positioned by adding you own style sheet to change that element's characteristics.

There are two types of page elements: block-level and inline. Block-level elements can be thought of as elements that begin a new paragraph or section. For instance, the P and H1 tags are block-level elements. Inline elements do not start a new paragraph and are usually contained within block-level elements. The bold or anchor tags are typical inline elements. A parent element is an element that contains another element. The web page is the parent to paragraphs, and paragraphs are parent to the bold tag. Understand? This is important, because if you change the characteristics of a parent element, the changes will almost always affect the elements they contain (child elements).

OK, let's think of our invisible boxes surrounding individual elements. There are three basic parts to each box. Each element can be thought of as having a border, although invisible. The border defines where the element begins and ends. The area between the border and other elements in the page is called the element margin. Each paragraph has a margin that separates it from other elements, such as other paragraphs. The padding is the area between the contents of a box and its own border. Padding is the space between the words of this paragraph and the invisible border that surrounds it. Each elements border, margin, and padding are defined by the built-in style sheet, and can thus be changed by adding our own style sheet.

The built-in style sheet defines the default position of elements within your page. For instance, this paragraph's default location starts at the left margin, goes to the right margin and is as high as it needs to be to fit all of its contents. By adding your own styles, you can change the position of elements relative to what the default position is. This is called relative positioning. Relative positioning tells the browser where to position an element, based upon the element's default position. You can also use absolute positioning. Absolute positioning tells the browser where to position an element based upon the position of its parent element. I like to think of relative positioning as giving driving directions from one location to another, like your house to Pizza Hut. Based upon where you start (your house) you can find Pizza Hut. Absolute positioning would be like giving Pizza Hut's address, rather than driving directions. Either way, you would end up in the same place, the difference is how you were instructed to get there.

Positioning with CSS
The styles to change element positioning work the same as every other style you have learned. The same formatting rules apply.

position: relative;
top: 20;
left: 20pt

I have added the above style to this paragraph to demonstrate how relative positioning works. The position: relative style told the browser that this element is going to be positioned relative to its default position. The top and left definitions told the browser where to move the element. top: 20 told the browser to move the element down 20 pixels from the top. Left: 30pt told the browser to move the element from the left 30 points, or to the right 30 points. You can use negative numbers with top to move the element up, and negative numbers with left to move the element to the left. Positive numbers mean the element will move from that direction, negative numbers will move the element toward that direction. Style sheets allow you to add bottom and right definitions as well, but NETSCAPE NAVIGATOR DOES NOT RECOGNIZE BOTTOM AND RIGHT. You typically don't need both top and bottom, or both left and right. If you do, I found that the browser will use the top and the left definitions and ignore bottom and right.

Remember that we are positioning elements relative to where they typically would be. Because of that, everything outside of that element in the document is not affected by relative positioning. They will continue to act as if the element were in its default position. You probably noticed that the words at the far right of the previous paragraph were cut off by the margin. The element for the entire page did not adjust by adding scroll bars. Also notice that this paragraph is very close to the previous paragraph. This paragraph did not adjust to the position of the previous element - it is in the exact position it would be if the previous paragraph had not been moved. Because of this fact, it is possible for you to position elements on top of one another. This can sometimes be helpful, especially with images.

To position absolutely, you are going to tell the browser where to display an element in relation to its parent element. The parent of this paragraph is the webpage itself or more accurately, the body tag. Absolute positioning is defined similarly to relative positioning.

position: absolute;
top: 50pt;
left: 20

Hello there

Just previous to this paragraph, I add the following HTML code with a local style sheet.
<P STYLE="position:absolute; top:50pt; left:20">Hello there</P>
The local style sheet tells the browser to position that paragraph in relation to its parent element or the web page itself. It tells it to position it 50 points FROM the top and 20 pixels FROM the left of where the parent element begins, which is the top of this page. In fact, if you scroll up to the top of the page, you will see the paragraph in the upper left corner. When you position an element absolutely, you are taking it out of the natural flow of the page, so other elements in the page, act as if the element did not even exist. Remember that there is a paragraph in the HTML code between this paragraph and the previous one, however, this paragraph did not move down to accommodate it. In essence, this paragraph takes its place in the page flow, as if it didn't exist.

Remember that absolute positioning is in relation to the parent element. I am absolute. I am relative. Both sections of blue text were entered directly before this sentence. Both were given attributes of top: -10, however one is absolute (relative to where the paragraph begins) and one is relative (relative to where it should be). In order for absolute values to be set on elements within paragraphs, you must set the paragraph to be positioned relative to the document. I don't know why this is, but it must be. This paragraph contains a STYLE that sets position:relative, however, there are no positions set, so the paragraph doesn't move. If this were not set, the blue text that is set to absolute positioning would be positioned in relation to the page, not this paragraph. Relative positioning, however, will always work, no matter where it is located. You can view the page source of this page to see how it works. Also, be sure to always specify left and top definitions with absolute positioning, or the results may be buggy. If needed, you can set them to 0. You will find that IE and Netscape handle absolute positioning a little different, because their built-in style sheets are a little different.

Setting a Stacking Order
Because style sheets allow you to change the position of page elements, it is possible to overlap elements. This is not always bad (but usually is). When elements are overlapped, you can specify which of the elements you want to be on top. By default, items listed first in your HTML code are covered by items listed later. You can, however, change the stacking order by adding the z-index definition.

.duck {position:relative; left:-30; top:0; z-index:-1}

I added the preceding line to the internal style sheet of this page. I then surrounded the second duck image tag with a <SPAN CLASS="duck"> and </SPAN>. The style sheet moved the image to the left 30 pixels and set the stacking order to -1. The higher the number, the higher in the stack the item is. You can use positive and negative numbers. The default stacking order number is 1. If I had set the z-index to 2 on the second image, it would have been on top. If you are using Netscape, the images are probably not layered. I could not, for some reason get images to stack in Netscape.

Hiding and Displaying Elements
You can add the display definition to any element to change the way it displays in these ways:
display: none - hides the element. There will be no trace of the element at all and no empty space where it should have been.
display: block - displays the element as a block-level element. Block-level elements always start a new paragraph.
display: inline - displays the element as an inline element or as part of the existing element. Does not start a new paragraph.

By using display: inline, you can put paragraphs inside of heading, etc. Display: block allows typically inline items (i.e. B, IMG) to start new paragraphs.

Setting Height and Width
width: 25%
height: 15

You can use these definitions to set the width and height of any element. The value for the width can be a pixel or point value or a percentage of the browser window. Height can be only a pixel or point value. You can also use in, cm, mm, and several others instead of pixels or points. Pixels are always the fastest to display because the browser has less thinking to do. You try converting centimeters to pixels, eh? The width of this paragraph is set to 60%. However, Netscape does not seem to recognize width. If the contents of the element are too big to fit in the specified height, the browser will ignore you and increase the elements height until all its contents are visible. You can override this with the overflow definition.

overflow: visible - same as the default, makes the extra information display. Really just increases the height of the element.
overflow: hidden - does not increase the element height. Any contents that do not fit in the specified height will not be visible.
overflow: scroll - will add a scrollbar to the element so the user can scroll to see the extra contents.
This paragraph is set with a width of 60%, a height of 85px, and overflow to scroll. Overflow does not work in Netscape, it will always default to visible. If you are using IE, you can see how cool scroll can be. You will always get the bottom scroll bars.

Adding a Border

There are many options you can add for adding and formatting borders. You can add the following border definitions:
border - affects all borders
border-top
border-bottom
border-left
border-right

Once you have specified the border(s) you want to change you can add the following to change the border thickness.
thin
medium
thick
5px - any absolute value will work, maybe. (10pt, 5mm)

You can also change the border style by adding on of these: none, dotted, dashed, solid, double, groove, ridge, inset, or outset.

Finally, you can add a color value or an rgb color value. You can combine thickness, style, and color attributes all into one style.

border: medium double red

When added to this image, the border style results in . Netscape does not seem to recognize border either.

Adding Padding
Padding is space between an elements contents and its border. Increasing padding basically makes the element itself swell, while the contents remain unchanged. This paragraph has 30 pixels of padding added to all sides.

padding
padding-top
padding-bottom
padding-left
padding-right

These elements define which of the elements edges you wish to pad. You then add an absolute value to tell how much space to add.

When I added padding to an image tag, it did nothing, but when I added a 30 pixel padding to this paragraph, it worked, in IE. Netscape doesn't seem to like padding either. Surprised?

You can also add any of the following:
padding: t r b l
padding: t h b
padding: v h

where t is the value for the top padding, r for right, b for bottom, l for left, h for horizontal (both sides), and v for vertical (top and bottom). If you enter three values, the browser knows that the values are for t, h, and b.

Changing Margins

Margins are the area between an elements border and other elements. The margins keeps things (unless you tell it otherwise) from overlapping.

margin
margin-top
margin-bottom
margin-left
margin-right

margin:15 would add a 15 pixels to every margin of an element.

Or you can also use:
margin: t r b l
margin: t h b
margin: v h

Although padding did not work on images, margin did, but...you guessed it, in IE only. The margin of the duck was set to 30 pixels on all sides.

Vertical Alignment
This style can be added to an element to affect the way that other elements are aligned to it. The following are all possible values to vertical-align:
baseline, middle, sub, super, text-top, top, or bottom.

This text is middle aligned. Remember that the vertical-align is added to the image, not this text. Vertical-align can be added to any element, but it doesn't do any good if there isn't something aligned with it (it must be an inline element). Look, this one actually works in Netscape - whoopee!!

Text Wrapping
You can change the way in which text flows around page elements with the float definition.

FLOAT: left - text flows to right.
FLOAT: right - text flows to left.
Adding the align attribute to the IMG tag probably works better than the float style.

You can also make it so text stops wrapping around an element until one or both of the margins are open. To do this, add the clear definition to the element you don't want text to wrap around.

clear: left - this will stop the text from displaying until the left margin is clear or open.
clear: right - will stop text from displaying until the right margin is clear or open.
clear: both - will stop text from displaying until both margins are clear.
clear: none - has no affect on wrapping.
This is the same as <BR CLEAR=left, right, or center>.

Lists
Although lists are fairly simple to implement with normal HTML, you can add additional formatting when you add a style sheet to them. There are many ways of formatting lists. Just add the list-style definition to either the UL tag or the OL tag.

UL {list-style: url(duck.jpg) inside}

This list-style is implemented in the following list. The possible values for list-style are:

Adding inside to the list-style will put the marker (bullet) flush with the list items, rather than having each item indented from the bullet. You can see this on the last item. Unfortunately, Netscape does not recognize any of the list-styles. It displays all items with a disc marker. You can, however use the plain old HTML TYPE attribute to get other styles.

Words of Advice
As you can see, there are numerous possibilities with style sheets, however, browsers handle them differently (some better than others). Be sure to test your site on many browsers before implementation. I have found that Netscape seems to handle styles better when they are added to an internal style sheet, rather than locally. Future versions of all browsers are certain to handle additional style sheet features. The real exciting part about using style sheets is when you use JavaScript to change element values, thus making elements on your page dynamic. This is what DynamicHTML is - a combination of CSS and JavaScript. But that is next weeks lesson! See you then!!