An Introduction to Cascading Stylesheets (CSS)

Cascading Stylesheets are a very important part of modern website design. In short, CSS is markup used to store styling information for websites. Together with the elements and data from a webpage, these stylesheets work to build a visual layout from basic text. They help to improve the load speed of webpages as well as making it easier for website designers to create and edit webpages.

In this quick tutorial we'll cover the basics of Cascading Style Sheets and we'll find out just how they can help you to create modern and efficient websites.

What are Cascading Stylesheets?

Cascading Stylesheets, commonly referred to as CSS, is the coding language that allows browsers to present markup from a webpage (any HTML or PHP page you visit, for instance) in what ever way a designer may choose. An HTML page presents all data to a browser, while most, if not all, styling and presentation information remains in a separate CSS file that also gets passed to the browser. The browser then uses the styling information inside the CSS file to render the content the intended way.

Why do we need Cascading Stylesheets?

CSS files help to separate content from presentation by keeping the two in separate files. This may not seem important at first, but after dealing with the two for a period of time, you can see that it is important to keep them separated. An important reason for this division is to allow the use of a single CSS file on multiple pages, as styles are usually shared between every page of a website. A visitor's bandwidth is spared, as they only have to download the styling information once, instead of downloading both presentation and content on each page load.

Example CSS Code

For example, an HTML page is presented to the user, and looks as follows:

<!DOCTYPE html> <html> <head> <title>An Example Website</title> <link rel="stylesheet" href="/path/to/our/css-file.css" /> </head> <body> <div id="header">The header</div> <div id="content">The content of your page</div> <div id="footer">The footer</div> </body> </html>

This HTML page tells the browser to call our css file /path/to/our/css-file.css and to use it as the webpage's stylesheet. It then presents some elements and data for the browser to use.

Our CSS file css-file.css could contain the following:

body { background:blue; } div { color:#fff; } #header { background:red; } #content { background:#fff; color:#000; } #footer { background:rgb(0,0,0); }

This would tell the browser to render our content as follows:

The body element (which is the whole page) with a blue background
Every div element with white text (because #fff = white)
The header element with a red background
The content element with a white background and black text (because this color attribute is more specific and overrides the previously defined color attribute on the div selector)
The footer element with a black background (because rgb(0,0,0) means black)

And it should look a bit like this:

The header

The content of your page

The footer

It's not the prettiest thing, but it shows you how CSS files work! There are many, many more examples we could show you but now's not the time for that!

CSS Tips

Before you pick up some bad habits and force yourself to relearn everything again in a few months time, here are some things you should keep in mind while creating your HTML and CSS files:

Get into the habit of separating CSS and HTML from the very start - create a separate CSS file and write all styling information into it instead of in your HTML page.
When possible, never use inline styles such as <div style="color:red;font-size:14px;">. Instead, use CSS classes and external CSS files.
Try to use classes instead of IDs so you can share styling information between different elements without referring to each individually.