CSS - Everything You Need To Know

This tutorial is part of a web programming course for people who have no programming experience.

In the previous unit on HTML, we focused on structuring the content of a web page. You learned how to let the browser know if content should appear as a paragraph, as heading, or in a list. CSS allows us to control how content within specific elements should look. You can use CSS to control the color, font type, and other aspects of the visual appearance of elements. For this reason, CSS is referred to as the presentation layer of a web page (HTML is the content, CSS is the presentation, and JavaScript is the behavior layer).

If you have not done the HTML unit that precedes this one, you can download the starter files and install Sublime Text. Then open the web-programming folder (the zip file) in Sublime Text.

CSS stands for cascading style sheets. We'll talk more about where this name came from as we move through the next few lessons.

There are a few different ways that you can embed CSS code into a web page, and we'll go over them later. For now, we'll place our CSS code inside of a style element. You should nest this style element inside the head element (remember that the head element is meant for metadata, which is information that is not directly visible when the page is viewed in the browser).

Here is the code that we'll start with:

<style>
    h1{
        color:red;
        font-family: verdana;
    }
</style>

Everything inside the style element is CSS code. This is what we call a ruleset, and it sets the color and font type for all h1 elements on the page.

A ruleset in CSS is broken up into a selector, which determines the elements that will be targeted, and a group of rules that should be applied to that target. As usual when getting with a new language in programming, we'll have to wrestle with some syntax. The selector (in this case it's h2) must immediately be followed by a pair of curly braces. You'll see lots and lots of curly braces as you dig deeper into programming, and they always come in pairs - an opening curly brace { and a closing curly brace }. In between the curly braces are the rules, property settings, that should be applied to the target of the selector. The code sample above sets the color property to red, and the font-family to verdana. When setting a property, you must put the property name, then follow it with a colon, then the value that you wish to set the property to, and then a semi-colon. If you mess up this syntax, and for example forget to put a semi-colon at the end of a line, then some of the property settings may not work.

We could rewrite the CSS code for this ruleset all on one line, like this (note that I will be omitting the style tags from the rest of the CSS code samples in this lesson):

h1{ color:red; font-family: verdana; }

Putting all the property settings on a single line is fine if there aren't many of them. But it's not uncommon to include many property settings in a ruleset, and in this case it's easier to read the code if you put each one on it's own line.

There are various type of selectors in CSS, in the previous code samples I've used a tag selector because it's the easiest to understand for beginners.

Tag Selectors

A tag selector targets all elements on the page that match the tag name ('element name' might be a better term because there is a subtle difference between a tag and an element but most programmers say 'tag' when they are really referring to an element). If you wanted to set the text color and background color for all h2 elements on a page you could do it like this:

h2{ 
    color:blue; font-family: helvetica; 
}

If you wanted to set the font size for all paragraphs on a page you might do this:

p{ 
    font-size: 18px; 
}

This would set text inside of each p tag to 18 pixels.

Class Selectors

Another type of selector that comes in handy is a class selector. Class selectors target all elements whose class attribute setting match the selector. In your CSS code, class selectors must start with a period, for example:

.warning{ 
    color: red; 
}

The above ruleset would be applied to all HTML elements whose class attribute is set to a value of 'warning':

<h1 class="warning">BEWARE!</h1>
<p class="warning">
    This is a warning...
</p>

You can make up your own names for class selectors (I decided to go with 'warning' in this example). But the important thing to note is that in order for an HTML element to have the rules applied, the value of its class attribute must match the selector. This is why they are referred to as class selectors.

ID Selectors

ID selectors target an element on the page that has it's id attribute set to a value that matches the selector. ID selectors must begin with a hash tag symbol, like so:

#employee-list{ 
    background-color: gray; 
}

This ruleset will set the background color for the following element:

<ul id="employee-list">
    <li>Bob Smith</li>
    <li>Betty Barton</li>
    <li>Tommy Jones</li>
</ul>

Note that the value of the id attribute (in the UL element) matches the ID selector in the CSS code. Also note that when you use an ID selector, you are targeting one, and only one, element on the page (remember that IDs are supposed to be unique, so no two elements on a page should have the same value set for the ID attribute).

Mixed Selectors

You can combine different selector types, which give you more control over which elements will be targeted by a ruleset. Consider this example, which targets H2 elements that have a class attribute set to 'warning':

h2.warning{ 
    color: red; 
}

This mixed selector is a combination of a tag selector (h2) and a class selector (.warning). The result is that the rules will be applied strictly to H2 elements that have a class attribute set to a value of 'warning'.

Mixed selectors can become quite complicated, but they do give you fine grained control over how CSS styles will be applied throughout a web page.

I want to point out a very subtle difference in the syntax used between these two rulesets, see if you can spot it:

div.warning{ 
    color: red; 
}

div .warning{ 
    color: red; 
}

Did you notice the space between div and .warning in the second ruleset? The selector in the first ruleset targets DIV elements that have a class attribute value set to 'warning', so this div would have the rules applied to it:

<div class="warning">BEWARE!</div>

The selector in the second ruleset targets any element nested within a DIV that has it's class attribute set to 'warning', like so:

<div>
    <p class="warning">
        This is a warning...
    </p>
</div>

Programmers must pay extremely close attention to syntax because one tiny little character out of place can lead to code that doesn't work properly

Here's another mixed selector that is quite common:

ul li{ 
    color: green;
    font-family: verdana;
    font-size: 22px  
}

This mixed selector consists of two tag selectors, with a space in between them. This will target LI elements that are nested inside of UL elements. You may not want these rules applied to items inside an ordered list (an OL element), and this selector would not target them.

Grouped Selectors

You can use multiple selectors, separated by commas, to apply a ruleset to more than one target. Consider this example:

h2, div.warning{ 
    color: red;
    background-color: green;
    font-family: verdana;
    font-size: 22px  
}

Notice the comma in the selector? This is actually two different selectors that are grouped together (via the comma), and the rules will be applied to both H2 elements and DIV elements that have a class attribute set to 'warning'. The nice thing about grouped selectors is that you don't have to repeat your code (which is a big no-no in programming). Without grouped selectors, we may end up with two rulesets with identical property settings (rules) inside the curly braces like this:

h2{ 
    color: red;
    background-color: green;
    font-family: verdana;
    font-size: 22px  
}

div.warning{ 
    color: red;
    background-color: green;
    font-family: verdana;
    font-size: 22px  
}

Pseudo Selectors

The last type of selector we'll discuss are pseudo selectors, which target elements that are in a certain state (I bet you are wondering what that means!). If you wanted to set properties for hyperlinks, but only when they are being hovered over, you could do it like this:

a:hover{ 
    background-color: green;
}

This example would change the background color of a elements to green, but only when the mouse is hovering over them. This is how you can acheive rollover effects for links in your page. Note the syntax, pseudo selectors end with a colon followed by the state that you wish to target. Also note that pseudo selectors are often referred to as 'pseudo-class' selectors. Here is a reference that covers the different states that you can target.

Comments

Sometimes when you are fiddling with your CSS code, you want 'turn off' some property settings temporarily. You can comment out CSS code like this:

h2{ 
    color: red;
    /*background-color: green;*/
    font-family: verdana;
    font-size: 22px  
}

Notice the funny syntax around the background-color property setting (syntax - learn to love it, or at least accept it!). To comment out code put a forward slash and asterisk before it, and an asterisk and forward slash after it. You could also comment out an entire ruleset like this:

/*
h2{ 
    color: red;
    background-color: green;
    font-family: verdana;
    font-size: 22px  
}
*/

We have covered a lot of ground in this lesson! But now you know everything you need to in order to get started with CSS. The next step is to practice, and explore all the different properties and their settings that you can apply to elements. CSS, like HTML, is relatively easy to learn. But in practice it can be extremely difficult to master, mostly because mixed selectors can get to be very complicated. And in many cases an element can be targeted by multiple rulesets in the CSS code, which can get messy. We'll talk about some of these issues in upcoming lessons.