Helpful Facts About CSS Syntax

In this article, we’ll learn the 3 basic components of CSS syntax, general rules, at-rules and sample statements.

CSS Syntax, at its most basic, is a style rule using a style name followed by curly braces. Between these braces are placed individual declaration for that style rule.

Selector {property: value}

Basically it consists of 2 components: A selector and a declaration, in which the latter consists of 2 more components: property and value. This style rule gives a sensible organization to your sheet because it provides a standard structure of CSS application.

Defining The Style Rule

In creating these components, a very simple formula that has been stated above shall be followed. The selector defines the exact element/s that will affect the rule you create. For example, the selector p selects all the paragraph elements on the page.

p {

Font-family: Arial, Helvetica, sans-serif;

Font-size: medium;

Color: red;


For each selector, you need to have a set of declarations. Declarations govern how the selected elements will be displayed. It mainly consists of property followed by a colon, a space and then the value both, enclosed with curly braces. In this picture there are 3 properties identified: font-family, font-size, and color. In font-family property you can see at least 3 values. This illustrates your reserve value if neither of them works in a certain browser. Together, the selector and declarations make up a Style Rule.


An at-rule begins with an @ character then an identifier. An at-rule can contain a block within curly braces, or text bordered at the last portion by a semicolon. The at-rule’s syntax shall determine whether a text is required or that of a block.


Statements are composed of at-rule or rule sets. The example below depicts two statements; the first beings an at-rule that is terminated by a semicolon at the last part of the first line, the second line shows a rule set that is bordered by a closing curly brace.

@import url(base.css)

H2 {

Color: #412;

Font: Calibri;



General Syntax and Nomenclature

In CSS syntax, whitespace can typically be put in unrestrained between tokens, and line breaks have no semantic value.

In CSS syntax, the interface is case insensitive, however circumstances outside the control of coding such as the type of operating system and markup language may affect this quality.

There’s a huge set of property identifiers that can be utilized in the style rules. They must be precisely known, or else the declaration will be disregarded. Property values are known to exist in variety, depending on the intention of its usage, with its own conditions and limitations. These property values can be expressed as percentages, colors, URLs, keywords, and lengths.