CSS Syntax
Next, we will explore CSS syntax in detail, analyzing how properties and values form declarations, multiple declarations create declaration blocks, and these combined with selectors make up complete CSS rules. We will also see how to add comments inside CSS files and how whitespace is handled.
☞ CSS is a declarative language, which makes its syntax fairly easy to understand. Moreover, it is quite forgiving when it comes to errors — it simply ignores the declarations it doesn't understand (invalid ones) and does not cancel an entire rule. The downside is that identifying the source of errors becomes more difficult.
A CSS rule consists of two main blocks:
- Properties: identifiers for stylistic characteristics (font, width, background color) that can be modified.
- Values: each property has at least one value, which effectively indicates how a particular stylistic characteristic will be modified (font: normal, width: 20px, background color: green).
A property paired with a value constitutes a CSS declaration. Multiple CSS declarations form a declaration block. Finally, declaration blocks are associated with selectors to produce CSS rules (CSS Rulesets or CSS Rules).
Before moving on, let's look at the following example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS Experiment</title> <link rel="stylesheet" href="style.css"> <head> <body> <h1>CSS Rules</h1> <p>This is an example</p> <ul> <li>This is</li> <li>a list</li> <ul> </body> </html>
CSS Rules:
h1 {
colour: blue;
background-color: yellow;
border: 1px solid black;
}
p {
color: red;
}
p, li {
text-decoration: underline;
}
🔗 See the result in the editor below:
Detailed Syntax
Setting specific values for each CSS property represents the core function of the CSS language. The CSS engine calculates which declarations apply to each element on the page, in order to style and display it accordingly. The property is separated from the value by a colon (:).
There are over 300 different CSS properties and almost an infinite number of possible values, but not all property-value pairs are allowed. Each property has a specific list of permitted values.
☞ If a property is unknown or if it is assigned an invalid value, the corresponding declaration is considered null and is completely ignored by the browser's CSS engine.
CSS Selectors and Rules
Selectors indicate to declaration blocks which elements they should be applied to. This is done by prefixing each declaration block with a selector, which matches one or more elements on the page.
As previously mentioned, the selector together with the declaration block constitutes a CSS rule.
Sometimes selectors can become very complex. A rule can be created to target multiple elements by including several selectors separated by commas. For example, we could select any element with the class bau-bau, but only if it is inside an article element and only when the cursor is hovering over it. Sounds complicated, right?
Don't worry—with patience and plenty of practice, things will gradually become much clearer.
An element can be targeted by multiple selectors, which is why several rules may contain the same property. CSS will determine which rule has priority, and that rule will be applied. This is known as the cascade algorithm, and we'll discuss it in detail in the chapter "Cascade and Inheritance."
Try to identify in the following example which declaration applies to two different elements and whether there are rules that target the same element.
h1 {
color: blue;
background-color: yellow;
}
p, li {
color: red;
}
li {
text-decoration: underline;
}
Other CSS Declarations
CSS rules are the main declaration blocks in style sheets, but there are other types of blocks you will occasionally use.
Rules that always begin with @ followed by an identifier are used to convey metadata, conditional information, or other descriptive data. These types of rules have their own internal syntax and semantics. Examples include:
- @charset and @import for metadata,
- @media and @document for conditional, nested information,
- @font-face for descriptive information.
Examples:
@import 'custom.css';
The rule above imports one CSS file into another CSS file.
@media (min-width: 801px) {
body {
margin: 0 auto;
width: 800px;
}
}
The nested rule above will only be applied when the page exceeds a width of 800 pixels.
Beyond Syntax
There are a few best practice rules to make CSS code easier to use and maintain.
Whitespace
Whitespace can be added to make CSS code easier to read, and it is recommended that each declaration be placed on its own line, as you've already seen in previous examples. Just like in HTML, the browser will ignore most of the whitespace.
Example of code without whitespace:
body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em;}
The area where whitespace can cause problems is around properties and their values.
The following declarations are not valid:
↘
margin: 0auto;
padding- left: 10px;
↗
Comments
Just like in HTML, comments are useful to help you understand what the code does when revisiting the page after some time, or for colleagues working with you on a project. Comments are also useful for temporarily hiding parts of the code to identify a possible error or for testing purposes.
/* Example of a comment in CSS */
Shorthand
Some properties like font, background, padding, border, and margin allow you to set multiple property values in a single line, saving time and space.
For example, this line:
padding: 10px 20px 10px 20px;
does exactly the same as the following lines:
padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px;
The following line:
background: red url(imagine.png) 10px 10px repeat-x fixed;
produces the same result as the following lines:
background-color: red; background-image: url(imagine.png); background-position: 10px 10px; background-repeat: repeat-x; background-attachment: fixed;