CSS Review

Box model

The box model describes how CSS works to display images and information. Every element in your web page responds to these basic directives, however their implementation is not always accurate.

width: how wide your element is
height: how tall your element is

margin: space between two elements. Measured a little uniquely, as the bottom margin of upper element is not added to the top margin of the bottom element to determine the space. Rather, the two are compared, and the greater size determines the spacing. note: your margin can be negative.

padding: the space between your content and the border of your element. note: You background will show where there is padding.

border: the style of the border can be set as well as it's color and size. note: there are some default sizes (thin, medium, thick) however they vary in actual dimensions so I personally avoid using them

Example 1

Example 1 is an interactive demo of the box model, use the controllers to see how modifying each section creates a look. Additionally, information about unit sizing is provided. The Interactive Box Model example is a combination of all three parts of a web page, content (the markup), presentation/style (the CSS), and interaction (Javascript - in this case it controls mainly CSS, but in other examples Javascript can control the content (HTML) as well.)

Example 2

Example 2 shows how you can use negative margins. By using negative margins and a background color, a drop shadow effect was able to be achieved.

Backgrounds

Just as every element on your web page is subject to the CSS Box model, every element has a background. By default, it is transparent however, this can be changed at any time.

Backgrounds can be:

a solid color defined by a legal CSS color designation ( rgb(255,0,0) - rare; red - semi used; #ff0000 - common; #f00 - short hand)
An image
- images may be repeated vertically and/or horizontally
- not repeated at all
- positioned either as a %, pixel offset, or in relation to the element top/center/bottom and left/center/right

Backgrounds can be used to give texture, create a watermark, separate content, etc.

A common tool is to nest a <span> inside an element to provide a little extra flexibility with backgrounds. So for example:

<li><a href="#">link item 1</a></li> becomes: <li><a href="#"><span>link item 1</span></a></li>

You will see how we use this later on.

Borders