Web design: design and layout

Planning your layout

If you've been following along from the start, you should now have a simple, un-styled website; a collection of interlinked pages with content, images, and links to other sites. At this stage, anyone can view your pages, but your site will look pretty uninspiring in most desktop browsers. It's time to lay out your documents on screen: it's time to write your style-sheets.

This three-page section covers simply the mechanics of writing CSS and linking them to documents on your site, so don't worry if you don't "get" some of it at this stage. The next section contains tips and example layouts, and there's a CSS reference that lists the most useful properties and their values.

On this page you'll learn about the different measurement units, and how to specify colours. On the next page you'll learn the basics of formatting text, choosing fonts, making text flow around images, choosing a colour-scheme, and how the CSS box model works. It finishes with two methods to create a text column for your content. The third and final page of the series reveals some more advanced CSS.

Good design is a combination of creativity and the application of tried and tested guidelines. Your creativity is up to you, but this tutorial will provide you with many of the guidelines of good web design. They aren't rules — you can break many of them creatively and come out with a better design for your trouble — but first you need to know what they are. Following these rules will result in you having a good, flexible, easy to read layout. You've already designed your navigation, and that's a major part of making a good site; here's the other part.

Cascading Style-sheets

A tip before you begin: while you develop your style-sheet, you'll want to keep a browser window open to your site and reload to check your changes. Some browsers are a little lazy in checking style-sheets and images for updates and will keep a previous version in memory or on disk. You can force your browser to reload its style-sheet:

Internet Explorer: Hold down Ctrl and then click the Refresh button.
Netscape, Phoenix: Hold down Shift and click the Reload button, or hold down Shift-Ctrl-R.
Opera: Usually the most tenacious. Open a new page and load the style-sheet in it directly (rather than have your site load it). Reload that page to get the most recent version, before going back to your test page and reloading that too.

As you've read previously, style-sheets are lists of layout rules that are applied to the structure of an HTML documents. A style-sheet can give rules for displaying documents on a computer screen, a hand-held mobile device, a printer, or braille device, and also rules for controlling the voice of a speech synthesiser in web browsers for the blind. You can specify several style-sheets; one for each medium, one for several media, or even several for one medium. They load in the order specified, and where rules overlap, the latest-loading sheet's rules have precedence.

<link rel="stylesheet" type="text/css" media="all" href="general.css"> <link rel="stylesheet" type="text/css" media="screen" href="screen.css">

In this example, a general style-sheet is loaded for all media, and then a specific screen-based sheet loads over the top. The first sheet's rules still apply, unless the second sheet's rules contradict.

How to write in style

Like HTML, CSS is written in plain text that can be viewed and edited in any text editor such as Notepad, Emacs, or Simpletext. CSS rules can be applied to individually named blocks (named with the id="" attribute), to classes, or to general HTML elements. By adding conditions, CSS rules can be applied very specifically to your HTML documents. A typical section of CSS might look like this:

body { color: white; back-color: black; }

The rule above defines two properties on the body element. That is, it modifies the web browser's default way of drawing the content of the <body>...</body> tag. The two properties it changes are its foreground and background colours. So the syntax of a CSS rule is:

What to change { How to change it; }

As stated before, the item to change can be as broad as every single use of a tag on a site, or as specific as one single item, and there are many stages in between. To define a rule for an HTML tag, you simply use its name without the angle-brackets. You can create a rule that applies to more than one element by separating them with commas, like so:

p, li, td { color: black; }

To define a rule that applies to a class (that is, the contents of any tag you have given the attribute class="classname"), give the name of the class preceded by a full-stop (period, dot, one of these: .):

.specialoffer { color: red; }

The above rule will make the foreground colour (basically the text colour) of any element of the class "specialoffer", red. You can apply rules to individual IDs too, by putting a # before their names in the style-sheet. You can mix and match these and specify more than one to a rule as above:

.specialoffer, #menu, tt { color: red; }

Remember that you can have as many items in your HTML that use a certain tag or class, but if you name something with an ID, the name must be unique to that document. That is, you can have many <li> items and many <div class="journalentry"> items, but only one <div id="maincontent"> per file.

Even more specific

You can chain elements or classes together to build a rule that only applies to one element that appears inside another by listing them both with a space in between. For example to apply special properties to an unordered list, but only if it is inside another list, use the following rule:

ul ul { list-style-type: square; }

You can use the above method to apply different rules to the same class of item depending on where it is in a document. And you can also specify rules that overlap; the furthest rule down the style-sheet is applied. For example:

p { color: green; background-color: black; } p .specialoffer { color: red; } li .specialoffer { color: blue; }

In the above example, all paragraphs will be given a black background and green text, except for paragraphs of the "specialoffer" class (i.e., <p class="specialoffer">...</p>) which will have red text (but still a black background). List items of the specialoffer class will have blue text, but no background colour has been specified for them.

Pixels, hex triplets and ems, oh my!

CSS properties use a variety of units. The most important ones to know are:

Relative sizes in percent (symbol: %)

Percentages are relative to the containing block and can go above 100%. For example to make top-level headers twice the height of normal body text: h1 { font-size: 200%; }

Relative sizes in EMs (symbol: em)

An em is the height of an upper-case M in the current font and font-size of the containing block. Ems are better supported by printers than by screen devices, but they are still a useful measuring unit. To specify a unit in ems, put "em" directly after the unit, i.e., 1.4em

Relative sizes in pixels (symbol: px)

The pixel unit isn't recommended except for screen-only style-sheets because its size can vary so much according to the device in use. Many browsers will translate pixel sizes from screen to print, but you cannot rely on this. Specifying a 1px border to a box might end with a printed line 1/600^th of an inch wide on a modern printer and an old web browser! Pixel units are still useful for very precisely positioning items on screen-based layouts, however.

Absolute sizes in millimetres, centimetres, inches, points and picas (symbols: mm, cm, in, pt, pc)

Point-sizes are useful for giving absolute font sizes, like most word-processors do. 1pt is 1/72^th of an inch, 1in is 2.52 centimetres, and 1cm is 10mm. A pica is 12 points, and the unit is 'pc'. Since you cannot easily be sure of the size of the output device — computer screens come in different sizes, printers use different sized sheets of paper across the world (letter vs. A4, for example) — you should avoid using absolute sizes (and relative sizes in pixels) wherever possible.

Hexadecimal colours (triplets)

The most common way of defining colours for the web, this is the method that HTML used to use before CSS replaced its layout functions. A hex triplet looks like #FF00FF (or #F0F for short) and is actually three values for red, green and blue (FF, 00 and FF). Specifying just three digits has the effect of doubling that digit (so #010 becomes #001100). 00 and FF are 0 and 255 in hexadecimal notation. God only knows why this method became so popular; it's hardly the easiest way for humans to specify a colour.
Most HTML editors and many image editors will let you choose a colour visually and give you back the hexadecimal value. #000000 is black, and #FFFFFF is white. If you use a recent version of Photoshop you can right-click (or option-click on Macs) with the eye-dropper tool to copy the "HTML colour" to the clipboard. Hex-triplet colours are also shown in the photoshop colour-picker.

RGB colours

Technically the hexadecimal numbers above are also RGB colours, but these are a little more human-readable. The numbers still go from 0 to 255, or 0 to 100%, with 0 being darkest and 255 (or 100%) being brightest, however you write an RGB colour in the following way:

RGB(0, 20, 128) or RGB(0%,10%, 50%)

You specify red, then green, then blue values. Again, image editors and paint programs will show you RGB values for colours. There are many charts on the web with lists of "web-safe" colours with their RGB and HEX colour values.
If you use Windows, you can find a colour-picker that shows RGB values by right-clicking on the desktop, choosing "Properties", then "Appearance". Click on the coloured rectangle to choose a new colour and note down the red, green, and blue numbers. Don't forget to hit "Cancel" afterwards though; unless you want to change your desktop colour!

Named and system colours

Technically there are only 16 named colours: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white and yellow. They pretty much all look horrible, but they'll look exactly the same kind of horrible on just about every web browser (except the monochrome ones of course). However most modern browsers also know the names of the old HTML 3 colours, and you can also tell the web browser to use the system colours of the operating system in use (Windows/Mac OS/etc).

Generally speaking, if you want to be sure that every browser understands which colour you're referring to, you should give actual colours in RGB or HEX form, but these named colours can be handy (and the system colours can be really good for writing sites for people with special needs, or even if you just want to have fun and try to make your website look like a part of the operating system).

Comments

You can add comments to your style-sheets to remind yourself (or to explain to others) what you're doing with each rule, or what each class applies to in your website. CSS uses "C-style" comments, which begin with /* and end with */. Comments can be as lengthy as you like, but remember to close them with */ otherwise the browser will just assume the whole of the rest of the style-sheet is one big comment! The Bob's Bits example site style-sheet is heavily commented so you can see what each section is for.

/* This is a comment that takes up two lines */

Lazycat.org | matt robinson