Note: Please check out other CSS tutorials here if you are new to CSS programming.

Structuring Your Pages
The Box Model
Changing the Background
Setting the Height or Width for an Element
Setting the Margins and Padding Around an Element
Offsetting Elements In the Natural Flow
Affixing an Element to the Browser Window
Making Elements Float
Controlling Where Elements Float
Positioning ELements in 3D
Setting the Border
Changing the Cursor
Determining Where Overflow Should Go
Aligning Elements Vertically

There are pretty much two ways to layout your webpage, CSS and Tables. In this tutorial we will be learning how to layout a webpage with styles (CSS). A great thing about CSS is that you can create styles that will allow your web page to expand and contract with the size of the browser that is displaying it. This makes your webpage more liquid. CSS will also allow you to apply the exact same style to other webpages in order for you webpages to be more consistent with each other. Nowadays, most browsers will support CSS so I would highly recommend using it.

If you are using CSS it is because you want to separate the formatting and styling rules from the content of your page. This makes you page look cleaner and frees it other directives that may make your page look more rigid and less flexible.

To structure your page:

Divide logical sections of your page into div elements. A div should look something like this..

<div id="banner">

Make sure you put your div elements in an order that would be most useful to a user who will not be using CSS in there browser. What I mean by this is make sure your page content is in a logical order i.e. title at the top and content under. Also be sure to comment your code!

It is important to note that CSS will treat every element in your page as if it were enclosed in an invisible box. The space surrounding that area (padding), the outside edge (border) and the invisible space around the border (margin). CSS will also allow you to determine the position of each element’s box as fixed or relative to your browser and if some parts are to overlap you can tell CSS which order they should with th z-index.

When referring to and applying a background in CSS you are actually describing the background of a particular element rather than the entire page.

To use background images type: background-image: then type url(image.gif) where image.gif is the location of the image. Alternatively you can type none for no background image.

To repeat a background image type background-repeat: direction where direction is either repeat (x and y), repeat-x (horizontally), repeat -y (vertically).

You can also control if the background image will scroll with the browser or stay fixed by typing background-attachment: then fixed or scroll.

To specify the positional of the background image type background-position: x y where x and y can be a percentage or an absolute distance.

You can also us left, center or right for x and top center or bottom for y.

To change the background color you can type background-color: color where color is either transparent, color (i.e. red), or a RGB or HEX color code.

The result should be something like this:

#paragraph {background-image: url(http://images4.wikia.nocookie.net/uncyclopedia/images/c/c9/Noodledoodle_bg3.jpg); background-repeat: repeat-x; background-position: center;}

You may also choose just to type background: and specify any of the previous mentioned background properties.

This one is pie. To set the height or width for an element type width: w where w is the width of an elements content area and type height: h where h is the height of the elements content area in percentage or absolute values.

#paragraph {width: 75%; height: 200px;}

Note: auto will be used if no width or height is set. Play around with this setting. In block level elements these values can be much different. This will take a bit of trial and error to learn completely.

A great thing about CSS is that you can set the margins around any element. The margin is the space between one element and the next in addition to any padding around the element.

To set the element’s margins type margin: x where x is the amount of space you want to surround your element. X can be expressed as a length, a percentage of the width or auto. This is applied to all four sides of the element. You can type i.e. margin-left: x to apply the margin to the one side. This equally applies to right, top and bottom.

The same rules apply to adding padding around an element. The difference is instead of the word margin you will use the word padding.

#sidebar {
margin-top: 10px;
padding top: 1px;
}

In addition to having a natural location on your page, a position function in CSS will allow you to move an element relative to this location without affecting any of the surrounding elements.

To offset elements within the natural flow type position: relative. If you like you can also type top, right, bottom, or left. next type :v where v is the desired distance that you want to offset. V values can be an absolute or percentage as well as relative.

.tophead {
position: relative; top: 2.2em;
}

I am sure you have experienced before when browsing other websites, elements that seem to stay fixed on the screen, even when scrolling up and down side to side. But be careful when doing this and make sure your fixed element has a suitable purpose. Some developers do this as a marketing technique but only serves to annoy the user.

To affix an element to the browser window type position: fixed; and if desired you can type top, right, bottom, or left after the semicolon followed by :v where v is the desired distance you want to offset the element.

#sidebar {position: fixed;}

With CSS you can make elements in other elements. To make this more clear, which ever element you choose to float the rest of the content will flow to the opposite end.

To wrap text around elements type float: position where position is right or left.

#nav {float: right;}

In order to prevent floating elements from floating next to an element you don’t want it to you can use the clear function.

To do this type clear: then type left to keep elements from floating to the left of the element or right for the same effect on the opposite side. Alternatively you can type both or none.

.par1 {clear: right;}

If you find your elements overlapping because of relative and absolute position you can always choose which element should appear on top.

To position elements in 3D type z-index: n where n is a number that indicates the elements level by number (highest number appearing on top).

#buttons {positions: relative; z-index: 2;}

You can create a border around an elements and apply a thickness, style and colour to it. Also, if you have specified any padding the border will enclose the content and the padding.

To define the border style type border-style: type where type is either dotted, dashed, solid, double, groove, ridge, inset, or outset.

To set the width of the border type border-width: n where n is the units of thickness.

To set the border colour type border-color: color where color is a colour name or rgb.

You can also type border and -top, -right, -left, -bottom followed -property where property is style, width, or color.

.par1 {border-style: solid;}

Play around with this one, lots of options available.

For the most part your browser takes care of the cursor shape. With CSS you can specify cursor shapes more specifically, i.e. making a hand appear on top of links.

To change the cursor type cursor: then type pointer for a hand, default for the arrow, crosshair for a + shape, move for a + shape with arrows, wait for a sand timer, help for a pointer with a question mark, text for the same pointer you would get in a word program, and progress which is a pointer with a sand timer.

Alternatively you can type auto to get what cursor typically appears and that situation.

a:hover {cursor: wait;}

Sometimes elements can get out of hand simply because the box containing them is not large enough or positioning was set absolute. For example you may only want to show one line of images instead of four, so you want to hide the other three. Well there is a solution for that.

To determine where the overflow should go type overflow: then type visible to expand the elements box so everything fits. Or type hidden to hide any contents that appear outside the box. Or type scroll to always add scroll bars to the element so that the visitor can access the overflow if they want. Auto will let you bring up scroll bars only when needed.

p.samples {height: 20px; overflow: scroll;}

This is just a list of aligning techniques using the vertical-align: function.

Basline aligns the elements baseline with the parent’s baseline.

Middle aligns the middle of the element with the middle of the parent.

Sub positions the element as a subscript of the parent.

Super positions the element as a superscript of the parent.

Text-top aligns the top of the element with the top of the parent.

Text-bottom aligns the bottom of the element with the bottom of the parent.

Top aligns the top of the elemenet with the top of the tallest element.

Bottom aligns the top of the element with the bottom of the lowest element.

---

That concludes this tutorial.  Thanks to “HTML, XHTML, & CSS” by Elizabeth Castro for the reference.

For previous tutorial “Format with Style” click here.  For next tutorial “Dynamic Effects with Styles” click here (coming soon).

This page is wiki editable click here to edit this page.