X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

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.

Example of using 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>

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

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 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, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
  </body>
</html>

Practice Your Knowledge

Which is the correct way to add background-color for div tag?



Do you find this helpful?

Related articles