CSS syntax consists of rulesets that tell the browser which HTML elements to select and which visual styles to apply. Every CSS rule has two main parts: a selector before the curly braces and a declaration block inside { ... }.
Inside the curly braces, each declaration pairs a CSS property name with a value, separated by a colon (:) and terminated by a semicolon (;).
/* Selector targets all h2 headings and .section-title elements */
h2,
.section-title {
color: #1e293b;
font-size: 1.75rem;
margin-bottom: 12px;
}
.alert-box {
background-color: #eff6ff;
border-left: 4px solid #2563eb;
padding: 16px;
}
You can group multiple selectors sharing identical declarations by separating them with commas (h1, h2, h3). Notice that CSS ignores extra spaces and newlines between declarations, so placing each property on its own indented line keeps stylesheets readable during code reviews.
CSS is forgiving when parsing rules. If the browser encounters a typo in a property name (such as colr: red;) or an unsupported new feature, it safely ignores that single declaration and continues applying the remaining valid rules.
; after color: #1e293b merges the next line into an invalid value and breaks both declarations.}: A missing closing brace swallows every CSS rule below it in the stylesheet.16px or 1.5rem with zero space between the number and unit; 16 px is invalid CSS.CSS property names and standard keywords are case-insensitive, though lowercase is universal. However, class names and IDs in HTML/CSS selectors match case-sensitively in standards mode.
Browsers tolerate omitting the final semicolon, yet keeping it prevents bugs whenever someone appends another property later.
Sign in to track your learning journey, earn industry-recognized certificates, and join our elite developer community.
Quick Access With
Experiment with the code from this lesson in our interactive playground.