Global CSS Styles

We can use general document styling to apply CSS styles to our entire web page, and it will filter down to all elements within the page unless it is overridden within an individual element. A great example of this is when we want to apply the same font to every element in our web page. Rather than having to set the font for each individual element - our headings, paragraphs, tables and so on - we can just set the font once for the entire document, and all of these elements will adopt it unless we tell them to do otherwise.

To set a general CSS style we need to apply that style to the page's <body> tag. Since our body tag contains all visible elements of our web page, any styles we apply to it will apply to everything within the visible page.

Taking the font example discussed above, we could set the font for the entire web page to be Arial and sized 1em by using the following style declaration:

body {
	font-family: arial;
	font-size: 1em;
	}

This setting would then filter down into all of our page elements. This is a very useful feature of CSS because it allows us to keep the amount of repetition in our stylesheets down to a minimum, which helps readability when we come to edit the styles, and also keeps the stylesheet's file size down.

We can easily over-ride this default setting for individual elements. For example we might decide to make our <h1> heading tag appear larger, so we could use the above CSS in combination with the following code:

h1 {
	font-size: 1.3em;
	}

Our <h1> tags would still inherit the Arial font we defined within the tag, but the default size of 1em would be over-ridden, and our headings would appear in 1.3em instead.