CSS Introduction

CSS Syntax

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.

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

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>

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.

PreviousWhat is CSS NextHow to Add CSS