What is the CSS Syntax

CSS Syntax

Selector { property:value; property:value}

Selector - Basic

element - applies the style to the HTML element that match the selector
id - use the id attribute of an HTML element to select which element will apply the style
class - use the class attribute of an HTML to select the element(s) to apply the style

Example of element selector

p {

text-align: center;
color: red;
}

Example of id selector:

#para1 {

text-align: center;
color: red;
}

Example of class selector

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

Selector - Combinations

Example of element + class selector. e.g. <p> element with class="center"

p.center {

text-align: center;
color: red;
}

Example of element + id selector. e.g. <p> element with id="centered"

p#centered {

text-align: center;
color: red;
}

Example of class + element + id selector. e.g. <p> element with id="centered" whose parent has class="center"

.center p#centered {

text-align: center;
color: red;
}

How to insert comments

use /* comment */ to put some comment e.g.

h1 {
/* the color */
color:blue;

}

References