CSS Syntax

In this tutorial we will learn about CSS syntax.

Defining a style

All CSS style rule starts with aselector name followed by an opening-closing curly brackets. Inside these brackets we have the style declaration consisting of property and value pairs separated by a colon. Each set of property-value pair ends with a semicolon. We can omit the semicolon for the last pair or if the pair is the only one.

In the following example we have a CSS rule to set the color of paragraph element to red.

p {
	color : red;
}

In the following example we are setting the font-size and color of h1 tag.

h1 {
	font-size : 24px;
	color : lightblue;
}

Comments

We use the forward slash and asterisk (/*) and asterisk and backward slash (*/) to create comment.

/* Setting color of p to red */

p {
	color : red;
}

/* setting color of h1
to blue
*/

h1 {
	color : blue;
}

Selector

The selectors tells us about the element(s) that will be affected by the CSS rule.

Selectors can be an element name, id and class.

For example, in the following example we have defined CSS rule for h1 element. So, the selector is h1.

h1 {
	color : #d3d3d3;
}

Selecting by element name

In this we use the element name like p, h1, span etc.

Example:

/**
 * color for all the paragraph
 */
p {
	color : blue;
}

/* font-size for all ul */
ul {
	font-size : 20px;
}

Selecting by id

In this we use the id of the element to apply the CSS rule. We use the # sign before the element id.

Id of an element cannot start with a number.

Following are valid id: group1, team-a, student-no-123.

Following is an invalid id: 1-number.

In the following example we are applying the style rule to an element having id mycanvas.

#mycanvas {
	color : #d1d1d1;
}

Selecting by class

In this we use the class used for the element to apply the rule. We use the . sign before the element class.

Class of an element cannot start with a number.

Following are valid class: fruits, blog-post and games.

Following is an invalid class: 1store.

In the following example we are applying the CSS rule to all the elements having fruits class.

.fruits {
	font-size : 20px;
}

Selecting with element name and id

We can combine both element name and id to apply the style rule.

In the following example we are targetting a paragraph having id team-a.

p#team-a {
	font-size : 20px;
	color : lightblue;
}

Selecting with element name and class

We can also combine element name and class of the element to apply the style.

In the following example the CSS rule will be applied to only those paragraph elements that are having class group-1.

p.group-1 {
	font-size : 16px;
	color : #d3d3d3;
}

Flag

It is a concept that is used by developers to tag style rule using the = equal to symbol in the comment. It is used to search style using the Find feature in text editor and IDE. Since = symbole is not part of a CSS rule so it is used in search.

In the following example we have tagged the paragraph elements having class fruits using the = flag.

/**
 * =p.fruits rules for all the paragraph elements having fruits class.
 */
p.fruits {
	color : lightgreen;
	font-size : 16px;
}

Now in the text editor or IDE we can use the Search feature to look for this rule by typing =p.fruits and we will get this.

Douglas Bowman @stop introduced the idea of flags.