• Hajipur, Bihar, 844101

☰
❮
❯

CSS

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)

CSS Syntax

← Previous Next →

🔸 What is CSS Syntax?

CSS syntax is the way we write rules to style HTML elements. Each rule consists of:

  • A Selector – targets the HTML element.

  • A Declaration Block – contains one or more declarations inside curly braces {}.

  • A Declaration – consists of a property and a value, separated by a colon :.

🔸 Basic Structure

selector {
  property: value;
}
🔸 Example
p {
  color: red;
  font-size: 18px;
}

  • p is the selector.

  • color and font-size are properties.

  • red and 18px are values.

  • Declarations are separated by semicolons and wrapped in {}.

🔸 CSS Comments

CSS comments are used to explain the code. They are not displayed in the browser.

/* This is a CSS comment */
body {
  background-color: lightblue;
}

🔸 Breakdown Table

Part Example Description
Selector p Targets paragraph elements
Property color Style to apply
Value red Setting of the property
Declaration color: red; Full style instruction
Rule p { color: red; } Complete CSS rule

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

CSS Syntax Quiz

Q1: What symbol is used to define a block of CSS rules?

A. ()
B. []
C. {}
D. <>

Q2: How do you write a comment in CSS?

A. # comment
B. // comment
C. <!-- comment -->
D. /* comment */

Q3: What does this rule do: p { color: red; }?

A. Sets the background color of <p>
B. Sets the font style
C. Sets the text color to red
D. Makes the text bold

Q4: What is the correct CSS syntax to set font size?

A. font-size = 16px;
B. font-size: 16px;
C. font: size 16px;
D. fontsize: 16;

Q5: How are multiple declarations separated?

A. Commas ,
B. Dashes -
C. Semicolons ;
D. Slashes /

Q6: Which is the correct selector for all <p> elements?

A. #p
B. .p
C. p
D. <p>

Q7: What is the purpose of a selector in CSS?

A. Apply animations
B. Select the styling color
C. Choose the HTML element to style
D. Create a form

Q8: Which part of the rule is font-size?

A. Selector
B. Value
C. Declaration
D. Property

Q9: What is the correct syntax to change background color?

A. bg-color: blue;
B. background: color blue;
C. background-color: blue;
D. bg: blue;

Q10: Which file extension is used for CSS files?

A. .html
B. .js
C. .css
D. .txt
← Previous Next →
Login
Go Back Top