CSS Syntax Practice Questions with solutions

By /

Introduction

CSS syntax is the foundation of every stylesheet. Every CSS rule follows a simple structure that includes a selector, property, and value. Understanding the correct syntax helps you write clean, error-free CSS code. In this chapter, you’ll practice CSS syntax through beginner-friendly solved questions that build confidence one step at a time. CSS Syntax practice questions with solutions help to build concepts.

Question 1: Write a Basic CSS Rule for a Heading

Problem Statement

Write the correct CSS syntax to change the color of all <h1> headings to blue.

CSS Code

h1 {
    color: blue;
}

Output

All <h1> headings appear in blue.

Explanation

  • h1 is the selector.
  • color is the property.
  • blue is the value.
  • The rule is enclosed inside curly braces { }.

Question 2: Change the Font Size of a Paragraph

Problem Statement

Write the correct CSS syntax to set the font size of all paragraphs to 20 pixels.

CSS Code

p {
    font-size: 20px;
}

Output

All paragraph text is displayed with a 20px font size.

Explanation

  • p selects every paragraph.
  • font-size changes the text size.
  • 20px is the value assigned to the property.
  • Every CSS declaration ends with a semicolon (;).

Question 3: Set the Background Color of the Page

Problem Statement

Write the correct CSS syntax to change the webpage background color to light gray.

CSS Code

body {
    background-color: lightgray;
}

Output

The webpage background becomes light gray.

Explanation

  • body selects the entire webpage.
  • background-color changes the background color.
  • lightgray is the color value used.

Question 4: Apply Two CSS Properties to One Element

Problem Statement

Write CSS to make all <h2> headings green and center aligned.

CSS Code

h2 {
    color: green;
    text-align: center;
}

Output

All <h2> headings appear green and center aligned.

Explanation

  • Multiple CSS properties can be written inside the same rule.
  • Each property must end with a semicolon.
  • This keeps the code organized and easy to read.

Question 5: Change the Text Color and Background Color Together

Problem Statement

Write CSS to display white text on a black background for all paragraphs.

CSS Code

p {
    color: white;
    background-color: black;
}

Output

Paragraphs display white text on a black background.

Explanation

  • color changes the text color.
  • background-color changes the background behind the text.
  • You can combine multiple properties in one CSS rule.

Question 6: Add a CSS Comment

Problem Statement

Write a CSS comment before changing the color of an <h1> heading to red.

CSS Code

/* Change the heading color */
h1 {
    color: red;
}

Output

The <h1> heading appears in red, and the comment is ignored by the browser.

Explanation

  • /* */ is used to write comments in CSS.
  • Comments help explain your code.
  • Browsers do not display or execute comments.

Question 7: Style a Button Using Correct CSS Syntax

Problem Statement

Write CSS to create a button with a blue background and white text.

CSS Code

button {
    background-color: blue;
    color: white;
}

Output

The button displays a blue background with white text.

Explanation

  • button is the selector.
  • background-color changes the button’s background.
  • color changes the button text color.
  • Each declaration ends with a semicolon.

Question 8: Style a Div Using Three CSS Properties

Problem Statement

Write CSS to give a <div> element a light gray background, 20px padding, and a 2px solid black border.

CSS Code

div {
    background-color: lightgray;
    padding: 20px;
    border: 2px solid black;
}

Output

The <div> displays:

  • A light gray background
  • 20px inner spacing
  • A 2px solid black border

Explanation

  • background-color changes the background.
  • padding creates space inside the element.
  • border adds an outline around the element.
  • Multiple CSS properties can be written inside a single rule.

Question 9: Apply the Same Style to Multiple Elements

Problem Statement

Write CSS to change the text color of both <h1> and <h2> headings to purple.

CSS Code

h1,
h2 {
    color: purple;
}

Output

Both <h1> and <h2> headings appear in purple.

Explanation

  • Multiple selectors are separated using commas.
  • The same CSS rule is applied to all listed selectors.
  • This makes your CSS shorter and easier to maintain.

Question 10: Apply Default Styles to the Entire Webpage

Problem Statement

Write CSS to set the default font to Arial and the webpage background color to white.

CSS Code

body {
    font-family: Arial;
    background-color: white;
}

Output

The webpage uses the Arial font with a white background.

Explanation

  • body selects the entire webpage.
  • font-family changes the default font.
  • background-color sets the page background.
  • Child elements inherit the font unless another font is specified.

Key Takeaways

  • Every CSS rule follows the format: Selector → Property → Value.
  • Curly braces {} contain CSS declarations.
  • Each declaration should end with a semicolon (;).
  • A selector can have multiple CSS properties.
  • Multiple selectors can share the same rule using commas.
  • CSS comments improve code readability and maintenance.
  • Writing proper CSS syntax helps prevent coding errors.

Frequently Asked Questions (FAQs)

1. What is CSS syntax?

CSS syntax is the correct way of writing CSS rules. Each rule contains a selector, one or more properties, and their values.

2. What are the three main parts of a CSS rule?

A CSS rule consists of:

  • Selector – Selects the HTML element.
  • Property – Defines the style to apply.
  • Value – Specifies how the property should appear.

3. Why are curly braces used in CSS?

Curly braces {} group all the CSS declarations that belong to a selector. Every property and value pair is written inside them.

4. Why should every CSS declaration end with a semicolon?

A semicolon separates CSS declarations. It allows the browser to correctly read multiple properties within the same rule.

5. Can I apply multiple properties to the same selector?

Yes. You can add multiple CSS properties inside one rule to style an element in different ways.

6. Can multiple selectors use the same CSS rule?

Yes. Separate selectors with commas to apply identical styles to all selected elements.

7. Why are CSS comments important?

CSS comments help explain your code and improve readability. They are ignored by browsers and do not affect the webpage.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top