CSS title
CSS Text MoreCSS Text CSS Structure Images / Background CSS Linking Quick Reference


Some Basic Structures

The Box Model

A typical HTML document consists of one element inside another. For example a <b> tag is inside a <P> tag which is inside a <BODY> tag and so forth. With CSS this can be thought of as a small box inside and larger box and so on. The size and position of each element is relative to the enclosing box

The box model is important to keep in mind when laying out your document with CSS.

The Display Property

The display property determines whether an element is displayed as a block, inline, or as a list item. The block value means the element starts a box with a new line and ends the box with a closing tag. For example:
P {display: block} or
H1 {display: block}

Both of these elements define a block (or box) that includes the start tags and the ending tags.

Compare the block value with the inline value. The inline value is displayed in a box set on the same line as the previous content. The size of the inline box depends on its content. For instance text may span several lines or just one word. The following examples illustrate how this works.
EM {display: inline}
B {display: inline}

An element with a list item value is displayed as a box with a label. A series of these boxes makes up an OL or UL. You determine the type of label for the box using the list-style property. List items use bullets, numbers or letters as labels. You can nest lists within lists giving each one a different label. By using list-style-image property, you can use an image as a label. You can also specify where the label is exhibited, outside the box that encloses the LI, or inside the box. Here are some examples:
OL {list-style: lower alpha}
UL { list-style-image: url (http://powerverbs.com/hand.gif) }
OL OL {list-style: circle outside}

Spacing

By keeping in mind the box analogy, you can use the spacing properties of CSS to gain greater control of where your elements and images appear in your document. The three most common and easy to use properties are margin, border, and padding.

Margin

The margin property allows you to set the space between an element's bounding box and the box of any adjacent element. There are five properties you can set, left, right, top, bottom and to set them all at once, use margin. The syntax is as the following.
BODY {margin: 2em}
Blockquote {margin-left: 20px }
P { margin-top: 10mm}

Notice the different units of measurement. You can use many types of measurements, but it is recommended you find one that works for you and stick with it. Some of the measurement types are pt (point), px (pixels), mm (millimeter), in (inches). The values can also be denoted as percentages.

It is also possible to use negative numbers for margin values. This comes in handy when you are overlapping element's bounding boxes.

Padding

The padding property is the same as that used in tables. It describes how much space is between an element and its margin or border. You can also look at it as the space between an element and its bounding box. Like the margin, the padding property has five properties, left, right, top, bottom and padding.

The padding property allows you to put some space around an element. For example if you had a border around your element, you would want to put some padding around it to give some space between the element and the border.
P {padding: 5px 5px 10px 15px}
H1 {padding: 10%}

Borders

A border is a visual bounding box around an element. It is placed between an element's padding and margin. There are twelve properties you can use to set the width, colour, and style of the border, border-left, right, top, bottom and border; border-color, style, left width, right-width, top-width, bottom-width and border-width.

Colour

Here are some examples of setting border colour
P {border-color: red}
H1 {border-color: red black yellow green}

Styles

There are a lot of border styles you can use, dotted, dashed, solid, double, groove, ridge, inset and outset. It is best to experiment with these to see which works foremost for you.
>P {border-style: dotted}

Blockquote {border-style: ridge groove dashed dotted}

Border-width

There are five values you can use with the border width, thin, medium, thick, a fixed value and a percentage.
P {border-width: 1px 5px 2px 5px}
H1 {border-width: thick}

Float property

Use the float property to place an element to the right or left edge of a parent element. The right and left values of the property take the element out of the normal flow. It moves the element to the right or left until it comes up against a margin, padding or border of another element. You can use this to flow text around an element such as an image. For example
IMG. logo { float: right; margin: 0}

This places the image of class "logo" along the right side of the parent (perhaps a block of text), flush against the parents right edge. Text would flow around the image.

Clear property

The clear property and the float property work together. Whereas float allows an element to be embedded in a block of text, the clear property makes the text below the element. Consider the following code
IMG {float: left}
H2 {clear: both}

This allows text to float around an image placed to the left of the block. The heading, H2 will move to the bottom to the image no matter how much space is between the text and the heading.

This ends the CSS section on basic layout. You can learn about CSS and text in the next section, CSS and Text. You can also see a listing of properties and values here.

CSS Text MoreCSS Text CSS Structure Images / Background CSS Linking Quick Reference

This site produced by Power Verbs