CSS Introduction Practice Questions with Solutions

Introduction

CSS (Cascading Style Sheets) is used to style HTML elements and improve the appearance of web pages. With CSS, you can change colors, fonts, backgrounds, spacing, borders, and much more. This chapter contains beginner-friendly solved practice questions to help you understand the basics of CSS through real examples instead of lengthy theory. CSS Introduction Practice questions with solutions help to understand the concepts.

Question 1: Change the Color of a Heading

Problem Statement

Write CSS to change the text color of an <h1> heading to blue.

CSS Code

h1{
    color: blue;
}

Output

The <h1> heading text appears in blue.

Explanation

• h1 selects all <h1> elements.
• color is used to change the text color.
• blue is the color value applied to the heading.

Question 2: Change the Background Color of the Web Page

Problem Statement

Write CSS to set the background color of the webpage to light yellow.

CSS Code

body{
    background-color: lightyellow;
}

Output

The entire webpage displays a light yellow background.

Explanation

• body selects the complete webpage.
• background-color changes the page background.
• lightyellow gives the page a soft and readable appearance.

Question 3: Increase the Font Size of a Paragraph

Problem Statement

Write CSS to increase the font size of all paragraphs to 24 pixels.

CSS Code

p{
    font-size: 24px;
}

Output

All paragraph text appears larger (24px).

Explanation

• p selects every paragraph.
• font-size controls the size of the text.
• 24px sets the text height to 24 pixels.

Question 4: Make Paragraph Text Bold

Problem Statement

Write CSS to make all paragraph text bold.

CSS Code

p{
    font-weight: bold;
}

Output

The paragraph text appears bold.

Explanation

• font-weight controls the thickness of text.
• bold makes the text darker and thicker than normal.
• This property is commonly used for important content.

Question 5: Center Align a Heading

Problem Statement

Write CSS to display an <h1> heading in the center of the page.

CSS Code

h1{
    text-align: center;
}

Output

The heading appears center aligned on the webpage.

Explanation

• text-align controls horizontal text alignment.
• center places the heading in the middle of its container.
• It is widely used for page titles and banners.

Question 6: Change the Font Family

Problem Statement

Write CSS to display all paragraph text using the Arial font.

CSS Code

p{
    font-family: Arial;
}

Output

All paragraph text appears in the Arial font.

Explanation

• font-family is used to change the style of the text.
• Arial is a clean and commonly used font.
• If Arial is available on the user’s device, the browser displays the text in that font.

Question 7: Add a Border Around a Div

Problem Statement

Write CSS to add a 2px solid black border around a <div> element.

CSS Code

div{
    border: 2px solid black;
}

Output

A 2-pixel solid black border appears around the <div> element.

Explanation

• border is a shorthand property.
• 2px defines the border thickness.
• solid defines the border style.
• black sets the border color.

Question 8: Add Padding Inside a Div

Problem Statement

Write CSS to add 20 pixels of padding inside a <div> element.

CSS Code

div{
    padding: 20px;
}

Output

Extra space is added inside the <div> around its content.

Explanation

• padding creates space between the content and the border.
• 20px adds equal padding on all four sides.
• Padding improves readability and layout.

Question 9: Apply Multiple CSS Properties

Problem Statement

Write CSS to make an <h2> heading green, center aligned, and 30 pixels in size.

CSS Code

h2{
    color: green;
    text-align: center;
    font-size: 30px;
}

Output

The <h2> heading appears:

• Green
• Center aligned
• 30 pixels in size

Explanation

• Multiple CSS properties can be written inside one rule.
• color changes the text color.
• text-align centers the heading.
• font-size increases the text size.

Question 10: Style a Button

Problem Statement

Write CSS to create a button with a blue background, white text, and 10 pixels of padding.

CSS Code

button{
    background-color: blue;
    color: white;
    padding: 10px;
}

Output

The button displays:

• Blue background
• White text
• Comfortable spacing inside the button

Explanation

• background-color changes the button’s background.
• color changes the text color.
• padding creates space inside the button, making it easier to click.

Key Takeaways

• CSS is used to style HTML elements.
• CSS properties define how elements look on a webpage.
• Every CSS rule contains a selector, property, and value.
• Multiple properties can be applied to the same element.
• CSS helps improve the appearance and readability of web pages.
• Simple CSS properties can completely change the look of a webpage.
• Regular practice is the best way to become confident with CSS.

Frequently Asked Questions (FAQs)

1. What does CSS stand for?

CSS stands for Cascading Style Sheets.

2. Why is CSS used?

CSS is used to style HTML elements by changing colors, fonts, spacing, borders, layouts, and other visual properties.

3. Can CSS be used without HTML?

No. CSS is mainly used to style HTML or XML documents.

4. What is a CSS selector?

A selector identifies the HTML element that you want to style, such as h1, p, or div.

5. What is a CSS property?

A property defines what you want to change, such as color, font-size, or background-color.

6. Can one CSS rule contain multiple properties?

Yes. A single CSS rule can include multiple properties separated by semicolons.

7. Is CSS difficult to learn?

No. CSS is beginner-friendly, and with regular practice, you can learn it quickly.

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

Rishabh Kumar