Understanding CSS rules and logic

How CSS works and briefly, what it can do

On this page:

How to target tags, classes and IDs
CSS rules
Working with colour
Margin and padding

How to target tags, classes and IDs

Critical knowledge

You can style your content by targeting elements in one of three ways: HTML tags; classes or IDs. We'll use this HTML as an example:


									
										<div class="panel" id="userAccountBox">
										<h3>User account</h3>
										<p>Control your settings and look after your account</p>
										<ul>
										<li><a href="">Account settings</a></li>
										<li><a href="">Personal details</a></li>
										<li><a href="" class="logout">Logout</a></li>
										</ul>
										</div>

Our first example

Target: element

Before we get into the detail, there is one more thing to be aware of: structuring our CSS. For each and every element, class or id we wish to give style to, this is how we write it:

The bare bones of a 'CSS hook' ready to receive some style

The div is where we would write the tag name (like this example), or class or ID. The curly brackets hold the styles that this 'div' should receive. The ellipsis is where our CSS rules will go. There is more detail on structure, later on in this article.

For every style we add to our CSS file, we just put after the existing ones. It pays to keep the styles in an order that loosely matches your HTML document's flow of markup, start with body, then h1, then p, then your classes. For example:

A brief example of ordering your CSS

You've seen how we target a tag in the previous example, so let's demonstrate other methods.

Target: class

Staying with our first example, this is how we would target the class rather than the tag:


									
										.panel {
										...
										}

It's the dot wot does it

Assigning styles to a particular class name requires that we preface it with a period and only a space between it and the opening curly bracket.

Target: tag with class

If we wanted to be specific about targeting only <div>s with the class panel we could do this:


									
										div.panel {
										...
										}

Narrowing down the target

See how the tag name precedes the period and the class name? By using this method, we've narrowed the target and the styles will only be applied to <div>s with the class of panel.

This can be a useful method, but you're encouraged to create meaningful class names so as to avoid this unnecessary level of detail when targeting elements and avoid further difficulties when editing the CSS at a later date.

Target: id

If we want to target the <div>'s id, we just do this:


									
										#userAccountBox {
										...
										}

Bullseye

Instead of using a period, we use the number symbol (or, in digital patois, the hash sign). For any id that requires specific styles for just that element, this is how we target it.

If you have styles applied for an element with a class and an id, any attributes that match (of which we'll get onto later), like background-color or margin, will be trumped by the id. That is to say, style applied to an id will overrule any existing styles assigned via a tag or class. This is a prime example of the rules of the cascade – the final 'hook' in the flow of styles, takes the prize.

Target: element inside another

The broad method is to target all tags that match. In the example below all <p>s inside all <div>s will gain the styles we apply here. Note the use of spaces to separate our targets.

Getting specific

Target: element inside another

If we only wanted to target the <p> of our first example, we can use the id of its parent (the <div>) to narrow down the target.


									
										#userAccountBox p {
										...
										}

Getting specific

View the CSS targeting demo

Leaving a comment

Sometimes it can be helpful to leave very brief comments in your CSS, to help you and others that edit it to know what they're editing. Write your comment surrounded by forward slashes and asterisks. Here's an example:


									
										/* My brief comment */
										div.panel {
										...
										}

It's purely for reference and won't affect the CSS output and will generally be greyed out in your code editor.

You could even use comments to temporarily 'turn off' parts of your CSS. This can be useful when you don't want to delete styles during your design and/or testing process. However, if pays to clear out any unused styles once you're ready to release the CSS for launch.

Wrap the styles you don't wish to work, like so:


									
										/* Don't need this style
										div.panel {
										...
										}
										*/

Hide that style

CSS rules

Assigning CSS rules to targets

There are quite a few CSS rules available for us to use. This section attempts to show a few of the most commonly used ones to help explain the logic that makes them work. The next article (How some CSS rules work) covers them in much more depth.

First, write the rules and their values correctly

There are few critical things to note when we write CSS, otherwise, if we don't, we'll just get errors in our files and web pages.

Always wrap your rules in the necessary curly brackets: { and }
Write the rule, a colon directly after and then a space, like: font-size:
Write the rule's value(s) and finish that line with a semi-colon, like: 1.2em;
Start a new line for every new CSS rule.

Here's an example:


									
										body {
										background-color: #fff;
										color: #333;
										font-family: Helvetica, Arial, Verdana, sans-serif;
										font-size: 1.2em;
										margin: 0 0 1em 0;
										padding: 1em;
										}

Adding style to the <body> tag is about as broad as you can get.

Second, keep them in some kind of order

I find it's best to keep them in alphabetical order. This means it's reasonably easy for someone else to pick up your CSS if you're not around to guide them.

The only alternative I can offer to this approach, is to separate layout CSS rules from typographic and shape CSS rules. This can lead to some confusion as you'll end up with multiple, identically named targets, doing different things for the same element and/or class or id. Best to put them in separate files, like layout.css and presentation.css if only to help you when testing and editing.

There is no right or wrong way to do this. I suggest you follow whatever has come before you, unless you're undertaking some sort of clean-up or takeover operation across your digital output!

Working with colour

Hexadecimal

Hexadecimal is the standard way to write CSS colours and is interpreted by all browsers, even the really old ones. Essentially each pair of digits mirrors the RGB colour palette, like this: RR, GG, BB. You can easily get hexadecimal references from Photoshop's colour palette. Just look for the # character and watch the output as you move the cursor around the colour palette.

In the following examples we use color, which colours any text elements when applied to a tag, class or id. The other option is background-color which allows you to fill that element with a colour.


									
										color: #ff3300;

Writing colour with hexadecimal values

You can abbreviate hexadecimal references but only if their pairs match, like so:


									
										color: #f30;

Writing colour with truncated hexadecimal values

RGB

You can also write colours using the RGB method:


									
										color: rgb(255, 51, 0);

Writing colour with RGB values

Each number is one of the RGB channels. First is red, then green, then blue. Use Photoshop's colour palette to get accurate values for the colours you choose to use, being careful to write them in order, inside brackets.

RGBA

A bonus to the RGB method is the addition of an alpha channel. Only modern browsers support this, but thankfully their usage is only increasing, so feel free to use this technique.

It essentially allows us to control the transparency of the colour by adding a fourth section inside the brackets: opacity. It can be anything from 0 to 1. 0 is transparent, 1 is opaque.


									
										color: rgba(255, 51, 0, 0.5);

Writing colour with RGBA values. This colour will look slightly different as its opacity is set to essentially 50%.


									
										color: rgba(255, 51, 0, X);
										
									
										
											1
											0.9
											0.8
											0.7
											0.6
											0.5
											0.4
											0.3
											0.2
											0.1

A working example of the RGBA method, where X signifies the value written in the output section.

Accessibility

We have a responsibility to make sure that the colours we use on our digital projects are accessible. Colour contrast is an important topic, and for visitors with poor vision, or colour blindness, we need to make sure background colours and text colours offer high enough contrast, otherwise things can be unreadable and consequently, unusable – even for visitors with good vision.

Use Firefox and its Color Checker add-on to help check the colour contrast of your digital work. It can tell you whether your choices are good enough against industry-agreed standards.

National Trust colour palette

Using the National Trust's colour palette for digital projects is quite simple. However, there are a few swatches that have been modified to accommodate better colour contrast. Take a look at the article about the National Trust's colour palette.

Margin and padding

Outside and inside the box

The CSS rules margin and padding enable elements to create space internally and externally of themselves.

All block-level elements can have margin and padding. In fact, even inline-level elements can but sometimes need additional work to make them behave as expected. We'll stick with the easy stuff first.

Both margin and padding can be applied to the top, right, bottom and left of any object. Applying margin to an element, will push surrounding ones away from it. Applying padding to an element will increase the space between the true edge of the element and its content, like text.

The following example demonstrates the areas at work:

Demonstrating margin and padding — Check my areas, man.

The blue box with the solid border is our object. This could be any block-level element like a <h1> or <div>. This object has padding applied, 20 pixels on all sides.

That padding is pushing the element's content away from its edges – the white space indicates the area that the content will sit in.

The yellow area in the diagram signifies the element's margin. This element has 20 pixels of margin applied to all four sides.

Writing the margin and padding values

Here's the CSS that would need to be written for this to work as illustrated. Let's assume it's applied to an <h1>:


									
										h1 {
										margin: 20px 20px 20px 20px;
										padding: 20px 20px 20px 20px;
										}

Writing the CSS rules.

Note: There is a particular order to the values of margin and padding: top; right; bottom; left. The order is clockwise, from the top of the element.

Simplifying the values if the same

But, that's a little convoluted. As we know all sides are equal we can write the CSS rules like so:


									
										h1 {
										margin: 20px;
										padding: 20px;
										}

Writing the CSS rules.

This means all sides, top, right, bottom, left, are the same so we can just write one value.

Abbreviating CSS values

Similar to colour pairs, you can also abbreviate margin and padding values, but only if top and bottom are equal and left and right are equal. Here's how you could write that:


									
										h1 {
										margin: 20px 0;
										padding: 0 20px;
										}

Abbreviating the CSS rules.

So, in that example, a margin of 20 pixels will be applied to the top and bottom, with no margin on the left and right. Our padding, works the other way round: no padding on the top and bottom, but 20 pixels worth on the left and right.

The rules explained above have been put into the image below and it shows how your element would behave with those values:

The yellow areas show the margin area – 20 pixels on the top and bottom of the element. The blue areas show its padding on the inside (the solid border signifies the true area of the element, remember). Again, the value is 20 pixels, but only on the left and right sides. The white area is where the element's contents will sit.