CSS Syntax

CSS syntax refers to the way we write CSS code. In order to write CSS, you need to first identify the element in your HTML page that you want to style before adding styles using a plethora of built-in CSS properties.

There are multiple ways to identify and tell CSS which element in your HTML page it should style. CSS syntax follows the format demonstrated here.

In CSS, `Selector` points to the HTML element you want to style, `Property` is the built-in CSS property to use to style this element, `Value` is the value we want to apply for this CSS property, and `Declaration’ consists of the CSS property and CSS value, separated by a colon (:). Multiple CSS declarations are separated by a semicolon (;). Declaration blocks are all contained within curly braces.

This particular set of declarations would tell our browser that we want all H1 tags in the HTML file to have a font size of 12px, and have the color blue applied to the text.

CSS Selectors are used to describe which HTML element(s) you want to style. CSS provides multiple ways to describe the selectors:

• Element selectors
• ID selectors
• Class selectors

Element selectors are the simplest form of defining which HTML elements to style. As seen in the example above, you need to tell CSS just the tag name of the element that you want to style. For example – h1, a, p or div.

• In order to target all <p> tags, we use the p selector. 
• In order to target all <div> tags, we use the div selector.

Using specific CSS properties is how we can change how our elements appear on a web page. Remember the syntax above, we need to use a selector first, and then we describe what styles we wanted to apply for a particular element.

Some common CSS properties that we can change are listed below: