If you’re learning web development, understanding CSS syntax is crucial. CSS (Cascading Style Sheets) controls the visual style of your website — colors, fonts, spacing, layout, and more.
In this article, you’ll learn:
- What CSS syntax is
- How to write CSS rules
- Real examples to help you get started
What is CSS Syntax?
CSS syntax refers to the structure of how styles are written. It tells the browser which HTML element to style, what to style, and how to style it.
Basic Structure of CSS
A CSS rule is written like this:
selector {
property: value;
}
Example:
h1 {
color: blue;
font-size: 24px;
}
This code styles all <h1> elements to be blue and sets the font size to 24 pixels.
CSS Syntax Components
Selector
The selector identifies which HTML element you want to style.
Examples:
p { ... } /* Styles all paragraphs */
#header { ... } /* Styles the element with ID "header" */
.button { ... } /* Styles elements with class "button" */
Property
A property defines what you want to style—like color, width, margin, etc.
Value
A value specifies how the property should be styled.
Example:
color: red; /* Sets text color to red */
margin: 10px; /* Adds 10px of space around the element */
font-family: Arial; /* Applies Arial font */
Full CSS Example
body {
background-color: #f4f4f4;
font-family: 'Roboto', sans-serif;
line-height: 1.5;
}
This rule applies styles to the <body> element for background color, font, and spacing.
⚠️ Common CSS Syntax Rules
- Use curly braces
{ }to group properties - End each property with a semicolon
; - Use a colon
:to separate properties from values - Use consistent formatting for readability
Bonus: Multiple Declarations in One Rule
You can apply many styles at once:
a {
text-decoration: none;
color: #0066cc;
font-weight: bold;
}
Tip:
Using clean, organized CSS not only makes development easier, but it also improves page speed and accessibility, which are important for Google rankings.
Conclusion
CSS syntax is the foundation of web design. By learning how to write CSS rules correctly, you can style any HTML page beautifully and consistently.
