CSS Basics : Syntax

A CSS syntax consists of a set of style rules that are interpreted by the browser and then applied to the corresponding elements in the document. A CSS rule-set have two main parts : a selector and one or more declaration block :


Selectors : Selector indicates the HTML element we want to style. It could be any tag like <h1>, <p>, <body> etc. At the above figure we are use h1 as a selector.

Delcaration Block : he declaration block contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon. For example, in the above figure there are two declarations :

  • color : green;
  • font-size : 15px;

A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces.

Property : A property is a type of attribute of HTML tag. They could be color, font-size, border etc.

Value : Values are assigned to properties. For example, color property can have value either green or #008000 etc.

Example :
<!DOCTYPE html>
<html>
  <head>
    <style>
 h1 {
    color: green;
    font-size: 15px;
 }
    </style>
  </head>
  <body>
    <h1> The CSS Test </h1>
  </body>
</html>
Output :

The CSS Test


Next Topic :