Introduction

In this section we'll introduce CSS (Cascading Style Sheets) and have a bit of a discussion on what they are and what benefits they bring to web design. A good understanding of why CSS is used will help you to write cleaner and more robust code.

What is CSS?

CSS is a language for describing the look and formatting of content. Usually this content is in the form of HTML however it is possible to be in other formats as well. CSS is organised as a set of rules that define how different parts of the content should be presented. The actual code looks like this:

selector {
property: value;
property: value;
}

• The selector identifies which parts of the content the rules should apply to. The rules that are inside the opening and closing curly brackets ( { } ) are applied to any items matching the selector.
• A property is an aspect of the presentation we would like to set.
• The value is how we would like the property to behave.
• A semicolon is included at the end of each property, value pair to separate it from the next pair.

CSS consists of a series of these blocks of rules. For each selector you may set rules for as many properties as you like. You don't need to set CSS rules for every piece of content on your page. Any content which doesn't have specific rules associated with it will be presented using default styling.

Let's have a quick look at an example of how this works. We'll discuss the properties in this example in a later section:

And now some HTML for it to be applied to:

And finally, the result:

In the next section we'll look at how we link the CSS to the HTML.

Cascading Styles

The C in CSS stands for Cascading. This relates to the way multiple rules may end up applying to a specific piece of content. For instance you may apply rules to a b tag and also apply rules to a p tag which the b tag happens to be within. In this scenario, the rules for the p tag will cascade down and also apply to the b tag. If there are any rule clashes then a priority scheme is used to determine which rule actually gets applied. eg. you may specify a color for p tags but another color for b tags.

We will discuss this further in future sections and it's significance should become clearer once you see it in action.

Separation of Content and Presentation

One of the main benefits of CSS is that it allows us to separate the code that defines the content (HTML) from the code which states how it should be presented (CSS).

Although it is possible to include presentation directly within the HTML, well written HTML aims to avoid this as much as possible. There are many benefits to be enjoyed when your code is structured to have as much separation as possible.

One of the biggest benefits is that we make maintenance of our pages much easier and less time consuming. If we put our CSS in a separate file and link that file to all our web pages (be it 10 pages, or 10,000 pages) then we may make any necessary changes to a single file and have those changes reflected consistently over all our pages.

Flexibility

Another benefit is that we may enjoy increased flexibility in how our content is presented. We may apply specific rules when the page is viewed on a screen but another set of rules to be used when the page is printed. We may also adjust the presentation for different screen sizes. This is how we may format our content in one way for someone viewing it on a larger desktop screen and in another way if they view it on a smaller tablet screen.

It is also possible for people to create their own personal CSS to override that of the original author. This is often done for accessibility reasons. For example, someone with a vision impairment may create a set of rules to increase the size of text on the page, or someone with colour blindness may override the colours for certain elements so they may identify them better.

Formatting of Code

You'll notice that in the code example above I have organised it in a specific way (I indented the properties one level from the selector. This is referred to as indenting and if you are already familiar with HTML I would hope you are already familiar with this concept. It is done to make our code as easy to read and maintain as possible. Similar to HTML, there is no specific way it is to be done. Pick a way that suits you best. Here are a few examples:

( Note: Anything inbetween /* and */ in CSS is considered a comment. It is ignored by the browser and there only for our benefit when reading the code. )

Get in the habit of indenting your code now and as you start to tackle bigger challenges you'll be very glad you did.

The Official CSS Standard

The official CSS standard, similar to HTML is managed by a group called the W3C (World Wide Web Consortium). A sub-group of the W3C is WHATWG (Web Hypertext Application Technology Working Group) and they have had input on the specification as well.

CSS, similar to HTML, is constantly improving and evolving. Major updates are identified by Levels. Each level tends to improve upon and extend the previous one.

CSS Level 1 is a good place to start in terms of learning CSS. The official standard may seem a bit daunting now but once you've worked through the next few sections of this tutorial you will find that it is actually not too difficult to navigate and make use of. I find it much easier to refer back to this document rather than try and remember all the different properties which are available.

Once you are comfortable with Level 1, moving up Level 2 and 3 and taking advantage of all the fancy new features available to you is not too difficult.

It is also possible to validate your CSS to make sure it meets the official specification. If you are having problems with your CSS then this can be a useful tool to identify possible problems.