Creating CSS cascading style sheets for HTML
Part five of a seven-part series of blogs

This is the first of a series of 3 tutorials showing how to create and use CSS style sheets for HTML web pages. This first part explains how CSS works, a second part shows how to create styles for HTML tags and a final part gives a full worked example of creating a style sheet.

  1. An Introduction to CSS Style Sheets
  2. The 3 Types of Style: Element, Class and Tag
  3. CSS Style Inheritance
  4. Margins and Padding in CSS
  5. Measurement Units for CSS Styles (this blog)
  6. Colours in CSS Style Sheets
  7. Float Styles

This blog is part of a larger online ASP.NET online tutorial series.  For training courses for businesses, see our ASP.NET training pages, or have a look at our Visual Basic or Visual C# courses.

Posted by Andy Brown on 16 May 2012

You need a minimum screen resolution of about 700 pixels width to see our blogs. This is because they contain diagrams and tables which would not be viewable easily on a mobile phone or small laptop. Please use a larger tablet, notebook or desktop computer, or change your screen resolution settings.

Measurement Units for CSS Styles

When creating CSS styles, there are a variety of units that you can use.  Here are two examples:

#container h1

{

margin: 0px 0 20px 0;

padding: 0;

color: #000080;

font-size: 1.4em;

}

Here h1 tags within the element called container have:

  • a bottom margin of 20 pixels; and
  • a font size of 1.4 ems.

To see what these mean, read on!

Absolute Measurement Units

An absolute unit will always occupy the same amount of room, regardless of the screen size or containing object.  The absolute units are:

Unit Short for What it denotes
pt point There are 72 points in an inch
pc pica There are 6 picas in an inch
in inch An inch (a non-metric unit)
cm centimetre A centimetre (10 millimetres)

As a general rule, you should avoid using absolute units; webpage sizes should be relative to the current screen and page.  Also, the definition of inches and centimetres can depend on your screen resolution.

Relative Measurement Units

Relative units have varying height, according to the containing element height, the current screen resolution and the operating system being used (among other factors).  The relative units are:

Unit Short for What it denotes
% percentage The percentage of the relative figure (see below)
em  N/A The fraction of the applicable font size (see below)
px pixel Dependent on your screen resolution (see below)
ex N/A The x-height measures the height of the letter x in the current font, and is not widely supported.

Pixels

Your screen is divided into pixels: typically 800 x 600, 1024 x 720 or 1600 x 900 (although mobile phones are clearly much smaller). This means a pixel is a good unit of measurement for block elements:

Example of H1 header

The header shown here has a margin round it which is measured in pixels (see below).

 

The CSS for the h1 header tag used above looks like this:

#container h1

{

margin: 0px 0 20px 0;

color: #000080;

font-size: 1.4em;

}

There is a 20 pixel gap between the bottom of the Listing tasks heading and the next block element (the following text).

Pixels are often used for image sizing, padding, margins and borders.

Ems

Use ems to scale font sizes up or down.  The h1 tag shown above uses ems:

#container h1

{

margin: 0px 0 20px 0;

color: #000080;

font-size: 1.4em;

}

Here the size of the header font is 140% of the normal font size for the page, as specfied for the body tag:

body

{

background-color: #def;

font:13px Verdana, Arial, Helvetica, sans-serif;

}

Use ems to change the size of fonts relative to their default height.

The Percent (%) Unit

It is often useful to state widths of tables and div tags as a percentage of the width of the screen.  Here is an example style:

.ImportantMessage

{

background-color: #def;

border: 2px solid #000;

padding: 10px;

font-size: 0.8em;

font-weight: bold;

color: #123;

margin: 20px 0;

width: 50%;

}

This style would display any block element with a width 50% of the containing element's size - for example this HTML:

HTML using class

HTML to display a div element using the ImportantMessage class.

would display like this:

Box containing text

The box takes up 50% of the element containing it (ie exactly half of the width of the white rectangle).

 

Typically you should use % as a measurement unit for tables, div tags and other block elements whose size may vary as you resize a browser window.

This blog has 0 threads Add post