Basics about CSS property values

There are number of values that may be assigned to a property, depending on its type.

Numbers:

Numbers may be integers or real numbers.

Some properties do not allow negative values.

Lengths:

Lengths refer to a measurement of distance.

They are expressed with a number followed by a unit identifier such as px, pt, em, etc...

If length is 0 a unit may be omitted.

Some properties allow negative length but it is suggested not using them for later formatting issues.

Two main types of length units are: relative and absolute.

Relative units are: em (the font size of the relevant font) and ex (the x-height of the relevant font).

Absolute units are: in (inches), cm (centimeters), mm (millimeters), pt (points = the points in CSS are equal to 1/72nd of 1 inch), pc (picas = one pica is equal to 12pt) and px (pixels = one pixel is equal to 0.75pt).

Percentages:

Percentages are represented by a number followed with a % sign.Values in percentages are always relative to another value, mostly to it's the inherited value of a given parent element's property.

URIs (URLs):

Uniform Resource Identifiers (URIs) are used to identify imported documents often attached as backgrounds or images.

The format of a URI value is url ('address') where address refers to an URI (i.e. http://brenkoweb.com/images/cool.png). Single or double quotes before and after the URI are optional.

Counters:

Counter values come as one of two case-sensitive identifiers, 'increment' or 'reset' (counter-increment and counter-reset properties).

They are used as a way to number the sections and sub-sections within a document (very useful with lists).

Colors:

A color value may be one of sixteen possible pre-defined keywords or a numerical RGB specification where RGB can be shown in a decimal, hexadecimal or short hexadecimal mode.

The color keywords are: aqua (#00ffff), <span style="color:black;>black (#000000), blue (#0000ff), fuchsia (#ff00ff), gray (#808080), green (#008000), lime (#00ff00), maroon (#800000), navy (#000080), olive (#808000), purple (#800080), red (#ff0000), silver (#c0c0c0), teal (#008080), white (#ffffff), and yellow (#ffff00). Their hexadecimal values are inside the apprentices.

Strings:

String values can be written with single or double quotes.

For aesthetic or other reasons strings may be split with a newline but the newline has to be escaped with a backslash (\).

Example

CSS color property values:

<html>
<head>
<title>CSS tutorial</title>
<style type="text/css">
</style>
</head>
<body>

<table id="basic" cellpadding="1" style="border:2px groove #444; width:90%">
    <tr>
        <th colspan="2">Basic colors</th>
    </tr>
    <tr><td>black</td><td style="background-color:black"> </td><td>#000000</td></tr>
    <tr><td>silver</td><td style="background-color:silver"> </td><td>#c0c0c0</td></tr>
    <tr><td>gray</td><td style="background-color:gray"> </td><td>#808080</td></tr>
    <tr><td>white</td><td style="background-color:white"> </td><td>#ffffff</td></tr>
    <tr><td>maroon</td><td style="background-color:maroon"> </td><td>#800000</td></tr>
    <tr><td>red</td><td style="background-color:red"> </td><td>#ff0000</td></tr>
    <tr><td>purple</td><td style="background-color:purple"> </td><td>#800080</td></tr>
    <tr><td>fuchsia</td><td style="background-color:fuchsia"> </td><td>#ff00ff</td></tr>
    <tr><td>green</td><td style="background-color:green"> </td><td>#008000</td></tr>
    <tr><td>lime</td><td style="background-color:lime"> </td><td>#00ff00</td></tr>
    <tr><td>olive</td><td style="background-color:olive"> </td><td>#808000</td></tr>
    <tr><td>yellow</td><td style="background-color:yellow"> </td><td>#ffff00</td></tr>
    <tr><td>navy</td><td style="background-color:navy"> </td><td>#000080</td></tr>
    <tr><td>blue</td><td style="background-color:blue"> </td><td>#0000ff</td></tr>
    <tr><td>teal</td><td style="background-color:teal"> </td><td>#008080</td></tr>
    <tr><td>aqua</td><td style="background-color:aqua"> </td><td>#00ffff</td></tr>
</table>

</body>
</html>

›› go to examples ››