Library tutorials & articles
Using Cascading Style Sheets (CSS)
CSS Units of Measurement
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);
}
Related articles
Related discussion
-
Create this kind of website
by maidentv (1 replies)
-
$200 Website Design and Development
by manypeopledesign (1 replies)
-
Dallas Interactive Marketing & Internet SEO SEM October Meetup
by dsafmx (4 replies)
-
Contract: ActionScript/FlashBuilder Developer
by mattmeigs (2 replies)
-
Can I design web site by using ASP.net
by pradeepfusion (1 replies)
Related podcasts
-
Despise the listener
We have a great lineup this week: Paul talks about getting things done in web design and an alternative approach to your reading list. Marcus explains the exciting area of insurance for web designers and we have Andy Clarke on the show to give us an update on CSS 3.
Events coming up
-
Nov
23
Dan Cederholm Workshop
London, United Kingdom
Handcrafted Bulletproof CSSwith Dan Cederholm of "Simplebits"Learn how craftsmanship can apply to the intangibility of web design. Dan Cederholm will guide you though a case study, pointing out the details that matter most when designing fle...
This is a good tutorial as it covers the basics.
Nevertheless, readers should know that CSS can be taken to the extreme and should know the other side of the story in regards to fully integrated CSS.
One of the points to always remember in any technology is the K.I.S.S. principle.
Tables versus fully CSS (i.e. replacing all table tags with div tags)
http://www.decloak.com/Products/Dreamweaver/NestedTemplates/TablesOrLayers.aspx
This thread is for discussions of Using Cascading Style Sheets (CSS).