What is CSS?

Cascading style sheets are files that contain the rules for the presentation of web content.

You can use CSS to apply styles across a whole document, or set of web pages, or use it to target a specific tag, nested in amongst many others.

We use CSS to keep the presentation of our web documents separate from their underlying structure. Semantic markup doesn't need to have presentation within in (written inside the HTML as inline styles) because it is a pain to maintain and irrelevant to those who use assistive technology to interact with your page's content.

Applying classes and IDs

CSS is pretty powerful. However, with power comes responsibility, so we need to be quite smart about how we apply it to our HTML documents.

Hooking up the correct files

Remember that article about setting up a small web project? Well, assuming you have a folder set up as explained, you should be able to drop in the correct files and set up your HTML file with a link tag that calls your stylesheet. Here's a reminder, anyway:

The cascade

Styles cascades, so any style you apply to a tag, like <div> or <p>, will apply to all the same tags across your whole site.

To maintain a sense of control when styling our documents and their content, we can use two types of attributes on our tags: the class and the id.

Classes

When we know that multiple aspects of our HTML require similar styling (maybe some elements can inherit the same background colour or text size), we can use the attribute called class.

If you have some boxes that need colouring you could give all those that require the same margin and padding, a class, like 'panel'.

Ids

ids are really powerful. They enable us to specifically target an element on a page, overruling any existing styles it may already have.

They are also unique. If you call an id 'button', then only one of them can be present on the page.

Use ids sparingly. If in doubt, use a class and hope that you can use it somewhere else to avoid unneccesary repetition of styles in your CSS file.

Naming

Naming classes and ids can be tricky. It pays to use sensible, easily readable names that mean something to what styles the element will receive. Using descriptive names (avoiding direct references to how the style appears, like its colour) makes your life easier and the life of the person who may have to pick up where you left off.

To name a class, write the following inside any tag: class="myclass"

To name an id, write the following inside any tag: id="myid"

To give a tag multiple classes, write the names separated by a space: class="firstclass secondclass". This method means your names cannot have spaces, otherwise they will be misinterpreted as separate classes.

It's up to you how readable you make your classes or IDs. You can write them without spaces: class="myclass"; with hyphens or underscores (to signify spaces): class="my-class"; or in 'camel case' style: class="myClass".

Whatever method you use, be consistent.

Here's an example of classes and IDs applied to various HTML tags:

It isn't necessary to give a class to every tag on your page. On lightweight pages you may get away with assigning styles directly to tags, without using a class or id.

However, as a project grows and the demands imposed on your presentation get heavier you will need to be careful about how you apply classes to control the look and feel.

Now's the time to move onto the CSS rules and logic article, which will explain in more detail how to target tags, classes and IDs and how the application of some CSS rules works.