What is CSS?


Cascading Style Sheets

Now that you know what HTML is you probably are wondering how to make it a little more pretty. Imagine HTML is a blue-print or wireframe of your website. You have all the content organized, but you don't know where to put it. That's where CSS, or Cascading Style Sheets, comes into the picture.

Let's Get Cascadin'!

Before styling with CSS, we need some HTML, so let's use this simple example of one title and two paragraphs.

There are several ways to style your element. You can do it in a .css file, you can do it between <style> tags or you can do it inline. There are many reasons why you'll want to choose one option over the other, but the preferred way is via the .css file, called an "external style sheet". This is preferred because it makes managing your CSS much easier. Imagine if you had a 400 page website and each page had their own CSS, and one line on each page had the title's colour as "red". If you wanted to change your CSS, you'd have to change it in 400 different places, but if you have it in a .css file you'll only have to change it once.

While this is the preferred (and most common) method, we'll be looking at the two other methods in this article. First, we'll be looking at the inline method which can be done by adding the "style" attribute to an element, like so:

Simple enough. Now, let's make the paragraphs red too.

This is pretty easy so far, so let's make it a little more complicated. To have multiple styles, you'll want to separate them with a semicolon (;).

As you add on more styles, it can get more complicated. In this example the "reds" are all in the same place, so if you wanted to change them all to "blue", it would be fairly easy. But what if they weren't in the same place? When doing something like this, you'll want to put your CSS inside of a <style> tag so that it's easier to manage:

Getting Some Style Class

Now it's easy to change colour red to blue, but we have a new problem: both paragraphs have a yellow background! When it comes to CSS, the "cascading" part can often surprise you. If you style an element more than once, the last style takes precedence. You could "override" the style on second paragraph by having an inline style instead:

But making style "exceptions" like that can easily complicate your code. After all, what if you want to turn all elements with a yellow background to a pink one? Then you have the same problem as before. A better ides would be to give the second paragraph a class. When styling with classes, you select them with a dot or period (.).

You can also style HTML with an id instead of a class, but many programmers say ids have too much style weight behind them and they're too clunky to style around. If you need to style an id, you would do with a hashtag/pound sign (#).

Putting On Some Weight

When it comes to CSS, different techniques have different "style weights". Inline styles are "heavier" than ones inside <style> tags and <style> tags are heaver than external style sheets. At the same time, ids are heavier than classes, and classes are heavier than just selecting elements. Knowing that, what colour would this be?

Were you surprised it was red? Inline styles have more weight than ids, classes and just selecting the element. They also override external style sheets, had we included one of those in the example.

Listen to me, I'm !Important

As with anything that comes with website development, there are always exceptions. One of them is the !important style. It overrides everything, including inline styles. With color do you think the heading will be in the following code?

It's black! !important styles have a lot of weight to them, but can be overwritten by other !important styles. This can very easily lead into dozens of !important styles all overwriting each other. Most developers agree that you should never make styles !important, unless absolutely necessary.

Closing Styles... Er, Statement

This is only a very simple introduction to CSS. Please follow along and let me know in the comments what other CSS questions you have. The CSS rabbit hole is deep and full of twists, so hold onto your hat because this was the easy stuff!

Sign-up for inside tips for making
your website more beautiful!

* indicates required

Close

Sign-up for inside tips for making
your website more beautiful!

* indicates required

Close