POPULAR
Instant Online HTML Formatter
NEW TOOL
Try our Interactive Python Online Playground!
FEATURED
HTML, CSS & JS Live Code Playground
POPULAR
Try Our Online Code Editor and Compiler
POPULAR
Instant Online HTML Formatter
NEW TOOL
Try our Interactive Python Online Playground!
FEATURED
HTML, CSS & JS Live Code Playground
POPULAR
Try Our Online Code Editor and Compiler
CSS Syntax
CSS syntax defines how styling rules are written and applied to HTML elements. Understanding CSS syntax is the foundation of working with stylesheets. Every color change, font adjustment, layout rule, or spacing update in CSS follows a specific syntax pattern. In this chapter, you will learn the structure of CSS rules, selectors, properties, values, declarations, blocks, and how browsers read and apply CSS code.
What Is CSS Syntax
CSS syntax is the format used to write CSS rules. Each rule tells the browser which HTML elements to target and how they should be styled. A single mistake in syntax, such as a missing semicolon or bracket, can prevent styles from working correctly.
A CSS rule is made up of two main parts:
-
Selector
-
Declaration block
Together, they define what should be styled and how it should look.
Basic Structure of a CSS Rule
The basic syntax of a CSS rule looks like this:
selector {
property: value;
}
-
Selector selects the HTML element
-
Property defines what you want to change
-
Value specifies how the change should appear
The selector and declaration block together form one complete CSS rule.
Understanding Selectors in CSS Syntax
Selectors are the first part of a CSS rule. They tell the browser which HTML elements the style should apply to.
Example
p {
color: blue;
}
Here, p is the selector. This rule applies to all <p> elements on the page.
Selectors are a core part of CSS syntax, and different types of selectors allow precise control over styling.
Declaration Block Explained
The declaration block is enclosed within curly braces { }. It contains one or more declarations separated by semicolons.
h1 {
color: green;
font-size: 32px;
}
Each line inside the block is a declaration.
CSS Declarations
A declaration consists of two parts:
-
Property
-
Value
They are separated by a colon and end with a semicolon.
color: red;
The semicolon is important because it tells the browser where one declaration ends and the next begins.
CSS Properties
Properties define what aspect of an element you want to style. Examples include:
-
color -
background-color -
font-size -
margin -
padding -
border -
width -
height
Each property has specific allowed values.
CSS Values
Values define how the property should be applied. Values can be:
-
Keywords such as
red,bold,center -
Lengths such as
10px,2em,50% -
Colors such as
#000000,rgb(255, 0, 0) -
URLs such as
url(image.jpg)
Example
p {
font-size: 16px;
color: #333333;
}
Multiple Declarations in One Rule
A single selector can have multiple declarations.
div {
width: 300px;
padding: 20px;
background-color: #f2f2f2;
}
This allows you to style many aspects of an element at once.
CSS Syntax with Multiple Selectors
CSS syntax allows you to apply the same styles to multiple selectors by separating them with commas.
Example
h1, h2, h3 {
font-family: Arial, sans-serif;
color: navy;
}
This rule applies to all heading elements listed.
Whitespace and Formatting in CSS Syntax
CSS ignores extra spaces, tabs, and line breaks. However, proper formatting improves readability.
Valid but unreadable
p{color:red;font-size:14px;}
Recommended format
p {
color: red;
font-size: 14px;
}
Good formatting makes CSS easier to debug and maintain.
CSS Comments and Syntax
Comments are used to explain CSS code. They do not affect styling and are ignored by the browser.
Syntax for comments
/* This is a CSS comment */
Comments can span multiple lines.
/*
This styles the main container
and sets spacing
*/
CSS Syntax in Inline, Internal, and External Styles
CSS syntax remains the same regardless of where it is written.
Inline CSS syntax
<p style="color: blue; font-size: 16px;">Text</p>
Internal CSS syntax
<style>
p {
color: blue;
}
</style>
External CSS syntax
p {
color: blue;
}
Only the placement changes, not the syntax.
CSS Syntax and Case Sensitivity
CSS properties and values are generally not case-sensitive. However, file paths, class names, and IDs are case-sensitive in some environments.
Example
background-color: red;
This works the same as:
Background-Color: red;
Still, lowercase is the standard and recommended practice.
Order of CSS Rules and Syntax
CSS follows a top-to-bottom approach. If two rules target the same element with the same specificity, the one written later is applied.
Example
p {
color: red;
}
p {
color: blue;
}
The paragraph text will be blue because the second rule comes later.
Common CSS Syntax Errors
Beginners often face issues due to syntax mistakes such as:
-
Missing semicolons
-
Forgetting closing curly braces
-
Using incorrect property names
-
Misspelling values
-
Writing properties outside declaration blocks
Incorrect syntax
p {
color red
}
Correct syntax
p {
color: red;
}
CSS Syntax Validation
Valid CSS syntax ensures that styles work consistently across browsers. Many online tools and code editors highlight syntax errors automatically. Writing clean and valid syntax prevents unexpected styling issues.
Best Practices for Writing CSS Syntax
Some recommended practices include:
-
Use proper indentation
-
End every declaration with a semicolon
-
Group related styles together
-
Use comments for clarity
-
Keep selectors simple and readable
Following these practices improves code quality and teamwork.
Summary of 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 contains properties and values. Understanding selectors, declarations, comments, formatting, and rule order is essential for writing effective CSS. By mastering CSS syntax, you build a strong foundation for styling webpages efficiently and avoiding common errors. Clean and correct syntax makes CSS easier to read, debug, and maintain in real-world projects.
⚡ Want to test or run code snippets from this lesson?
Use CodePractice Universal Try-It Editor to run HTML, CSS, JS, Python, C, C++, Java & MySQL live in your browser!
Launch Free Live Code EditorPractice Questions
Q1. Write a CSS rule to set the color of all <h1> elements to red.
Q2. Write a CSS rule to change the background color of the <body> to yellow.
Q3. Write a CSS rule to make all <p> elements bold.
Q4. Write a CSS rule to assign 300px width to all <div> elements.
Q5. Add a comment above a rule that styles <h2> headings.
Q6. Write a CSS rule to set Arial font for the <body>.
Q7. Write a CSS rule to center-align all <h3> text.
Q8. Write a CSS rule to give 20px padding to all <div> elements.
Q9. Write a CSS rule to set blue color and italic style for <p> elements.
Q10. Write a CSS rule to set grey background and 18px font size to the <body>.
