• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

CSS Syntax

← Previous Next →

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.

Practice 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>.

← Previous Next →

Try a Short Quiz.

coding learning websites codepractice

No quizzes available.

CSS

online coding class codepractice

CSS Basics

CSS Styling Properties

CSS Advanced Selectors & Features

CSS Media and Image Styling

CSS Layout Techniques

CSS Flexbox

CSS Grid

CSS Responsive Design (RWD)

codepractice logo
Login
Go Back Top