Alignment & Colors

The Float Property

The float property allows you to flow or wrap text around any block-level element (html tags that define new paragraphs on their own, i.e. p, h1, blockquote, ul, etc.) or replaced element (i.e. images, plug-ins, etc.). This can be very useful for page layout and design because it allows for more flexibility with less coding than html tables.

The two float properties are defined as follows:

For a complete table listing all of the CSS properties available, visit the World Wide Web Consortium at www.w3.org.

The CSS Box Model

CSS puts an invisible container around every block-level or replaced element. Each box has padding, border, and margin properties that can be styled. Margins refer to the space outside the border, and padding refers to the space inside the border.

Margins, borders, and padding can be set independently on each side, using any unit of measurement. This is especially helpful in fine-tuning the look of a page by precisely controlling the spacing around each element.

In addition, borders can also be styled with the width, color, and style properties.

Margin
Border
Padding
Block-Level Element

Layout with CSS

The Position Property

CSS allows you to precisely position any element on the page. Using the position property, an element can be positioned according to the "normal flow" (static), relative to its normal position in the normal flow (relative), or absolutely, meaning it has been taken out of the normal flow.