CSS Introduction

CSS Syntax

Written by Swapnil RajaUpdated 30 Jul 2026

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 block
color → Property
red → 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.

PreviousWhat is CSS NextHow to Add CSS