CSS Syntax

CSS syntax consists of 3 parts: a selector, a property and a value

selector {
  property: value;
}

The selector is an HTML element which you want to style. This could be any tag like <h1>, <p>, etc. Each selector can have one and more properties.

The property is the style attribute of an HTML tag. All HTML attributes are converted into CSS properties (color, border, etc.). Each property has its value.

The value is assigned to property. For example, the value of the color property can be either red or #F1F1F1.

Example of a CSS syntax:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a {
        color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <a>The color of this link is #1c87c9.</a>
  </body>
</html>

Try it Yourself »

Result

In the above example <a> tag is a selector, color is property, and #1c87c9 is the value of the property.

As you can see the property and its value are written inside the curly brackets and separated with colon.

The selector also can have more than one property, separated by semicolon.

CSS Comments

You can use CSS comments to add explanations to the code. They are not displayed because browsers ignore them.

The beginning and the end of a CSS comment is specified by "/*" and "*/", respectively:

/*This is some comment*/

As you see, we have written our text inside "/*" and "*/", which are not displayed on browsers. So when you don't want to show any information in your CSS, write it between "/*" and "*/".

Example of CSS comments:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h1 {
        padding-left: 10px;
        font-size: 26px;
        line-height: 30px;
        /*color:red;*/
      }
      p {
        color: #1c87c9;
        /*font-size:25px;
        border:1px solid red;
        */
        padding: 10px;
        line-height: 30px;
      }
    </style>
  </head>
  <body>
    <h1>CSS Comments</h1>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </p>
  </body>
</html>