Cascading Style Sheet Properties

This is not a definitive list, but it does contain the most common and useful CSS properties, along with some examples. Some CSS properties do not work or behave differently in some browsers.

The column marked Inherit shows if the property will be inherited by tag elements within the tag that the property is applied to. For example if {font-family: Arial} is specified for a style that formats a table all other elements in the table will also be have the same font attribute unless they have specific font attributes assigned to them.

The best way to see the effect of these property values is to try them!

  • The pipe symbol | is used to mean "or", so for letter-spacing the values can be normal or size.
  • Default values as specified in the W3C CSS standard (http://www.w3.org/TR/REC-CSS2 Link opens in a new window ) are bold. If you want to use a default value you only need to specify it if you need to override another specified value further up the cascade.
  • Where a valid value is shown as "size" this can be expressed in pixels (px) or points (pt). There are 72 points to an inch.
  • Where a value is shown as "percentage" this is expressed as a value followed by a percent sign, like: 90%.
  • Remember to use the American spelling of "center" and "color" when used in CSS properties.

Text

Property Values Example Inherit

letter-spacing

normal | size

{letter-spacing: 2px}

Yes

line-height

normal | number | size | percentage

{line-height: 21px}

Yes

text-align

left | right | center | justify

{text-align: center}

Yes

text-decoration

none | underline | overline | line-through

{text-decoration: underline}

No

text-indent

size | percentage

{text-indent: 20px}

Yes

vertical-align

percent | baseline | bottom | middle | sub | super | text-bottom | text-top | top

{vertical-align: sub}

No

.eg1 { text-decoration: underline;
    letter-spacing: 2px;
    text-align: center }

<p class="eg1">Cascading Style Sheet Example 1</p>

Cascading Style Sheet Example 1


Fonts

Property Values Example Inherit

font-family

[ family-name | generic-family ], [ family-name | generic-family ]

{font-family: Arial, Sans-serif}

Yes

font-size

xx-large | x-large | large | medium | small | x-small | xx-small | larger | smaller | percentage | size

{font-size: 16px}

Yes

font-style

normal | italic | oblique

{font-style: italic}

Yes

font-weight

normal | bold | bolder | lighter

{font-weight: bold}

Yes

When specifying a font it is best to give an alternative generic font family. This is so the browser knows the general type of font required in case the specified font is not available. Specify a generic family from the following:

  • cursive, like Brush Script
  • fantasy, like Comic Sans
  • monospace, like Courier
  • sans-serif, like Arial
  • serif, like Times New Roman

.eg2 { font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-style: italic;
    font-weight: bold }

<p class="eg2">Cascading Style Sheet Example 2</p>

Cascading Style Sheet Example 2


Colour and Background

Property Values Example Inherit

color

colour name | Hexadecimal colour code

{color: #0000ff}

Yes

background-color

colour name | Hexadecimal colour code | transparent

{background-color: #ff9900}

No

background-image

url(path and filename) | none

{background-image: url(image.jpg)}

No

The color property will apply to the foreground element, text or the border of an image for example. It is a good idea to specify a value for background-color even if you are using a background-image, then if the image fails to load for some reason your background will still contrast your text and foreground colours.

.eg3 { color: #0000ff;
    background-color: #ff9900;
    background-image: url(cell_bg1.gif) }

<div class="eg3">Cascading Style Sheet Example 3</div>

Cascading Style Sheet Example 3

Margins, Borders and Padding

Margin (transaparent)
Border
Padding (background colour)
Content

Elements can be considered to be boxes that have a content area surrounded with optional padding, border, and margin areas.

The padding is the space between the actual content and the inner edge of the border.

The border is the outline of the combined content and padding area.

The margin is the space outside the border, separating it from other elements.

Property Values Example Inherit

margin

size | percentage | auto

{margin: 10px 5px 10px 5px}

No

border

border-width border-style border-color

{border: thin solid blue}

No

border-color

colour name | Hexadecimal colour code

{border-color: #00ff00}

No

border-style

dashed | dotted | double | groove | inset | none | solid | outset | ridge | solid

{border-style: dotted}

No

border-width

thin | medium | thick | size

{border-width: thin}

No

padding

size | percentage

{padding: 10px 15px 10px 15px}

No

If just one value is defined it applies to all four sides of the element. If you want to have different values for each side the values for all four sides can be expressed in one property with four values. The first value always applies to the top, the second value applies to the right, the third value applies to the bottom and the fourth value applies to the left.

Alternatively the above properties can be sub-divided in to the four sides of the box. So to have different border properties for each side, border could be replaced with border-top and border-right and border-bottom and border-left.

.eg4 { margin: 15px 282px 15px 282px;
    border-top: 2px dotted #ff0000;
    border-bottom: 2px solid #0000ff }

<img class="eg4" src="sm_harley.gif">

Harley

Lists

These properties apply to <ul>, <ol> and <li> list elements.

Property Values Example Inherit

list-style-image

url(path and filename) | none

{list-style-image: url(image.gif)}

Yes

list-style-position

inside | outside

{list-style-position: inside; }

Yes

list-style-type

circle | disk | square | decimal | lower-alpha | lower-roman | none | upper-alpha | upper-roman

{list-style-type: square}

Yes

.eg5 { list-style-image: url(bullet_red.gif) }

<ul class="eg5">
<li>First List Item</li>
<li>Second List Item</li>
<li>Third List Item</li>
<ul>

  • First List Item
  • Second List Item
  • Third List Item

Positioning

These properties principally apply to <div> and <span> tags, but you can float text, images, lists and tables!

Property Values Example Inherit

height

size | auto

{height: 200px}

No

width

size | percentage | auto

{width: 80%}

No

float

none | left | right

{float: right}

No

.eg6 { width: 400px;
    float: right;
    background-color: #cceeff;
    border: 1px solid #0000ff;
    padding: 5px 12px 2px 12px }

<div class="eg6"><p>This paragraph is contained in a div tag 400 pixels wide. A background colour, border and padding have been added to show the size and shape of the div.</p></div>

This paragraph is contained in a div tag 400 pixels wide. A background colour, border and padding have been added to show the size and shape of the div.

  • The CSS float property replaces the HTML align attribute. Although the align attribute will work in some browsers, it is best to use the CSS float property.
  • If you want to centre an element (other than text) you should specify left and right padding or margin values to occupy the space each side of the element, like the motorbike image above.