In this CSS tutorial, we will discuss the basic syntax of CSS and how to write CSS code.
The CSS syntax consists of some set of rules that defines how to writes CSS code correctly so that the browser engine may correctly identify specific CSS features of the page.
CSS ruleset have 3 parts:
- Selector - selectors select elements from the HTML file and tells which element is to be styled.
- CSS property - property defines the CSS feature that you want to use, like color, padding, border, etc.
- CSS value - each CSS property has a set of values in which you can choose one or set some numerical value with units, like 10px, center, auto, etc.
Note: CSS property and CSS value are separated by a colon (:).
A single set of property and value is called a declaration. If there are multiple sets of CSS declaration then you need to separate them by a semicolon (;)
The last semicolon of a ruleset is optional.
In the example below there are 3 declarations and 1 ruleset.
Grouping selectors in CSS
In case you want to apply the same style for multiple selectors then it is not necessary to define CSS rulesets individually for each selector.
To write the same CSS ruleset for multiple selectors simply write CSS once and separate the selectors by a comma as shown in the example below.
Note: If you are unable to understand the code above then don't bother we will look at each of the above property in the coming chapters.
CSS Property with multiple values
Some of the CSS properties have multiple sets of values that are mentioned at a time. Example: border, shadow, font property etc.
You can give values to these properties separated by spaces.
- CSS is written in form of rulesets.
- Each ruleset has 3 different parts selector, CSS property and CSS value.
- Multiple selectors can be separated using a comma.