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

Fonts & Text

font
This property is a shorthand property for setting font-style, font-variant, font-weight, font-size, line-height and font-family in the same location of your style sheet.

Value
font-style | font-variant | font-weight | font-size | / line-height | font-family | inherit
 
Default
n/a
 
Applies to
all elements.
 
example:
font: italic small-caps bold 12px/14px arial
font-style
This property selects between normal, italic and oblique faces within a font family.

Value
normal | italic | oblique | inherit
 
Default
normal
 
Applies to
all elements.
 
example:
font-style: italic;
font-variant
This will select the type of variation to use on a font family. Besides normal, there is small-caps which converts the lowercase letters to a smaller uppercase while maintaing the normal view for regular uppercase letters.

Value
normal | small-caps | inherit
 
Default
normal
 
Applies to
all elements.
 
example:
font-variant: small-caps;
font-weight
The font-weight property sets the weight of a font family. The values 100 to 900 form an ordered sequence, where each number indicates a weight that is at least as dark as its predecessor.

Value
normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit
 
Default
normal
 
Applies to
all elements.
 
example:
font-weight: bolder;
font-size
The font-size property sets the the size of the font. Absolute sizes are a group of font sizes computed and kept by the browser. Possible absolute values are: xx-small, x-small, small, medium, large, x-large, xx-large. Relative size keywords (smaller, larger) are relatively interpreted by the font size of its parent element.

Value
absolute-size | relative-size | length | percentage | inherit
 
Default
medium
 
Applies to
all elements.
 
example:
font-size: 0.8em;
font-family
This property sets a font family or group of font families applied to its containing element. The value is a priortized list of font family names and/or generic family names. The family name is the name of a font family of choice. A generic family defines a generic font that is recognized by all browsers and operating systems. It is always advised that the last item in your family list be a generic font. Generic fonts are: serif, sans-serif, cursive, fantasy, monospace.

Value
family-name | generic-family | inherit
 
Default
depends on browser
 
Applies to
all elements.
 
example:
font-family: Verdana, Arial, sans-serif;
text-indent
This property sets an indentation on the first line of text in a block.

Value
length | percentage | inherit
 
Default
0
 
Applies to
block-level elements, table cells and inline blocks.
 
example:
text-indent: 15px;
text-align
This property describes how inline content of a block is aligned. A justified alignment will set the left and right margin of the text to equal lengths while padding lines shorter than others with whitespace.

Value
left | right | center | justify | inherit
 
Default
left is direction is ltr; right if direction is rtl
 
Applies to
block-level elements, table cells and inline blocks.
 
example:
text-align: justify;
text-decoration
This property describes decorations that are added to the text of an element using the element's color. When specified on an inline element, it affects all the boxes generated by that element; for all other elements, the decorations are propagated to an anonymous inline box that wraps all the in-flow inline children of the element, and to any block-level in-flow descendants. It is not, however, further propagated to floating and absolutely positioned descendants, nor to the contents of 'inline-table' and 'inline-block' descendants.

Value
none | underline | overline | line-through | blink | inherit
 
Default
none
 
Applies to
all elements.
 
example:
text-decoration: line-through;
letter-spacing
This property specifies the amount of spacing between text characters. Character spacing algorithms are browser-dependant.

Value
normal | length | inherit
 
Default
normal
 
Applies to
all elements.
 
example:
letter-spacing: 1;
word-spacing
This property specifies the amount of spacing between words. The value of normal sets the normal inter-word spacing as defined by the current font and/or the browser. Word spacing algorithms are browser-dependent.

Value
normal | length | inherit
 
Default
normal
 
Applies to
all elements.
 
example:
word-spacing: 1;
text-transform
The text-transform property controls capitalization effects on an element's text. The capitalize value puts the first character of each word in uppercase where the uppercase value sets all characters to uppercase.

Value
capitalize | uppercase | lowercase | none | inherit
 
Default
none
 
Applies to
all elements.
 
example:
text-transform: uppercase;
white-space
This property declares how whitespace inside the element it's applied to will be handled.

Value
normal | pre | nowrap | pre-wrap | pre-line | inherit
 
Default
normal
 
Applies to
all elements.
 
example:
white-space: nowrap;