CSS Lesson 3 of 4: CSS Structure: Part 1
CSS Lesson 3 of 4: CSS Structure: Part 2
A CSS statement or “rule” has two main parts: the selector and the declaration. Let's take a look at the selector first.
Element Selectors
There are several different types of selectors. The most basic type of selector is the HTML element itself. This allows you to easily apply a set of rules to a certain element type all at once. For example, if you wanted to make all of the text within a H1 blue, you would do the following:
h1 { color:Blue; }
You can even use two or more elements at the same time as the selector. You just need to separate them with a comma. There is really no limit on how many selectors you can have.
h1, h2, h3 { color:Blue; }
Class Selectors
Another way to apply styles to elements is to use the class selector. Instead of having an element name as a selector, you use a class name preceded by a period. The period must always be used before the class name because that is what marks it as a class selector. Using a class selector is probably the most common and beneficial way to add styles to a web site as it enables you to be more selective on which elements the style is applied to. To use a class with a certain element, simply set its class attribute to the name of the class. In fact, you can even set several classes to a single element. Just make sure you have a space between the different class names. And don't forget that CSS class names are case sensitive.
<html>
<head>
<style type="text/css">
.blue-text { color:Blue; }
</style>
</head>
<body>
<div class="blue-text">
This text is blue.
</div>
</body>
</html>
ID Selectors
ID Selectors are used a lot like the class selectors but there are a few differences. Instead of using a period like with the class selectors, you need to use a pound (#) sign, or as I like to call it, the little itty-bitty tic-tac-toe sign. To use an ID selector, you use the ID attribute of the element. Unlike classes, IDs can only be used once per page since IDs have to be unique for that HTML page. Also, don’t forget that just like classes, ID selectors are also case sensitive.
<html>
<head>
<style type="text/css">
#blue-div { color:Blue; }
</style>
</head>
<body>
<div id="blue-div">
This text is blue.
</div>
</body>
</html>
The Declaration
The correct syntax for a declaration is a property followed by a colon and then a value followed by a semicolon.
h1 { color:Blue; }
In this example "h1" is the selector, "color" is the property, and "Blue" is the value.
One thing to note is that syntax is very important when writing out your declarations. If you make a mistake or have an invalid declaration or keyword, then the whole rule will just be ignored.
Just like you can group selectors together to make a single rule, you can also group declarations together into a single rule.
h1 { color:Blue; font-family: Arial, Helvetica, sans-serif; font-size: 13px; }
This is definitely the preferred way of defining multiple styles for a single selector. Just remember to put a semicolon after each declaration. While it might be valid CSS to leave a semicolon after your last declaration, it is generally not considered good practice and I wouldn’t recommend it.