CSS Tutorials : Lesson 2 : CSS Syntax

CSS Tutorials : Lesson 2 – Syntax

In this tutorial you will learn about Cascading Style Sheets (CSS) Syntax, Rule set, Combining selectors, The class selector, The id selector and Comments

Rule set

A rule or rule set tells the browser how to render an element, the rule set consists of the following:

1. The selector: represents the HTML element to be affected by the rule.
   .
2. The declaration block: represents the effect to be applied to the element(s), and it contains one or more property value pairs.

Example:

p {text-align: right; color: red}

The selector here is the HTML element < p >, all what follows is the declaration block, the declaration block has to start with an opening curly brace “{“, and ends with a closing curly brace “}”, every property/value pair has to be ended with a semi column”;”, the semi column can be only omitted for the last property/value pair, the property and the value are separated with a colon “:”, spaces and line feeds may be added for better readability, it doesn't affect the CSS validity, the previous rule can be written as:

p
{
text-align: right;
color: red;
}

Combining selectors

When many selectors have the same declarations, they may be grouped, this will reduce the CSS file size, and makes it easier to update the style.

Example:

h1, h2, h3
{
text-align: center;
color: red;
}

Note that selectors are separated with a comma.
If one of the elements has an additional declaration it can be added later.

Example:

h1, h2, h3
{
text-align: center;
color: red;
}
h2
{
font-style: italic;
}

So all the elements h1, h2, and h3 will have center-aligned text, and red color, and only h2 font style will be italic.

The class selector

You can define different style for the same HTML element using the class selector.

Example:

td.header {
font-weight: bold;
font-variant: small-caps;
text-align: center;
}
td.normal {
text-align: left;
}

To use it in the HTML document:

< table >
< tr >
< td class=”header” > ID < /td >
< td class=”header” > Department < /td >
< /tr >
< tr >
< td > 1 < /td >
< td > Web Design < /td >
< /tr >
< /table >

The tag name can be omitted too, this will enable any HTML element to use the rule, the previous CSS rules can be written as:

.header {
font-weight: bold;
font-variant: small-caps;
text-align: center;
}
.normal {
text-align: left;
}

It's used the same way in the HTML document.

The id selector

You can define the same style for different HTML elements using the id selector.

Example:

#red
{
color: red;
}

You may use it in the HTML document this way:

< h1 id=”red” > This is a red header < /h1 >
< p id=”red” > This is a red paragraph < /p >

You can restrict the id to a specific element:

p#red
{
color: red;
}

This way only the < p > element with id of red < p id="red" > will be styled using this rule.

Comments

CSS comments can be placed anywhere in the CSS, it will be ignored by the browser, the comment has to start with “/*” and ends with “*/”.

Example:

/* comment */
p
{
/* another comment */
text-align: right; /* another comment */
color: red
}