Producing web pages
HTML CSS DHTML XHTML A to Z of tags        Accessibility          Design

What does a style sheet look like?

A style sheet is a file that tells the browser how to display your web pages. It contains formatting instructions for common HTML tags such as paragraphs, headings, lists, tables and so on.

Here's a very simple style that makes level one headings appear in blue:

h1 {color: blue;}

Each style is made up of:

  • A selector usually an HTML tag such as <body> or <p>. In our example, the selector is the <h1> tag
  • The property that you want to apply to the tag. Some of the properties (like color) apply to most tags; others apply to just a few tags. In our example, the property is color
  • A value for the property such as blue for the colour or Arial as the font

You must get the syntax right. Each style starts with a selector followed a property inside curly brackets { }. Each property is identified by the property name, followed by a colon and the property value.

Don't add a space to the syntax where you don't need one. For example:

p {margin-left: 50  px;}

You don't need a space between the 50 and the px. If you put one in, the syntax isn’t valid and you won't get the margin.

You can enter more than one property; just use semicolons to separate them.

h1 {font: "Arial"; color: blue;}

This tells the browser to display a level one heading in Arial and to make the heading blue.

This is the basic syntax of a style sheet. It tells you how to set up a style for a tag but you can also do some more sophisticated things such as create style variations for a single HTML tag. If you are interested, see Using selectors for details.

There are lots of properties to choose from. Look at How to use CSS properties for a list and some examples of how to use them.

You also need to know how to add style sheets to your pages.