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:

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:

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:

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

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:

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:

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.

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:

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

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

and

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

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:

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

Colours

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.

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:

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:

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

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

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

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:

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

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

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

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.

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 ¹⁄₇₂ of an inch

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.

Positioning

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:

and this line in the page:

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.

Examples

1) A simple example of setting margins:

which can be reduced down to:

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

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

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:

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:

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:

and then create a page containing something of the form:

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:

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:

with lines like this on the page:

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

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