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);
}

Comments

  1. 30 Jul 2003 at 03:36

    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

  2. 01 Jan 1999 at 00:00

    This thread is for discussions of Using Cascading Style Sheets (CSS).

Leave a comment

Sign in or Join us (it's free).

Gez Lemon I'm available for contract work. Please visit Juicify for details.

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...

Want to stay in touch with what's going on? Follow us on twitter!