Web Design Small Cover

Buy the PDF of
Web Design:
A Complete Introduction

See the book at amazon.co.uk or amazon.com

Related Site

Web Security Topics

Related Books

Secure Communication Cover

Securing A Server Cover

Tips on Markup and CSS

Counteracting the Default Stylesheet

Browsers use a default stylesheet to display documents that do not provide their own: the default stylesheet causes pages to be displayed in the once-familiar style featuring blue underlined links, huge bold level 1 headings, and so on. This stylesheet is part of the cascade that gives CSS its name. Its values are used for any properties that you don’t specify explicitly. It’s easy to forget that this is happening, and, for instance, to set the size of h1 elements to something more reasonable, only to find that your h2 elements come out bigger than them. A simple way to make sure that the defaults do not apply is to use a rule with * as its selector. This will match all elements, so you can reset all font sizes and spacing like this:

* {
    font-size: 100%;
    margin: 0;
    padding: 0;
}

This gives you a clean slate, and ensures that any elements for which you don’t provide rules will use your default font size and no extra spacing.

Margins and Padding

CSS 2 does not provide any way of using arithmetic expressions as the value of a property, so you can’t use dimensions such as 14em + 40px, which combine units. As an example of why you might want to do this, consider floating a navbar to the left of a page, supposing that the navbar links are text, not images. You will want to specify the width of the navbar in em units, so that it will expand to accommodate the links at larger font sizes. Following the advice in the book, you could set padding on the left of the body element, and use a negative left margin on the floated navbar to move it out into the padding area. Suppose you set the body’s padding to 14em, and the width of the navbar to 12em, and gave it a left margin of -13em. The navbar will sit 1em in from the left edge of the browser window, with a 1em gap between it and the main body text.

Now suppose a user makes the browser’s font larger. The navbar will get wider, as it should. It will also move away from the left edge of the window. This is a waste of screen space, and may also be disconcerting – it just doesn’t look right when the leftmost edge of text doesn’t stay put. What you would really like to do is set the left margin to something like `-14em + 40px’. The -14em pushes the navbar all the way to the left of the window, then the 40px moves it back in a little way, so that it doesn’t look cramped. When the font size is increased, the left edge of the navbar will stay where it is, 40px from the edge of the window.

You can’t do this in CSS2, but while you are waiting for browsers that implement CSS3, you can achieve the same effect, by splitting the two parts of the desired offset between margin and padding, like this:

#navbar {
    margin-left: -14em;
    padding-left: 40px;
}

Provided there is no border, there is no visible difference between space in the margin and padding. You can use a similar trick to combine fixed and variable units in many other contexts.

Spelling of CSS Properties and Values

If you live in a part of the world that employs the conventions used in Britain for English spelling, instead of those used in the United States, sooner or later you will probably find yourself trying to set the value of the background-colour property, or set an alignment to centre. It won’t have any effect, because CSS always uses American spelling. Although this is obvious and documented, it remains an easy mistake to make, and can lead to perplexing behaviour. There are two simple steps you can take to stop this happening. The W3C’s CSS Validation Service will catch such errors. You can more easily avoid making them in the first place if you use a CSS editing tool that allows you to select property names and values from a list, or applies syntax highlighting – the incorrect names will not be highlighted, because they won’t be recognized as CSS reserved words.

When you use an absolute URL in a link, you must include the http:// prefix. This should hardly need saying, but we are all getting so used to being able to type a bare domain name into the browser’s address bar, that it is easy to assume that you can get away with doing the same in other contexts, such as the value of an href attribute. You can’t. If you leave off the prefix, the browser treats the rest as a relative URL, and inserts the URL of the current directory in front of it, in the usual way, leading to links pointing to URLs like http://www.desperatesw.co.uk/www.webdesignbook.org. If you can’t be careful, use the W3C link checker, or some utility that performs the same function.

Be careful when pasting URLs into an XHTML document. If a link includes a query string with more than one value, it will have ampersand characters in it. (Look at the URL for an Amazon product page, for instance.) If you just copy the URL to the clipboard and paste it in as the value of the href attribute of an a element, you will end up with an invalid document, because XML, and hence XHTML, does not allow unescaped ampersands anywhere, including in attribute values. You must replace each & in the query string with the character entity reference &. Any HTML editor worth using will provide a command to do this for you. For instance, in TextMate, select the URL and use the Convert Selection to Entities command in the HTML bundle.