CSS syntax
CSS follows a specific syntax to define styles.
This tutorial focuses on:
- CSS syntax
- Grouping styles
CSS syntax
There are three parts in the CSS syntax:
selector {property: value}
- selector - The selector is the HTML tag that a style will be applied to. For example, the <p> tag for paragraphs or the <h2> heading tag.
- property - 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.
- value - 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.
Example:
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.
Example:
body{
background-color: gray;
color: yellow;
margin-top: 0;
}
Grouping styles
You can specify that a group of tags will have the same styles by grouping them together.
Example:
p, h1, h2, h3, h4{
color: blue;
font-family: courier;
}
In this example, all text declared with the tags <p>, <h1>, <h2>, <h3>, and <h4> will be blue in color and Courier in font.