Webmaster Resources Center

Welcome to the Bravenet Resource Center. Use these resources to help make your web pages more advanced and fun to use.

Quick Reference Sheets for Webmasters

Quick Reference sheets are packed full of useful information for all webmasters.

CSS Reference Sheet

Visual Formatting

display
The display property is the major component of visual formatting and defines the formatting on an element. For instance, by default a SPAN tag is an inline element meaning it cannot contain characteristics of a block-level element such as width or height. As well, being an inline element, the span tag will not break to a new line such as a DIV tag. With the display property, you can give a SPAN the characteristics of a block element by defining the value as block.

Value
inline | block | list-item | run-in | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit
 
Default
inline
 
Applies to
all elements.
 
example:
display: block;
position
The position property is used to determine which of the CSS 2.1 positioning algorithms is used to calculate the position of the box. A static box is a normal box where no other positioning properties can apply. A relative box is relative to it's normal position. When a box is relatively positioned, the position of the following box is calculated as though the first box was not offset. An absolute positioned box is taken out of normal document flow which has no effect on the layout of later siblings. An absolute position is top, right, bottom or left of it's closest relative. By default, it would be absolute to that of the BODY.

Value
static | relative | absolute | fixed | inherit
 
Default
static
 
Applies to
all elements.
 
example:
position: absolute;
top
This property specifies how far an absolutely positioned box's top margin edge is offset below the top edge of the box's containing element. For relative positioned boxes, the offset is with respect to the top edges of the box itself.

Value
length | percentage | auto | inherit
 
Default
auto
 
Applies to
positioned elements
 
example:
position: absolute; top: 5px;
right
This property has the same effect as the top property mentioned above but will effect the offset of the right edge of the box applied to.

Value
length | percentage | auto | inherit
 
Default
auto
 
Applies to
positioned elements
 
example:
position: absolute; right: 5px;
bottom
This property has the same effect as the top property mentioned above but will effect the offset of the bottom edge of the box applied to.

Value
length | percentage | auto | inherit
 
Default
auto
 
Applies to
positioned elements
 
example:
position: relative; bottom: 5px;
left
This property has the same effect as the top property mentioned above but will effect the offset of the left edge of the box applied to.

Value
length | percentage | auto | inherit
 
Default
auto
 
Applies to
positioned elements
 
example:
position: relative; left: 5px;
float
This property specifies whether a box should float to the left, right, or not at all. It may be set for any element, but only applies to elements that generate boxes that are not absolutely positioned.

Value
left | right | none | inherit
 
Default
none
 
Applies to
all elements
 
example:
float: left;
clear
This property indicates which sides of an element's box(es) may not be adjacent to an earlier floating box. The 'clear' property does not consider floats inside the element itself or in other block formatting contexts.

Value
none | left | right | both | inherit
 
Default
none
 
Applies to
block-level elements
 
example:
clear: both;
z-index
For a positioned element, the z-index property specifies: a) the stack level of the box in the current stacking context; b) whether the box establishes a local stacking context. In other words, in combination with a positioned box, z-index will apply the layering order of each element it's applied to. For example, a DIV with a z-index of 1 would be layered below a DIV with a z-index of 10.

Value
auto | integer | inherit
 
Default
auto
 
Applies to
positioned elements
 
example:
z-index: 50;
direction
This property sets the writing direction of blocks and the direction of embeddings. In addition, it specifies the direction of table column layout, the direction of horizontal overflow and the position of incomplete last line in a block.

Value
ltr | rtl | inherit
 
Default
ltr
 
Applies to
all elements.
 
example:
direction: rtl;
overflow
This property specifies whether content of a block-level element is clipped when it overflows the element's box. It affects the clipping of all of the element's content except any descendant elements (and their respective content and descendants) whose containing block is the viewport or an ancestor of the element.

Value
visible | hidden | scroll | auto | inherit
 
Default
visible
 
Applies to
block-level and replaced elements, table cells, inline blocks
 
example:
overflow: hidden;
clip
The 'clip' property applies only to absolutely positioned elements. an auto value means that no clipping will occur. The only valid shape value is rect(top, right, bottom, left) where top and bottom specify offsets from the top border edge of the box and right and left specify offsets from the left border edge of the box in left-to-right text and from the right border edge of the box in right-to-left text.

Value
shape | auto | inherit
 
Default
auto
 
Applies to
absolutely positioned elements.
 
example:
clip: rect(10px, 50px, 50px 10px);
visibility
This propery specifies where the boxes generated by an element are rendered. Invisible boxes still affect layout as opposed to display: none which will suppress box generation altogether.

Value
visibile | hidden | collapse | inherit
 
Default
visible
 
Applies to
all elements.
 
example:
visibility: hidden;