Syntax and Selector in CSS: Tips and Examples

CSS syntax

CSS rules set includes selector (selector) and declarative block (declaration). The selector points to the part from the HTML that you want to style. The declaration block contains one or more declarations, separated by semicolons. Each declaration consists of CSS name and value, separated by commas.

CSS declaration always ends with a semicolon, the declaration block is enclosed in curly braces. In the example below, the elements

will be centered, red text.

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

CSS Selector

The CSS selector helps find (and select) HTML elements based on the element's name, id, class, attribute.

Element Selector

This is an element selection tool based on element names. You can select all elements

on the page as shown below (in this case, all elements

will be centered and red in color).

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

id Selector

This tool uses the id attribute of the HTML element to select.id of an element in the page must be unique, so the Selector id helps select a single element.

To select an element by id, use the # character in front, then the element id. The following style rule applies to HTML elements with id='para1'.

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

Note: The id name cannot start with a number.

Selector class

This tool selects the element with the class. attribute class. To select, write the character (.) Followed by the class name. In the example below, all HTML elements with class = "center" will be red and centered.

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

You can specify only certain HTML elements that are affected by the class. In the example below only the element

having class="center" is centered.

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

HTML elements can refer to more than one class. In the example below, the element

styled according to class="center" and class="large".

The paragraph uses two layers.

Note : class names cannot start with numbers.

Group Selector

If there are elements of the same type:

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

You can group reselect tools to minimize code, comma separated tools. Here's how to group the selection tools above.

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

Comment in CSS

Comments help explain the code, which may help to edit the source code later when needed. The browser will not display comments. The comment in CSS begins with / * and ends with * / and can span multiple lines.

 p { 
  color: red; 
  /* ?ây là bình lu?n m?t dòng */ 
  text-align: center; 
 } 
 
 /* ?ây là 
 bình lu?n 
 nhi?u dòng */ 

Try the code below and see how the browser displays in the image below.

This title is preserved

This title is red and centered.

Lesson: How to use CSS to style HTML pages