Understanding CSS Syntax

CSS Syntax

CSS syntax consists of three parts: selector, property, and value. selector {property: value} The selector is usually the HTML element or tag you want to define, the property is the attribute you want to change, and each property has a value. Properties and values are separated by a colon and enclosed in curly braces, forming a complete style declaration: body {color: blue} The above line of code sets the text color within the body element to blue. In this example, body is the selector, and the part enclosed in curly braces is the declaration. The declaration consists of two parts: the property and the value, where color is the property and blue is the value.

CSS Examples

CSS declarations always end with a semicolon ; and declarations are always enclosed in curly braces {}:

p
{
    color: green;
    text-align: left;
    background-color: #00ff00;
}

The above CSS code is usually written and recognized in a format that is easy to read. When we publish it on a website, we generally use a compressed format to reduce file size and save bandwidth for viewers, as follows:

p {color: green; text-align: left; background-color: #00ff00;}

CSS Comments

Comments are used to explain your code and can be edited freely; the browser will ignore them.

CSS comments start with /* and end with */, as shown in the example below:

/* This is an external comment, paragraph style */
p
{
    text-align: left;
    /* This is an internal comment, the text color within the paragraph is green */
    color: green;
    font-family: arial;
}