CSS Global Styles

We can apply CSS styles, via general document styling, to an entire web page.

This filters down to every element on the page in the case that it is not overridden within an individual element.

For example, this is observed when we want to apply a single font to all the components present on our web page.

We can simply set the font once for the whole document, and all the elements in the report will use it unless we make add styling to do otherwise.

This saves us from setting the font for all elements, such as paragraphs, tables, headings, and other repetitive elements individually.

If we want to set a general CSS style, we must define that style in the <body> tag of the page.

We know that body tags contain all the visible elements of our web page.

Therefore, any styling we apply to the tag will also be inherited by all the tags within it – those mentioned above – and displayed on the page with that styling.

By using the declaration below, we can set Arial with size 1.6em as the font for the whole web page:

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

Then, this setting will filter down into every element of our page.

This removes tons of repetition that would be required – i.e. defining the above for every single element in the body, hence an incredibly useful CSS feature.

Less repetition improves readability when we are editing the styles and keeps the stylesheet file size small.

Also, this default setting is easy to over-ride for individual elements. For instance, if we wish to make our <h1> heading tag larger, we can use the CSS as mentioned above in combination with the following code:

h2 {
font-size: 1.8em;
}

We only overrode the default size of 1.6em and did not touch the Arial font we had defined within the <h2> tag.

Our headings will still have the Arial font, but they’ll now appear in 1.8em font size.