CSS Syntax

The syntax of CSS declaration is as follows:

selector {
property:value;
...
}

There is no limit on the number of property:value pair that can be specified for a selector.

There are three main types of selectors: type selectors, class selectors, and ID selectors.

Type selectors are existing (X)HTML tags such as <body> and <h1>. Class and ID selectors are user-defined selectors. We will discuss these two types of selectors in more detail in a later section.

Styles are typically specified in a property:value pair. For example, if we want to specify that a certain element is to have a yellow color, we use the following property:value declaration:

color:yellow;

In the above declaration, "color" is a property, and "yellow" is a value.

Please note that in some instances there may be multiple values for a given property. Those are generally shortcut situations -- for example, the margin property can take up to 4 values, each specifying the margin width of one side.

Grouping

If multiple selectors share the same CSS properties, they can be declared together. This is called "grouping". For example, if <h1>, <h2>, and <h3> share they same style, they can be declared together as follows:

h1 h2 h3 {
property:value;
...
}

Descendant Selectors

We can specify the style of an element only when it is inside another element. To accomplish this, we use the concept of descendant selectors.

The syntax for declaring a descendant selector is:

[Parent Selector] [Child Selector] {
property:value;
...
}

The style defined above will apply to child selectors only when they are inside the parent selector. Such declarations can go on for more than two levels.

For example, in the declaration below,

li b {
color:yellow;
}

means that text in the <b> element inside the <li> element will be yellow. Text in the <b> elements not within the <li> element will not be affected by this stylesheet.

Next: Apply CSS

Grouping

Descendant Selectors

AdBlock Detected!