What Is CSS?

Style vs. Markup

Syntax & Rules

Methods of Use

Writing a Style Sheet

• Text Formatting
• CSS Roll-Overs
• CSS Spacing

Putting It All Together

CSS Resources

Evaluate this Tutorial

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:

In your HTML document, you would encode all your <p> tags like so:

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:

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.

Watch the video

choose format/speed
dial-up | broadband