Syntax & Rules

Like any language, computer or natural, CSS has syntactic rules that dictate how a CSS rule is written. Here are a few definitions to absorb before we dive in.

Declaration: A CSS declaration is a property-value pair (much like HTML attribute-value pairs). For example, we would set a text color by writing color: blue in CSS. When you combine one or more property-value pairs in one rule (we'll get to rules in a second), you have a declaration block. You enclose a declaration block inside curly braces like so {color: blue;}. To use multiple declarations in a block, separate each declaration with a semi-colon (;) like so: {color : blue; font-size: 18px;}. Try to practice good CSS style by placing a semi-colon after each and every declaration (especially the last in the block). We'll take a look at how these specifics work in a bit.

Selector: A CSS selector is the
part of a rule that determines which HTML element(s) is selected by
that rule. For example, we could say that all text inside the HTML <p> tag
(the paragraph tag) should be rendered in red and in a font size of
18 pixels by writing this: p {color: red; font-size: 18px;} (where
px stands for pixels). In this case, p is the selector. Pretty simple,
huh?

Rule: A CSS rule is a complete
style statement that is made up of a selector(s) and a declaration or declaration
block as they are defined above. Actually, the example provided above
(the one for the <p> tag) is a complete CSS rule. A complete rule must consist of a selector and at least one
declaration or declaration block.

So how
would we write a set of rules for a simple HTML document? Let's look
at the style sheet that governs all the tutorials on Tutorial Junction
(that's right, every single page of every tutorial).

There are
16 CSS rules here. Each one has multiple declarations in their blocks which
are all surrounded by curly braces. Simple enough, right? Yes and no. You may
have noticed that some of the selectors begin with a period/dot (.). Well,
that's because there are different types of selectors. The simplest selector
is simply an HTML tag. Any HTML tag and/or element can be a CSS selector. In
our example above, all H1 elements will be rendered at 20 pixels in height,
with a normal font weight, in the color that corresponds to #FF9933 (that's
orange). That's a great demonstration of the control that CSS gives a designer.

There are
also class selectors. These are the selectors that begin
with the period/dot. Class selectors can be used multiple times and on any
tag within an HTML document. So how does that work? First, all class selectors
are preceded by a period/dot. Well, let's say that we wanted to style a <p> tag
with a class selector called "nav". In your CSS file, the rule would begin
with .nav and it would be followed by the declaration
block. This
is the first rule in the CSS style sheet above. It looks like this:

If you had all your <p> tags encoded like this and you decided
to change their styles later, all you would have to do is change the declaration
block for the nav class in the style
sheet. As you can see, this takes a bit of planning to work well, but it all
pays off in the end.

There is another
type of selector called the ID selector that works very similarly
to the class selector. The biggest difference between the two is that a class
selector may be used repeatedly in an HTML document whereas an ID selector
can be used only once. An ID selector is unique. Here's
an example of how an ID selector CSS rule would be written:

H1#unique {color: brown; font-size: 18px;}An ID selector is always preceded by a pound sign/hash.
It would be encoded in HTML like this:<H1 id="unique">content</H1>

Here, I have
decided that I'm only going to have one instance where the H1 element will
use this rule with the ID of "unique". In this case, the ID selector "unique"
can be used ONLY once. In other words, you should only use it with one individual H1 element.
If you want to use a selector in multiple rules (or repeatedly), you should use
a class selector.

A class selector
can be used with any element encoded with <tag="class_name">.
Why do this? Well, let's say you've got a declaration block that is a styled
HTML list and you will use it repeatedly in your website to control the HTML.
Using a class selector named ".list" (because class selectors are
always preceeded by a period/dot) will enable you to use it with multiple HTML
elements. For
example, you could use this class selector with the p tag by writing <p
class="list">,
or with the div tag by writing <div class="list">, or with
the unordered list tag by writing <ul class="list"> all in
one HTML file and each of those tags with the class of list will adhere to
the CSS declarations you lay out in the
CSS file.

Alternatively,
if you had a part of your webpage that would occur only once, it would make
more sense to use an ID selector because it is a unique (i.e. not recurring)
part of your webpage. You could simply name the ID selector "navbar" for
convenience. In your CSS file then, the rule would begin with #navbar
and be followed by the declaration block. In your corresponding HTML file, you
could
use
the
ID selector with a p tag by writing <p id="navbar"> and again, this paragraph
(or navigation bar wrapped in a p tag) would adhere to the CSS declaration(s)
you laid out in the rule.

If this
is confusing to you right now, well, then that's pretty normal. We'll actually
put these methods into place soon so they become more concrete. First,
let's take a look at a few ways to incorporate style sheets into your HTML
document.