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

Box Model Properties

margin
This property is a shorthand property for setting all parts of a margin in the same place of your style sheet. If this property contains one value, it applies to all parts. If two values are set, the top and bottom are set to the first value and the right and left are set to the second. With three values, the top is set to the first, the left and right are set to the second and the bottom is set to the third value. With all four values, they apply to top, right, bottom and left respectively.

Value
margin-top | margin-right | margin-bottom | margin-left
 
Default
n/a
 
Applies to
all elements except table display types other than table and inline-table.
 
example:
margin: 5px 0px 5px 0px;
margin-top
This property sets the top margin of the containing block applied to.

Value
length | inherit
 
Default
0
 
Applies to
all elements except table display types other than table and inline-table.
 
example:
margin-top: 10em;
margin-right
This property sets the right margin of the containing block applied to.

Value
length | inherit
 
Default
0
 
Applies to
all elements except table display types other than table and inline-table.
 
example:
margin-right: 10px;
margin-bottom
This property sets the bottom margin of the containing block applied to.

Value
length | inherit
 
Default
0
 
Applies to
all elements except table display types other than table and inline-table.
 
example:
margin-bottom : 10;
margin-left
This property sets the left margin of the containing block applied to.

Value
length | inherit
 
Default
0
 
Applies to
all elements except table display types other than table and inline-table.
 
example:
margin-left: 10pt;
padding
This property is a shorthand property for setting all parts of padding in the same place of your style sheet. If this property contains one value, it applies to all parts. If two values are set, the top and bottom are set to the first value and the right and left are set to the second. With three values, the top is set to the first, the left and right are set to the second and the bottom is set to the third value. With all four values, they apply to top, right, bottom and left respectively.

Value
padding-top | padding-right | padding-bottom | padding-left
 
Default
n/a
 
Applies to
all elements except table display types other than table, inline-table or table-cell.
 
example:
margin: 5px 0px 5px 0px;
padding-top
This property sets the top padding of the containing block it's applied to.

Value
length | inherit
 
Default
0
 
Applies to
all elements except table display types other than table, inline-table or table-cell.
 
example:
padding-top: 10px;
padding-right
This property sets the right padding of the containing block it's applied to.

Value
length | inherit
 
Default
0
 
Applies to
all elements except table display types other than table, inline-table or table-cell.
 
example:
padding-right: 10px;
padding-bottom
This property sets the bottom padding of the containing block it's applied to.

Value
length | inherit
 
Default
0
 
Applies to
all elements except table display types other than table, inline-table or table-cell.
 
example:
padding-bottom: 10px;
padding-left
This property sets the left padding of the containing block it's applied to.

Value
length | inherit
 
Default
0
 
Applies to
all elements except table display types other than table, inline-table or table-cell.
 
example:
padding-left: 10px;
border
This is a shorthand property for setting the same width, color and style to all four borders of a box. You cannot set different values for each border using this shorthand property.

Value
border-width | border-style | border-color | inherit
 
Default
n/a
 
Applies to
all elements.
 
example:
border: 1px solid red;
border-width
This is a shorthand property for setting the top, right, bottom and left width of a border in the same location of your style sheet.

Value
border-top-width | border-right-width | border-bottom-width | border-left-width
 
Default
n/a
 
Applies to
all elements.
 
example:
border-width: thin medium thin medium;
border-top-width
This property sets the width of the top border of it's containing element.

Value
width | inherit
 
Default
medium
 
Applies to
all elements.
 
example:
border-top-width: 2px;
border-right-width
This property sets the width of the right border of it's containing element.

Value
width | inherit
 
Default
medium
 
Applies to
all elements.
 
example:
border-right-width: 2px;
border-bottom-width
This property sets the width of the bottom border of it's containing element.

Value
width | inherit
 
Default
medium
 
Applies to
all elements.
 
example:
border-bottom-width: thin;
border-left-width
This property sets the width of the left border of it's containing element.

Value
width | inherit
 
Default
medium
 
Applies to
all elements.
 
example:
border-left-width: thick;
border-color
This is a shorthand property for setting the top, right, bottom and left color of a border in the same location of your style sheet.

Value
border-top-color | border-right-color | border-bottom-color | border-left-color
 
Default
n/a
 
Applies to
all elements.
 
example:
border-color: red black red black;
border-top-color
This property sets the color of the top border of it's containing element.

Value
color | transparent | inherit
 
Default
the value of the color property
 
Applies to
all elements.
 
example:
border-top-color: #ff0000;
border-right-color
This property sets the color of the right border of it's containing element.

Value
color | transparent | inherit
 
Default
the value of the color property
 
Applies to
all elements.
 
example:
border-right-color: silver;
border-bottom-color
This property sets the color of the bottom border of it's containing element.

Value
color | transparent | inherit
 
Default
the value of the color property
 
Applies to
all elements.
 
example:
border-bottom-color: red;
border-left-color
This property sets the color of the left border of it's containing element.

Value
color | transparent | inherit
 
Default
the value of the color property
 
Applies to
all elements.
 
example:
border-left-color: rgb(255,0,0);
border-style
This is a shorthand property for setting the top, right, bottom and left style of a border in the same location of your style sheet.

Value
border-top-style | border-right-style | border-bottom-style | border-left-style
 
Default
n/a
 
Applies to
all elements.
 
example:
border-style: solid dotted dashed solid
border-top-style
This property sets the style of the top border of it's containing element.

Value
border-style (none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset) | transparent | inherit
 
Default
none
 
Applies to
all elements.
 
example:
border-top-style: dashed;
border-right-style
This property sets the style of the right border of it's containing element.

Value
border-style | transparent | inherit
 
Default
none
 
Applies to
all elements.
 
example:
border-right-style: dotted;
border-bottom-style
This property sets the style of the bottom border of it's containing element.

Value
border-style | transparent | inherit
 
Default
none
 
Applies to
all elements.
 
example:
border-bottom-style: ridge;
border-left-style
This property sets the style of the left border of it's containing element.

Value
border-style | transparent | inherit
 
Default
none
 
Applies to
all elements.
 
example:
border-left-style: double;