CSS Introduction
CSS Syntax
Understand selectors, declaration blocks, properties, values, parsing, and the rules the browser follows when it reads a CSS stylesheet.
CSS syntax defines how styles are written and applied to HTML elements.
Every CSS rule consists of a selector and a declaration block, which tells the browser what to style and how to style it.
Understanding CSS syntax is the first step to writing clean and effective styles. The supporting concepts are explained in What is CSS and How to Add CSS.
Basic Syntax Structure
css
selector {
property: value;
}Attributes
| Property | Description | Example |
|---|---|---|
| color | Sets text color | color: blue; |
| font-size | Sets text size | font-size: 20px; |
| background | Sets background color | background: yellow; |
| text-align | Aligns text | text-align: center; |
| border | Adds border around element | border: 1px solid black; |
Basic CSS Example
css
h1 {
color: red;
font-size: 24px;
}Breakdown:
h1→ Selector (targets the HTML element){ }→ Declaration blockcolor→ Propertyred→ Value;→ Ends each declaration
How invalid CSS is handled
Browsers normally discard an invalid declaration while continuing to parse the rest of the rule. This fault tolerance makes progressive enhancement possible: place a dependable declaration first, then a newer value for browsers that understand it. An unmatched brace or malformed selector can affect a larger region, so use developer tools or a CSS validator when later rules unexpectedly stop applying.
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>CSS Syntax Example</title>
<style>
h1 {
color: blue;
text-align: center;
}
p {
color: green;
font-size: 18px;
}
</style>
</head>
<body>
<h1>CSS Syntax</h1>
<p>This paragraph is styled using proper CSS syntax.</p>
</body>
</html>Browser Support
Feature | Chrome | Edge | Firefox | Safari |
|---|---|---|---|---|
| CSS declarations | 1 | 12 | 1 | 1 |
Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8.
Notes
- Each CSS rule must follow proper syntax to work correctly
- Always end each property with a semicolon (;)
- CSS is case-insensitive (but best practice is lowercase)
- Multiple properties can be written inside one selector
- Whitespace and indentation improve readability
Conclusion
CSS syntax is simple yet powerful. By understanding selectors, properties, and values, you can start styling web pages effectively. Writing clean and correct syntax ensures better performance and maintainability of your code.