CSS Syntax

CSS Syntax

A CSS rule-set consists of a selector and a declaration block:

Example

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

Yourself Try

CSS Selectors

CSS selectors name:

lement selectors

id selectors

class selectors

Grouping Selectors and more.

Element Selector

You can select all <p> elements on a page like this (in this case, all <p> elements will be center-aligned, with a red text color):

Example

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

Yourself Try

This is the manner by which the HTML code above :

Example

<p> This paragraph refers to two classes.</p>

Yourself Try

Id Selector

To select an element with a specific id, write a hash (#) character, followed by the id of the element.
The style rule below will be applied to the HTML element with id="para1":

Example

#para1 {
    text-align: center;
    color: red;
}

Yourself Try

This is the manner by which the HTML code above :

Example

<p id="center large">This paragraph refers to two classes.</p>

Yourself Try

Class Selector

To select elements with a specific class, write a period (.) character, followed by the name of the class.
In the example below, all HTML elements with class="center" will be red and center-aligned:

Example

.center {
    text-align: center;
    color: red;}

Yourself Try

This is the manner by which the HTML code above :

Example

<p class="center large">This paragraph refers to two classes.</p>

Yourself Try

Grouping Selectors

If you have elements with the same style definitions, like this:

Example

h1 {
    text-align: center;
    color: red;
}

h2 {
    text-align: center;
    color: red;}

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

Yourself Try

This is the manner by which the HTML code above :

Example

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

Yourself Try

CSS Comments

A CSS comment starts with /* and ends with */. Comments can also span multiple lines:

Example

p {
    color: red;
    /* This is a single-line comment */
    text-align: center;
}

/* This is
a multi-line
comment */

Yourself Try

Wright © bestwebdesign and Graphics design