Applying style across your HTML

Create styles with minimal effort for maximum gain

Now that we understand how to set up our HTML and CSS files and assign classes and IDs to the HTML page's tags we can start styling it all with the rules we learnt in the previous article.

Take the <body> tag. It holds all the good stuff of a HTML page, the stuff your visitors will see, read and interact with. Let's apply some styles to it.

Note: I recommend you use a reset stylesheet (particularly Eric Meyer's) to compliment setting up the CSS for your web project. This helpful addition flattens out all the browser inconsistencies that occur due to how they each render HTML tags, giving a solid foundation to work from.

This simple setup for everything inside the <body> gets you started on the road to mastering CSS across your web project.

See how we've put font-family right at the top of the cascade, inside the CSS rule for body. This is the place to set that kind of global style for your web pages.

Targeted styles

Moving on up – well, down, really as it's all about the cascade

As explained in the article about CSS logic it pays to keep some sort of order to the elements you apply styles to. Follow the structure of the HTML (basically the cascade: <html>; <body>; <h1>; <p> etc etc).

The next likely candidates for styling are the header tags (<h1> through to <h6>). Here you begin to establish the detail of your typography. Your CSS may look something like this:

Getting into the detail

As your website's markup expands, so too will its CSS. The more elements you add, the more you'll need to control their presentation – sometimes creating CSS rules that target nested elements without affecting others sharing the same tag or class name. This is where it can get complicated, so it pays to be quite direct in naming and targeting.

Using the previous example as a starting point, let's take the time to see how we can combine certain rules to cut down on repetition of styles in our CSS. Here's how we could write those styles that share similar attributes and values:

See the last set of targets? We've joined together three different elements so that they all inherit the attributes and their values written inside the curly brackets. You can use this method for any set of elements or classes that you wish to share the same styles, so as to avoid writing out the same attribute in multiple places.

Obviously you could give those headers the same class and target them using that, but I wanted to show you this particular method to broaden your knowledge and so that you can call on it if you feel the need to. You may come across it in CSS files that you are required to tinker with.

Keep it simple

Let's just run through the targeting of elements to clarify what we've learnt over the previous few articles.

Here's some HTML to get us started. Note how we have quite a few tags inside others:

Here's some CSS to make aspects of our favourites panel look good.

However, we've gone a tad overboard with our targeting. Here's how you can simplify it, stripping out unnecessary levels (effectively jumping through the cascade rather than telling the machines to go through it element by element) and why you should always try to standardise some of the most regularly used ones to avoid unnecessary duplication and overrides.

The first part for <div class="panel"> is fine. All <div>s with the class panel will have a light grey background, a bottom margin of 2em and some padding inside (around every edge) equal to 1em. I recommend though that you drop the div part and leave it as .panel.

Next up is the <h3>. Our targeting in our example above is unnecessarily specific. What we should have further up in our CSS file is something like this for all <h3>s:

Then we would, most likely, only need to override the colour for <h3>s that exist inside a <div class="panel">. Thus cutting down the amount of typing required!

Here's the way to target only the <h3> nested inside <div class="panel">.

This style will essentially override the same rule present further up the cascade. But only because we've targeted a specific element nested inside another.

Note: Remember, if you've established a <body> style, the colour for all text would be set there, right at the top of the cascade. Then all you need do is apply overrides for each specific instance (well, tag, class or id).

The next simplification is for the <a> tag. In the example above we made sure we targeted it through every available element – we don't need to this. Instead we can skip a few elements and get right to the point. Here's how:

The drawback with this approach though (remembering how the cascade works) is that we're now targeting every <a> that will be present in anything with class="panel". This may well suit us just fine. However, if you do need more specificity, then look at the flow of the HTML and use the cascade to re-write it:

Adding .subpanel means those anchor styles will only apply to <a> tags inside elements classed subpanel that are inside elements called panel.

Don't forget that you should have established more general, site-wide, styles to standard elements near the top of your stylesheet.

For the sake of website usability it is always a good idea to standardise anchors (links), so users know what to expect. However, in some cases, visually, you'll want to make certain nested <a> tags appear more subtly so as to fit in with more specific surroundings.

Standardise before you get specific

It pays to standardise as many elements on your website as possible. If only to cut down on repetition and complex nesting. That way you can stay on top of how you apply CSS to your website's elements.

Inevitably the CSS you write will grow and get more complex. As long as you remember the cascade and how you can easily apply styles to many elements with minimal targeting you won't really run into many problems.

Well, until you start playing around with using CSS to control layouts and element behaviours...