CSS Syntax to Write CSS Rules
In this tutorial, we will understand the basic syntax to write CSS rules. The CSS rules are the building blocks of any style sheet that makes it. Each rule is a single statement that specifies which elements to style and how those styles should be applied.
CSS Syntax
The basic syntax to write a simple CSS rule is as follows:
selector {
property1: value1;
property2: value2;
/* more declarations */
}
This structure defines the basic format or syntax for writing CSS rules. In this syntax, there are four essential parts of a CSS rule: selector, declaration block, property, and value. It is important to understand you these four terms and their definitions.
Selector: It tells the browser which element(s) on the webpage to style.
Declaration block: The code between the opening curly brace ({) and a closing curly brace (}) is called a declaration block. It can contain one or more declarations that define the styles to be applied on the HTML element(s). Every declaration has two parts: property and value separated by a colon (:). A declaration always ends with a semi-colon (;).
Property: A property is the aspect of the selected HTML elements that you want to apply. It can be a single word or a hyphenated word, such as color, overflow, background-color, font-size, list-style-type, etc. The wide range of properties is defined by the official CSS specification.
Value: It is assigned to a property. For example, the color property can have a value of blue.
CSS Rules Example
Let’s take some valid examples to write the CSS rules based on the above syntax.
Example 1:
/* Style for all h1 elements */
h1 {
color: blue; /* Sets the text color to blue */
font-size: 24px; /* Sets the font size to 24 pixels */
text-align: center; /* Centers the text */
}
In this example, h1 is a selector. It will style all <h1> elements on the web page. The h1 selector is followed by a declaration block enclosed in the curly braces {}. Within this declaration block, there are multiple declarations, such as color: blue;, font-size: 24px;, and text-align: center; as shown in the below figure.
In the first declaration, color is the name of property and blue is its value assigned to it. In the second declaration, font-size is the property and 24px is a property value. Similarly, text-align is a property and center is a value of property in the third declaration. Each declaration is separated by a colon and ends with a semicolon.
The declaration color: blue; sets the text color of all <h1> elements to blue. The declaration of font-size: 24px; sets the font size of all <h1> elements to 24 pixels. Similarly, the text-align: center; declaration centers the text of all <h1> elements.
Example 2:
/* Style for all p elements */
p {
color: green; /* Sets the text color to green */
font-size: 18px; /* Sets the font size to 18 pixels */
line-height: 1.5; /* Sets the line height to 1.5 times the font size */
}
In this example, p is a selector, whereas color: green;, font-size: 16px and line-height: 1.5 are declarations in the declaration block.
Let’s take an example in which we will implement all the above CSS properties defined using a basic CSS syntax.
Example 3:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Example</title>
<style>
h1 {
color: blue;
font-size: 24px;
text-align: center;
}
p {
color: green;
font-size: 18px;
line-height: 1.5;
}
</style>
</head>
<body>
<h1>This is a h1 heading.</h1>
<p>This is a paragraph.</p>
</body>
</html>
Syntax for Combining CSS Rules
If two or more style rules in the CSS share the same selector, we can combine by listing their declarations within the curly braces. It is essential to include the ending semicolon for the separation between two combined rules this way.
It is recommended that you must write the ending semicolon even you are declaring only one declaration in the declaration block. The basic syntax to combine two or more CSS style rules with the same selector in a declaration block is as follows:
selector {property1: value1; property: value2; property3: value3; . . . . }
Example 4:
p { color: blue; }
p { font-size: large; }
You can combine these rules into one rule, like the following:
p { color: blue; font-size: large; }
You could have also written the rule like this:
p {
color: blue; font-size: large;
}
Note that the browsers don’t care about the whitespace.
Combining CSS Rules with Same Declarations and Different Selectors
You can also combine multiple CSS rules if they have the same declarations and different selectors. You can combine them into a single rule by listing the selectors separated by commas. The general syntax to combine CSS rules having the same declarations but different selectors is as:
selector1, selector2, selector3 {
property1: value1;
property2: value2;
/* same declarations */
}
Writing CSS rules this way helps to keep the code more concise and maintainable by reducing repetition.
Example 5:
/* Combining rules with the same declarations */
h1, h2, h3 {
color: blue;
font-size: 24px;
text-align: center;
}
In this example, the CSS applies the same styling rule such as color: blue, font-size: 24px, text-align: center to <h1>, <h2>, and <h3> elements. We can avoid redundancy in this CSS code by combining these selectors into one rule separated by commas.
Combining CSS Rules with Multiple Selectors and Declarations
You can use more than one selector together with multiple declarations in the CSS. This is perfectly legal and very common. Moreover, you can also write additional rules to further style those selectors together or separately. Look at the below example code.
Example 6:
/* Styling multiple selectors with multiple declarations */
h1, h2 {
color: blue;
font-size: 24px;
}
p {
color: green;
font-size: 16px;
}
/* Additional rule for h1 selector */
h1 {
text-align: center;
}
/* Additional rule for h2 selector */
h2 {
text-decoration: underline;
}
In this example:
- Both <h1> and <h2> elements are styled with a blue color and a font size of 24 pixels.
- All <p> elements are styled with the green color and a font size of 16 pixels.
- Moreover further, the <h1> element is aligned to the center, while the <h2> element is decorated with an underline.
This shows how you can combine multiple selectors with multiple declarations and write additional rules to further style those selectors either together or separately.
How does Browser Interpret CSS Style Rules?
A web browser interprets a CSS rule by following these steps:
(1) Read the CSS File: The browser reads the CSS file linked in the HTML document or the CSS style rules added inside <style> tag defined within the head section of an HTML document.
(2) Identify the Selector: The browser identifies the selector part of the CSS rule to determine which HTML elements it has to apply.
(3) Match Elements: The browser matches the selector to the corresponding elements in the HTML document.
(4) Apply Declarations: If the match is found, the browser applies the declarations (property-value pairs) specified in the rule on the matched elements.
(5) Cascading and Specificity: If there are multiple rules that apply to the same element, the browser determines which rule takes precedence based on the CSS cascading rules and the specificity of the selectors.
(6) Render the Styles: Finally, the browser renders the styles on the web page, displaying the elements according to the applied CSS properties.
