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.
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; |
h1 {
color: red;
font-size: 24px;
}Breakdown:
h1→ Selector (targets the HTML element){ }→ Declaration blockcolor→ Propertyred→ Value;→ Ends each declaration
<!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>Output
Browser Output
- The heading will appear in blue color and centered
- The paragraph will appear in green with larger font size
Browser Support
 Chrome |  Firefox |  Edge |  Safari |  Opera |  IE9+ |
|---|---|---|---|---|---|
| ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes |
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.
