8. Stylesheets

A stylesheet is a text file containing additional instructions for a browser, telling it how to modify its default behaviour. This allows you to arrange a page in exactly the way you want. Whilst an HTML document holds the contents of a page, a stylesheet determines its presentation.

It’s best to use the same kind of text file as for pages in HTML, usually UTF‑8 with LF codes for new lines. Note that the actual content of a stylesheet file is entirely different and should have a filename extension of .css, relating to its purpose as a Cascading Style Sheet (CSS).

As previously mentioned, the head element in all your pages should contain something like this:

<link rel="stylesheet" href="styl.css"

If your web page is in a separate folder that's ‘below’ that of the stylesheet, you’ll have to modify the reference, as shown here:

<link rel="stylesheet" href="../styl.css"

where ../ indicates that the stylesheet is at one ‘level’ higher. When using a folder for the stylesheet and other files common to all your pages, you can use something like this:

<link rel="stylesheet" href="../style/styl.css"​

where style is the name of the folder containing your stylesheet and other common files.

Ideally, you should use one stylesheet for your entire website.

Inside a Stylesheet

Each entry or ‘line’ in a stylesheet determines the behaviour of a specific element within the pages that are linked to that stylesheet. Here’s an example:

body {
margin: auto;
max-width: 90vw;
background: #eeeeee;
font-family: "georgia",​"times",​"times new roman",​serif;
font-size: 1rem
font-weight: 100;
color: #333333;
text-decoration: none;
font-style: normal;

Note that all the stylesheet parameters for the body element shown here are enclosed within curly brackets, and that the end of each set of attributes is delimited by a semicolon (;).

Not all of these entries are required, but the more you specify, the more closely the page will look as you want in all browsers. The styles shown above are for the body element, so most of these automatically apply to other elements. For example, a p element, being a child of the body, inherits many of the styles applied to its parent, the body itself. This cascading effect of styles being passed down from parent to child elements is what gives stylesheets their name.

In the above example, margin and max-width set the page centrally with a maximum width of 90 percent of the viewport width (vw), the width of the window used to see the page, and a background colour, slightly off-white, given as a hexadecimal number with a # prefix. The preferred font is Georgia, with Times or Times New Roman as alternatives, in descending preference, with the browser’s default serif font as a last resort.

Also, the font-size is given as one root em (rem), matching the default root font, with a font-weight of 100 (the same as normal, with 900 being the same as bold), the text color, again in hex, as slightly off-black, text-decoration of none (otherwise underline, overline or line-through, with other options) and font-style as normal (otherwise italic or oblique).

It isn’t essential to use the ‘formatted’ style shown above. If preferred, you can use an ‘optimised’ form of stylesheet, in which extra spaces or tabs are removed, as shown below:

body{margin:auto;max‑width:90vw;background:​#eeeeee;font‑family:​"georgia","times",​"times new roman”,serif;font‑size:1emfont-weight:100;color:#333333;text‑decoration:none;font‑style:normal;}

As with HTML, spaces, tabs, carriage returns and other control characters have no meaning, although their inclusion can make the content more readable. Removing any such characters may speed up page loading, but only marginally.

This document gives only broad outlines of what can be done with a stylesheet. For further details on each parameter you should refer to the World Wide Web Consortium website and other online resources.

IDs and Classes

You may need to treat some elements differently, according to where they are on a page. For example, you may have two div elements that need to use a different font. Such elements can be identified by means of their id, the same as used for bookmark links, or by using a class identifier. To use an id, which can be used only once on a page, enter HTML like this:

<div id="main"

and then add a line such as this in your stylesheet:

#main {background-color: white;}

To use a class, which can be used multiple times on a page, you can enter:

<div class="main"


div.main {background-color: white;}
Generally speaking, the use of class is easier than id, since you don’t have to worry about the number of times a specific style is going to be used in a page.

You can also use variation classes, which apply to any kind of element, such as these lines:

.red {color: #993333; font-style: normal;}
.inset {margin-left: 5vw;}
.top_space {margin-top: 1.2rem;}

which set the font to a shade of red for any element whose class="red", insets the margin for anything of class="inset" and increases the top margin for anything of class="top_space".

Various other combinations can be applied, as in:

.special span {...}

- any span element in any element whose class="special"

.special .address {...}

- any element of class="address" in any element of class="special"

div.main p {...}

- any p in a div element with class="main"

div.main p.special {...}

- a p of class="special" in a div element with class="main"

where {...} contains the attributes you want to set.


Element colours can be specified in one of four ways, as shown below for the colour red:

  1. color: red- colour name
  2. color: #ff0000- hexadecimal (hex)
  3. color: rgb(255, 0, 0)- red, green, blue (RGB)
  4. color: hsl(0, 100%, 50%)- hue, saturation, lightness (HSL)

There are 17 names for basic colours and 130 for more subtle shades. Even so, in order to obtain the finest control of colour, it’s better to use hex values, and probably easier than remembering all 147 colour names. And if you prefer working in decimal, you can use RGB.

The shade of any colour in hex is in the form of:


where rr is the red value, gg is green and bb is blue. Pure red is #ff0000, for example, #000000 is black and #ffffff is white. It’s a good idea to experiment with some values to see the effect.

Text and other elements on a web page are best in a very dark colour on a very pale background, or very pale on a very dark background. The use of mid-tones can make your website hard to read, or, if a visitor is using a browser in ‘dark mode’, even impossible. Pure colours are also best avoided: look at government and other official sites to see how colours are best used.

Setting Dimensions

Fonts on a web page need to be of a size that makes them clear and readable, irrespective of the size of the viewport, the screen area used to view the page. In addition, many elements, such as padding, borders and margins can be made font-related, so as to match the size of fonts.

Other elements, such as images and the widths of blocks of text, need to be viewport-related, adjusting their sizes with that of the viewport. Ideally, all values, horizontal and vertical, would be set so that the browser adjusts them to suit the viewport size. But even with such HTML responsive web design the appearance of any site will vary when viewed on different devices.

Font-Related Sizes

Fonts are often measured in ems, where one em is the height of a letter ‘M’ in a standard size of font. So, for a font twice normal size you can enter 2em, and for half size you can use 0.5em. Virtually all browsers default to a font whose size corresponds to 16 dots or pixels. On an old-fashioned screen with a resolution of 72 dpi (dots per inch), the actual font size is:

16 ÷ 72 = 0.22 inches

Even with modern displays having a resolution of four times 72 dpi or more, the font is still displayed at this size, albeit smaller on mobile devices. As the smallest or root size of font it’s rather large and doesn’t relate easily to font sizes measured in pixels. For this reason it’s a good idea to redefine the root size by incorporating a line in your stylesheets of the form:

html {font-size: 62.5%;}

This results in a new root size of 10 pixels, since:

16px × 0.625 = 10px

One em is now equal to this size, so you can enter lines like this:

p {font-size: 1.2em;}
h1 {font-size: 2.4em;}

resulting in actual font sizes of 12 pixels and 24 pixels respectively.

Because many modern devices, including mobile phones, have a very high resolution, and therefore pixel count, fonts smaller than 12 pixels (or 1.2em with the above configuration) can be hard to read and should therefore be avoided.
The root size should never be specified as a fixed value, as in: html {font-size: 10px;}, as this prevents the user from choosing their own preferred font size.

The Difference Between em and rem

The use of em values can cause problems if a child element is nested inside another element. For example, setting the size of the font in a ul element like this:

ul {font-size: 0.75em;}

results in the font size of a ul within another ul becoming:

0.75em × 0.75em = 0.56em

which is probably not want you want. To fix this you could use an additional line in your stylesheet, such as:

ul ul {font-size: 1em;}

but an better solution is to use a ‘root em’ or rem to start with, entered as:

ul {font-size: 0.75rem;}

This means that every ul element is rendered in a font size of 0.75 em, relative to the root size, not the font size of its parent.

To avoid confusion, try to use rem instead of em throughout your stylesheet.

Other Units

Although font-related dimensions are best given in rem units, other units are commonly used, although probably best avoided. The units are, in order of preference:

  1. % - percent: percentage of the font size of the parent element
  2. px - pixels: designed to align pixels exactly with a display
  3. pt - points: each one equal to 172 of an inch
Note that px and pt values don't allow the user to adjust the viewing size of fonts and should therefore be avoided for setting any dimensions on a page.

Viewport-Related Sizes

These values are given using one of the following:

  1. vw - viewport width: percentage of the total width
  2. vh - viewport height: percentage of the total height
  3. vmin - viewport minimum: percentage of the viewport’s smallest dimension
  4. vmax - viewport maximum: percentage of the viewport’s largest dimension

where 50vw, for example, is equal to half the entire width of the viewport.

The Difference Between vw and %

The size of viewport-related elements can also be specified with

% - percent: percentage of the size of the parent element

which is perfectly legitimate, but may cause complications in the same way as using em.

To avoid confusion, try to use vw instead of % throughout your stylesheet.
With a very large or very small viewport, some elements can become impossibly sized in comparison to fonts. To mitigate against this, you can set min-width and max-width of these elements to suitable values.
The heights of many elements, including images, don't need to be specified in a stylesheet, since they are determined by the elements themselves or by their content.


The location of any element can be specified in relation to its parent. For example, the blue ‘blob’ at the very top of this web page is created using the following entry:

div.exit {
left: 0.8rem;
top: 6.2rem;
position: relative;

and this line in the page:

<div class="exit">
<img src="styl/exit.png" alt=""

giving the image at the required point. In this instance rem units have been used, since the image needs to always be in the same place, irrespective of viewport size.

Borders, Margins and Padding

Working outwards from the centre of a element you have:

  1. Content
  2. Padding
  3. Border
  4. Margin

Typically, both padding and margin are invisible, the padding allowing content, such as text, to be positioned within the border without getting too close to the border itself, whilst the transparent margin provides clearance between the outer edge of the border and other elements.

Everything in an element, apart from the actual content, can be omitted by setting these attributes to zero.


1) A simple example of setting margins:

p {
margin-top: 1rem;
margin-bottom: 1.2rem;
margin-right: 5vw;
margin-left: 8vw;

which can be reduced down to:

p {margin: 1rem 5vw 1.2rem 8vw;}

If all of the margins are to be the same you can use something of the form:

p {margin: 10px;}

2) A more sophisticated case, involving a table element:

table {
margin-top: 0.9rem;
margin-bottom: 1.8rem;
margin-left: 4vw;
border: none;
border-collapse: collapse;
border-width: 0;

In this instance there’s no outer border and the table’s own borders are collapsed to make a single border, with adjacent cells in the table sharing a border.

3) An entry for a ‘box’ designed to hold an image and other content:

image.box {
margin-top: 1.4rem;
margin-bottom: 1.6rem;
width: 60vw;
display: block;
margin-left: 5vw;
min-width: 27rem;

Occupying 60% of viewport width, this behaves as a block (any element can be redefined as a block or inline), has a left-hand margin of 5% of the viewport width and shrinks to no less than 27 rems wide when viewed on a small screen, as used in a mobile phone.

4) An h1 heading:

h1.block {
margin-bottom: 3.2rem;
background: #999999;
padding: 1rem 1rem 1rem 5rem;
font-family: "verdana", sans-serif;
font-size: 2.8rem;
font-weight: 900;
color: #ffffff;
text-align: left;

This creates a rectangular grey area containing large white text and extra padding to the left, as used for the text at the very top of this page.

Float, Flex and Element Behaviour

One of the simplest ways to position elements is to place a div within another div. For example, if we create a stylesheet containing this:

img.float {float: left;}

and then create a page containing something of the form:

<img class="float" src="picture.png" alt="..."
Lots of text, keep typing...

you’ll see the image to the top left, with the text flowing down to the right of it and then continuing underneath it. In this instance, the page could be simplified to:

<img class="float" src="picture.png" alt="..."
Lots of text, keep typing...

The use of float, which can be set to left, right or none, is only adequate for very simple pages. For better control of positioning you can use something of the form:

div.flex-container {display: flex;}

with lines like this on the page:

<div class="flex-container"

The flex-container entry lets lets you set the following options:

More details about flex can be found using online resources.

The default behaviour of elements can also be modified as follows:

display: inline;

- element in line with the text

display: inline-block;

- element in line with text, but with specified height

display: block;

- element is on its own line or positioned as specified in stylesheet

At this point you should consult the specifications of CSS3 in order to understand how stylesheets operate in more detail. A considerable amount of experimentation is recommended.