CSS Syntax

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

selector {
  property: value;
}

The selector is the HTML element that 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 HTML tag. All the HTML attributes are converted into CSS properties (color, border, etc.). Each property has its value.

The value is assigned to property. For example, color property can have value either red or #F1F1F1 etc.

Let’s see an example.

<!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>

The result will be:

The color of this link is #1c87c9.

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

CSS comments are used for writing explanations to the code. They are not displayed because browsers ignore them.

CSS comment begins with "/*", and ends with "*/", like this:

/*This is a 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, just write it between "/*" and "*/".

Try it yourself.