The following contains the units of measurement that may be used with Cascading Style Sheets. The units for length may be positive, negative, decimal fraction or whole numbers.
Absolute Units for Length
| Adornment | Description | Example |
|---|---|---|
| mm | Milimeters |
margin-left:10mm;
|
| cm | Centimeters |
margin-left:10cm;
|
| in | Inches |
margin-left:4in;
|
| pt | Points (1 point = 1/72 Inch) |
margin-left:16pt;
|
| pc | Picas (1 pica = 12pt;) |
margin-left:2pc;
|
Relative Units
When specifying font-sizes, it is preferable to specify them in relative units, so that the reader may adjust the size of the font through their user agent.
| Adornment | Description | Example |
|---|---|---|
| em | Font height of an Element |
font-size:1.5em;
|
| px | Pixels |
margin-left:25px;
|
Percentages
Percentages are specified with an optional sign character (+ or -), followed by the value as a number, and a percent sign. The percentage value is relative to another value.
body
{
font-size:140%;
}
Specifying a font-size of 100% in the body is recommended, as that will initialise the font to the users default size.
Specifying Font Sizes
The font size may be defined in points, pixels, inches, centimeters, or as a percentage of the size of the parent tag.
font-size:12pt;
font-size:12px;
font-size:0.2in;
font-size:0.5cm;
font-size:120%;
| Adornment | Description | Example | Sample |
|---|---|---|---|
| xx-small | Extra, extra small |
font-size:xx-small;
|
Sample |
| x-small | Extra small |
font-size:x-small;
|
Sample |
| small | Small |
font-size:small;
|
Sample |
| medium | Medium |
font-size:medium;
|
Sample |
| large | Large |
font-size:large;
|
Sample |
| x-large | Extra large |
font-size:x-large;
|
Sample |
| xx-large | Extra, extra large |
font-size:xx-large;
|
Sample |
Relative Size for Fonts
There are two further settings that allow to increase or decrease the font-size from its current setting.
| Adornment | Description | Example |
|---|---|---|
| smaller |
font-size:smaller;
|
Sample |
| larger |
font-size:larger;
|
Sample |
Specifying Font Names
Fonts may be a family-name, a generic-family, or both. A family-name is the name of a particular font. For example, arial is a family-name. A generic-family is the classification under which a family-name will occur. For example, serif is a generic-family. When more than one font-family is specified, the browser will use the first name that it recognises. It's good practice to end the list of fonts with a generic-family.
body
{
font-family:arial, helvetica, courier, sans-serif;
}
Specifying Colours
Colours may be specified using a pre-defined colour name, or the red, green, and blue intensities of the colour. The red, green and blue intensities may be specified in hexadecimal, or decimal. A hexidecimal value is preceded by a hash (#) and consists of 3 values in the range 00 to ff that represesent the intensity of red, green and blue respectively. A three digit version may be used for replicating digits. For example #ffcc00, may be represented as #fc0. Decimal values are preceded by the rgb token, with the three decimal values in the range 0 to 255 representing the intensities of red, green and blue in brackets. Values are specified with 3 decimal numbers in the range 0 to 255 that represent the intensity of red, green and blue respectively.
| Colour | Hexadecimal | RGB Code | Example | Sample |
|---|---|---|---|---|
| aqua | #00ffff | 0, 255, 255 |
color:aqua; color:#00ffff; color:#0ff; color:rgb(0,255,255);
|
Sample |
| black | #000000 | 0, 0, 0 |
color:black; color:#000000; color:#000; color:rgb(0,0,0);
|
Sample |
| blue | #0000ff | 0, 0, 255 |
color:blue; color:#0000ff; color:#00f; color:rgb(0,0,255);
|
Sample |
| fuchsia | #ff00ff | 255, 0, 255 |
color:fuchsia; color:#ff00ff; color:#f0f; color:rgb(0,255,255);
|
Sample |
| gray | #808080 | 128, 128, 128 |
color:gray; color:#808080; color:rgb(128,128,128);
|
Sample |
| green | #008000 | 0, 128, 0 |
color:green; color:#008000; color:rgb(0,128,0);
|
Sample |
| lime | #00ff00 | 0, 255, 0 |
color:lime; color:#00FF00; color:#0f0; color:rgb(0,255,0);
|
Sample |
| maroon | #800000 | 128, 0, 0 |
color:maroon; color:#800000; color:rgb(128,0,0);
|
Sample |
| navy | #000080 | 0, 0, 128 |
color:navy; color:#000080; color:rgb(0,0,128);
|
Sample |
| olive | #808000 | 128, 128, 0 |
color:olive; color:#808000; color:rgb(128,128,0);
|
Sample |
| purple | #800080 | 128, 0, 128 |
color:purple; color:#800080; color:rgb(128,0,128);
|
Sample |
| red | #ff0000 | 255, 0, 0 |
color:red; color:#ff0000; color:#f00; color:rgb(255,0,0);
|
Sample |
| silver | #cccccc | 204, 204, 204 |
color:silver; color:#cccccc; color:#ccc; color:rgb(204,204,204);
|
Sample |
| teal | #008080 | 0, 128, 128 |
color:teal; color:#008080; color:rgb(0,128,128);
|
Sample |
| white | #ffffff | 255, 255, 255 |
color:white; color:#ffffff; color:#fff; color:rgb(255,255,255);
|
Sample |
| yellow | #ffff00 | 255, 255, 0 |
color:yellow; color:#ffff0; color:#ff0; color:rgb(255,255,0);
|
Sample |
Specifying a URL
A Uniform Resource Locator (URL), is used to provide the address of a resource
on the Web. It is thought that a Uniform Resouce Name (URN) will be the
new way of identifying resources in the future. A URL and a URN are collectively
referred to as a Uniform Resource Identifier (URI). The notation to refer
to a URI is url( ).
body
{
background-image:url(myPic.jpg);
}
Comments