Properties

Links

See Issues for a note about spaces between the value and the units.

color, background-color

color: yellow;
background-color: blue;

There are 17 valid predefined colour names. They are aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white and yellow. transparent is also a valid value.

display

The display property sets how/if an element is displayed.

http://www.w3schools.com/css/pr_class_display.asp

p
{
    display: block
}

Value	Description
block	The element will be displayed as a block-level element, with a line break before and after the element.

Margin

The margin property is a shorthand property for setting all of the properties for the four margins in one declaration:

h1 {margin: 1em 2em 3em 4em}

In the order margin-top, margin-right, margin-bottom, margin-left.

To set a single margin:

p {margin-bottom: 1em}

The Box Model

Margins and Padding

Margins, padding and borders are all part of what’s known as the Box Model:

[../../images/howto/css/box-model.gif]The Box Model

e.g.

top is 10px, right is 5px, bottom is 15px and left is 20px:
```
padding:10px 5px 15px 20px;
```
top and bottom are 10px, right and left are 5px:
```
padding:10px 5px;
```
all four padding values are 10px:
```
padding:10px;
```

Text

font-family

font-family : Verdana, Arial, Helvetica, Geneva, sans-serif;

font-size

…it is generally accepted that “em” or “%” are the best units to use for font-sizes:

font-size : 70%;
font-size : 2em;

“em” is the unit for the calculated size of a font. So “2em”, for example, is two times the current font size.

font-weight

font-weight: bold;
font-weight: normal;

line-height

line-height: 1.5;

line-height can be a number (which specifies a multiple of the font size, so ‘2’ will be two times the font size, for example), a length, a percentage or normal.

text-align

text-align: center;

…left, right, center or justify.

text-transform

This will change the case of the text:

text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: none;

text-decoration

The text-decoration property decorates the text!

http://www.w3schools.com/css/pr_text_text-decoration.asp

a.atopnav, a.atopnavs
{
    text-decoration: none;
}

Value	Description
none	Defines a normal text