Home Tutorials Videos Q&A MCQ Shortcuts Exercises Appointment Login

CSS Syntax

CSS Syntax is the set of rules used to write CSS code correctly. Every CSS rule contains a Selector, a Property, and a Value.

1. What is CSS Syntax?

CSS syntax defines how style rules are written.

Every CSS rule tells the browser:

  • Which HTML element should be styled.
  • Which property should be changed.
  • What value should be applied.

h1{
    color: blue;
}
The above CSS changes the color of every <h1> heading to blue.

2. Parts of CSS Syntax

Part Description
Selector Selects the HTML element to style.
Property Defines what style will be changed.
Value Specifies the value for the property.
Declaration A property and value together. 

p{
    color:red;
}
Here, p is the selector, color is the property, and red is the value.

3. CSS Selector

A selector tells the browser which HTML elements should receive the style.

Selector Selects
h1 All h1 elements
p All paragraphs
img All images
body The entire webpage 

h2{
    color:green;
}
Every h2 element will appear in green.

4. CSS Property

A property specifies which style you want to change.

Property Purpose
color Changes text color.
background-color Changes background color.
font-size Changes text size.
text-align Aligns text.
border Adds a border.
CSS contains hundreds of properties for styling web pages.

5. CSS Value

A value tells the browser exactly how the property should be applied.

Property Value Result
color blue Blue text
font-size 24px 24-pixel text
text-align center Centered text
background-color yellow Yellow background 

p{
    font-size:20px;
    color:blue;
}
A property becomes useful only when it is assigned a value.

6. CSS Declaration Block

A Declaration Block is the part enclosed inside curly braces { }. It contains one or more CSS declarations. 


h1{

    color: blue;

    font-size: 36px;

}
Declaration Meaning
color: blue; Changes the text color to blue.
font-size: 36px; Sets the font size to 36 pixels.
A declaration block may contain one or many declarations.

7. Multiple CSS Properties

You can apply multiple styles to the same HTML element. 


p{

    color: navy;

    font-size: 20px;

    font-family: Arial;

    text-align: center;

    background-color: #f2f2f2;

}
Output
  • Text color becomes navy.
  • Font size becomes 20px.
  • Font family changes to Arial.
  • Paragraph becomes centered.
  • Background becomes light gray.
Multiple properties improve the appearance of an element with a single CSS rule.

8. CSS Comments

Comments are used to explain CSS code. Browsers ignore comments. 


/* This is a CSS comment */

h1{

    color: red;

}
Uses of Comments
  • Explain CSS code.
  • Improve readability.
  • Temporarily disable code.
  • Organize large stylesheets.
Always use comments to organize large CSS projects.

9. Writing Clean CSS

Good Example

body{

    background:#ffffff;

}

h1{

    color:blue;

    text-align:center;

}

p{

    font-size:18px;

}
Tips for Clean CSS
  • Use proper indentation.
  • Keep one declaration per line.
  • Use meaningful class names.
  • Group related properties together.
  • Remove unnecessary code.
  • Use comments where required.
Clean CSS is easier to read, maintain and debug.

10. Practical CSS Syntax Examples

Example 1 : Change Heading Color

h1{

    color:green;

}
Example 2 : Style a Paragraph

p{

    color:#444;

    font-size:18px;

}
Example 3 : Style the Web Page

body{

    background:#f8f9fa;

    font-family:Arial;

}
Example 4 : Style a Button

button{

    background:#007bff;

    color:white;

    padding:10px 20px;

    border:none;

}
Practice these examples in your code editor to understand how CSS syntax works.

11. Browser Support

CSS syntax follows a standard supported by all modern web browsers.

Browser Support
Google Chrome ✔ Excellent
Mozilla Firefox ✔ Excellent
Microsoft Edge ✔ Excellent
Safari ✔ Excellent
Opera ✔ Excellent
Modern browsers fully support standard CSS syntax.

12. CSS Syntax Best Practices

  • Write one property on each line.
  • Always end declarations with a semicolon (;).
  • Use proper indentation.
  • Keep selectors simple and meaningful.
  • Group related properties together.
  • Use external CSS for large websites.
  • Add comments to organize your stylesheet.
  • Remove unused CSS rules.
  • Validate your CSS before publishing.
  • Use lowercase property names.
Following these practices makes your CSS easier to read and maintain.

13. Common CSS Syntax Errors

Error Correct Way
Missing semicolon color: blue;
Missing colon font-size:20px;
Missing curly braces { ... }
Incorrect property name background-color
Incorrect selector Use valid HTML selectors. 

❌ Wrong

h1

color:red

✔ Correct

h1{

    color:red;

}
Even a small syntax mistake can prevent CSS from working correctly.

14. CSS Syntax Interview Questions

  1. What is CSS syntax?
  2. What are the parts of a CSS rule?
  3. What is a selector?
  4. What is a declaration block?
  5. What is a CSS property?
  6. What is a CSS value?
  7. Why are curly braces used in CSS?
  8. Why should every declaration end with a semicolon?
  9. Can one selector contain multiple properties?
  10. Which type of CSS is recommended for large websites?
Practice answering these questions to strengthen your understanding of CSS syntax.

15. Lesson Summary

In this lesson, you learned:
  • ✔ What CSS syntax is.
  • ✔ Selector, Property and Value.
  • ✔ Declaration Block.
  • ✔ Multiple CSS Properties.
  • ✔ CSS Comments.
  • ✔ Writing clean CSS.
  • ✔ Practical syntax examples.
  • ✔ Browser support.
  • ✔ Best practices.
  • ✔ Common syntax mistakes.
Congratulations! You have successfully completed the CSS Syntax lesson.

Quick Quiz

Which symbol starts a CSS declaration block?





← Previous Next →