CSS - Syntax

CSS Syntax

So let's have our first look at Cascading Style Sheets. As you probably already know, all programing languages have their own syntax, and while HTML and CSS aren't exactly programming languages, they do have their own syntax.

There are three parts in the CSS syntax−

selector {property: value}


The selector is the HTML tag that a style will be applied to. For example, the

tag for paragraphs or the <h2> heading tag.


The property is an aspect of the HTML tag that will be affected by the stylesheet definition. For example, the background color of a webpage or the color of links.


The value that the property of a selector will have. For example, the value of the background color of a webpage can be green or the value of the color of links can be gray.


body {background-color: gray}

The property and value of a selector are separated by a colon, and sorrounded by curly braces.

If a value is more than one word, put quotes around it.

Example of value being more than one word −

h2 {font-family: "Trebuchet MS"}

If you specify more than one property, each property should be separated with a semicolon.

Example of multiple properties −

body {background-color: gray; color: yellow;}

You can make style definitions more easily readable by specifying each property on a separate line.


background-color: gray;
color: yellow;
margin-top: 0;