Topic

Details

Take Test

See QnA

Check scores

Back to Courses

📘 CSS Syntax – Study Notes (CBSE Class 10)

CSS (Cascading Style Sheets) syntax is the foundation of how we write styling rules for web pages. It tells the browser two important things:
👉 Which HTML element to style
👉 What style to apply

🟦 1. CSS Syntax Structure

A CSS rule has two main parts:

selector {
  property: value;
}

✔ Selector

This specifies which HTML element will receive the styles.
Example: p selects all paragraph elements (<p>).

✔ Declaration Block

Written inside { }.
Holds one or more style declarations.

Each declaration has:

Property → What style you want to change (like color, font-size).
Value → How you want to change it (like blue, 18px).

Important: Each declaration ends with a semicolon (;).

Example:

p {
  color: blue;
  font-size: 18px;
}

This styles all <p> elements to have blue text and font size of 18 pixels.

🟦 2. Selectors in CSS

Selectors choose which HTML elements to style.

📌 Types of Selectors (Class 10 Syllabus)

✔ Element Selector (Tag Selector)

Targets all elements of a specific HTML tag.
Syntax:

tagname {
  property: value;
}

Examples:

h1 {
  color: green;
}

Colors all <h1> headings green.

p {
  text-align: center;
}

body {
  background-color: lightyellow;
}

Centers text inside <p> tags.
Sets the page background to light yellow.

🟦 3. Declaration Block

The block inside { } contains style rules.

Structure:

selector {
  property: value;
  property: value;
}

Example:

h2 {
  color: red;
  font-family: Arial;
  font-size: 20px;
}

Part	Meaning
`color`	Property
`red`	Value
`font-family`	Property
`Arial`	Value
`font-size`	Property
`20px`	Value

Tip: Multiple declarations are separated by semicolons inside the declaration block.

🟦 4. Property and Value Pairs

Every declaration is a pair of property and value.

✔ Property

The style attribute you want to change.
Examples: color, margin, border-style, background-color.

✔ Value

The setting you want for that property.
Examples: blue, 10px, solid, yellow.

Example with one property:

p {
  color: blue;
}

Property: color
Value: blue

Example with multiple properties:

p {
  color: red;
  font-size: 16px;
  text-align: justify;
}

Observation: You can change several style features at once inside one rule.

🟦 5. Complete Example (Explained)

HTML:

<p>This is a paragraph.</p>

CSS:

p {
  color: blue;
  background-color: yellow;
  font-size: 18px;
}

Explanation:

Selector: p → selects all paragraph tags.
color: blue; → Text color becomes blue.
background-color: yellow; → Background of the paragraph becomes yellow.
font-size: 18px; → Text size increases to 18 pixels.

This shows how multiple properties come together to style an element completely.

🟦 6. Why Syntax Matters

Correct CSS syntax is very important because it ensures:

Styles apply correctly to the webpage.
No errors in how the page looks.
Code is clean and readable for others (and yourself!).

Remember to always use:

Curly braces { } in pairs.
Correct property and value names.
Semicolons ; after every declaration except the last one inside a block (though it's good practice to add it).

Even one small syntax error can prevent the style from working.

🎉 Fun Activity: Create Your Own CSS Rule

Objective:

See how CSS styling changes the look of a web page.

Steps:

Open a text editor (like Notepad or VS Code).
Write a simple HTML file:

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        color: purple;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <p>Hello, CSS World!</p>
  </body>
</html>

Save the file as test.html.
Open test.html in your browser.

Observations:

The text inside <p> appears in purple color, size 20px.
Changing color or font-size in the CSS block (inside <style>) and refreshing browser will reflect changes.

Try changing:

color: orange;
font-size: 24px;

and observe the new styles.

This activity helps you see CSS syntax in action!

Scenario Based Questions

Scenario: You want to style all headings (<h1>) on your webpage to be blue and centered.
- Question: Write a CSS rule for this.
- Answer:
```
h1 {
  color: blue;
  text-align: center;
}
```
Scenario: You forgot a semicolon between two declarations in a CSS rule.
- Question: What happens when you load the webpage?
- Answer: The browser may ignore the faulty declaration and possibly all rules after the missing semicolon. The style might not apply correctly.
Scenario: You want the background color of the entire webpage to be light green.
- Question: Which selector and property will you use?
- Answer: Use the body selector and background-color property:
```
body {
  background-color: lightgreen;
}
```
Scenario: You want to apply styling only to paragraphs, but notice it’s affecting other elements too.
- Question: What mistake might you have made in selector syntax?
- Answer: You might have missed or misused the selector like * (all elements) or specified a wrong tag (e.g., div instead of p).
Scenario: You want your text inside paragraphs to be red and font size 16px.
- Question: Write a CSS declaration block for this.
- Answer:
```
p {
  color: red;
  font-size: 16px;
}
```

Happy styling and keep experimenting with CSS!