CSS Syntax

Comments
/* This is
a multi-line
comment */

CSS selectors
A CSS rule set consists of a selector and a declaration block.

Sample

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

} 

p -> selector 

The element selector selects elements based on the element name.

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

The id selector uses the id attribute of an HTML tag to find the specific element.  Use #for ID.

The style rule below will be applied to the HTML element with id="para1":

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

! --- Do NOT start an ID name with a number!

n the example below, all HTML elements with class="center" will be center-aligned:

The class selector finds elements with the specific class. Use . for Class

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

You can also specify that only specific HTML elements should be affected by a class.

In the example below, all p elements with class="center" will be center-aligned:

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

To minimize the code, you can group selectors.

To group selectors, separate each selector with a comma.

In the example below we have grouped the selectors from the code above:

h1, h2, p {

    text-align: center;

    color: red;

}