Home » CSS » CSS Syntax

CSS Syntax

Like HTML, CSS has a syntax that must be adhered to when you create a CSS file or code in style tags. In this tutorial, you will learn how to use CSS syntax when writing CSS code.

How to Write CSS Code?

CSS syntax consists of rule sets. As shown in the below example, a rule set consists of a selector followed by a set of braces {}. Within the braces are one or more declarations, and each declaration consists of a property and a value. Note that the property is followed by a colon and the value is followed by a semicolon. Below is an example:

h1 {
   color: green;

In the above CSS example, the selector is h1 so it applies to all h1 elements. Then, the rule set consists of a single property named color that is set of the color green. The result is that the content of all h1 elements will be displayed in green.

CSS Syntax for Comments

Within a CSS code, you can also write comments that describe or explain what the CSS code is doing. For each comment, you start with /* and end with */, and anything between those characters is ignored. In the below example, you can see how CSS comments can be coded on separate lines or after the lines that make up a rule set.

* Description: CSS for main section
* Author: Vinish Kapoor

You can also use comments to comment out portions of code that you want to disable. This can be useful when you're testing your CSS code. Below is an example:

body {
  /* background-color: #eee; */
  background: #ebebeb;
  color: #121212;
h2 {
  font-size: 32px;
  border-bottom: 2px solid #00ff00; /* Adds a line below h2 headings */

Final Words

A CSS rule let consists of a selector and a declaration block. A declaration block consists of an opening brace {, zero or more declarations, and a closing brace }. A CSS syntax consists of a property, a colon, a value, and a semicolon.

Read Also: