CSS Syntax

The first topic you’ll need to master before writing code using CSS is syntax. The word syntax may sound intimidating, but it simply refers to the rules we use in CSS to write out code. These rules are standard, which makes it easy to read other people’s code.

The two most important parts of CSS syntax are selectors and declaration blocks. Selectors are used to point to the element(s) to which you want to apply a style on a web page, and declaration blocks outline the styles you want to apply to the elements you have selected.

This tutorial will discuss, with examples, the basics of CSS syntax, and the structure of CSS styles. We’ll also discuss how to write comments in CSS. By the end of reading this tutorial, you’ll have the knowledge you need to write your own CSS styles.

CSS Style Rules

In CSS, a stylesheet stores a set of rules that determine how a website should appear on a user’s screen. For instance, a stylesheet may outline the color of text on a web page or the font size used by a particular header.

These rules follow a standard structure, which is made up of two parts: selectors and declarations. Overall, this is how a style rule appears in CSS:

h1 {
	color: blue;
}

This particular style sets the color of all <h1> elements on a web page to blue. Now, let’s break this style down into its two component parts so that we can analyze how it works.

CSS Declarations

The first part of a CSS style is the declarations. Declaration is another word for a particular style that you want to apply to an element on a web page.

A CSS style rule must include at least one declaration and can include as many declarations as you want. So, if you want to set the width and height of a box on a web page to 100px, and set its background color to blue, you could do so in one declaration.

Declarations consist of two parts, which are as follows:

• Properties. These are the style properties that should be applied to an element (i.e. color, background-color, width, height).
• Value. This part tells the browser how the property should be displayed (i.e., the color of a box could be set to “green” or “red”).

Here is the syntax for a CSS declaration:

property: value;

Notice that our CSS property appears first, and is then separated by a colon (:). After the colon comes the value we want to assign to the property we have defined.

Each CSS declaration should end in a semi-colon (;).

Here is an example of two CSS declarations:

color: blue;
font-size: 16px;

The first declaration sets the font color of an HTML element to “blue”. The second declaration sets the font size of a single element to “16px”. Both these selectors start with a property name and are followed by a comma and the value which we want to assign to the property.

Declarations are stored within curly brackets.

CSS Selectors

In the last section, we discussed how declarations are used to apply styles to a web element. But declarations are only one part of the CSS syntax. The other part is selectors, which tell the browser which element a particular set of declarations should apply to.

Here is the syntax for a CSS selector:

selector {
	// List of declarations
}

The selector instructs the browser which element(s) to which a set of styles should apply. So, for instance, if we wanted to set the width of all <div> elements to “500px”, we could do so using this rule:

div {
	width: 500px;
}

The div is our selector in this case and comes at the start of our CSS rule. Then, we define our declarations in curly brackets, using the syntax we discussed earlier. This rule sets the width of all <div> elements on a web page to “500px”.

If you’re interested in learning more about CSS selectors, read our beginner’s guide to CSS selectors.

Together, declarations and selectors make up a CSS style rule.

CSS Comments

So far, we’ve discussed how to write style rules in CSS. However, not all the text written in a style sheet is style rules.

CSS style sheets are also capable of storing comments. Comments are blocks of text written by a developer with the purpose of making it easier to understand the code in a stylesheet. Comments are ignored by the browser, so you can add as many comments to a stylesheet as you want.

Writing comments is beneficial for a number of reasons.

First, writing comments allow you to keep track of your code as you write it, and gives you a record of your thoughts to which you can refer if you need help understanding a block of code in the future. Second, writing comments will allow developers who have not written a block of code to understand its purpose and your intent behind writing the code.

CSS comments start with the /* syntax and end with the */ syntax.

Single-Line and Multi-Line Comments

There are two types of comments that can appear in CSS: single-line and multi-line. 

"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"

Venus, Software Engineer at Rockbot

Find Your Bootcamp Match

Single-line comments are comments that only span one line on a style sheet. Here’s an example of a single-line comment in CSS that appears above a style rule:

/* This style sets the font size of all <p> tags to 16px */
p {
	font-size: 16px;
}

In this code, our comment appears between the /* and */ markers. Below our comment is a style rule, which uses the syntax we discussed earlier.

Multi-line comments are comments that span more than one line on a style sheet. Here’s an example of a CSS multi-line comment:

/* This style sets the font size of all <p> tags to 16px
and also sets the color of the text to gray */
p {
	font-size: 16px;
	color: gray;
}

This comment spans across two lines and describes a CSS style.

Conclusion

Like any programming language, CSS has some basic syntax to define how you can write code using the language.

In CSS, there are two components that make up a style rule: declarations and selectors. Declarations are the styles to which you want to apply to an element, and selectors are used to select the elements to which your declarations will be applied.

In addition, CSS has a commenting feature that allows you to write notes on your code for future reference. Comments are ignored by the browser.

This tutorial discussed the basics of CSS syntax and how to comment on a CSS style sheet. Now you’re ready to start writing CSS style rules and comments like a professional web developer!