Chapter 9 Beginner 55 Questions

Practice Questions — Introduction to CSS - Styling the Web

← Back to Notes

20 Easy

12 Medium

9 Hard

Topic-Specific Questions

Question 1

Easy

What does CSS stand for?

It describes how styles flow.

Cascading Style Sheets

Question 2

Easy

What symbol separates a CSS property from its value?

Not an equal sign.

A colon :

Question 3

Easy

What symbol ends a CSS property declaration?

Not a period.

A semicolon ;

Question 4

Easy

Write a CSS rule that makes all paragraphs blue.

Use the p selector and the color property.

p {
  color: blue;
}

Question 5

Easy

Which is the best practice for adding CSS to a website: inline, internal, or external?

The one that separates concerns best.

External CSS (a separate .css file linked with <link>).

Question 6

Easy

Write the HTML tag to link an external CSS file called 'main.css'.

Use the link tag.

<link rel="stylesheet" href="main.css">

Question 7

Easy

Where do you put internal CSS in an HTML file?

Inside a specific tag in the head.

Inside a <style> tag inside the <head> section.

Question 8

Easy

Style this HTML so it has a blue background and white text. Use internal CSS.

<h1>Hello</h1>
<p>Welcome</p>

Use body selector for the background.

<!DOCTYPE html>
<html>
<head>
<style>
  body {
    background-color: blue;
    color: white;
  }
</style>
</head>
<body>
  <h1>Hello</h1>
  <p>Welcome</p>
</body>
</html>

Question 9

Easy

Which attribute is used for inline CSS?

It goes directly on an HTML tag.

style

Question 10

Easy

What is wrong with this CSS?

h1 {
  color = red;
}

CSS uses a different symbol.

CSS uses a colon :, not an equal sign =. Correct: color: red;

Question 11

Easy

Write an inline CSS rule to make an h1 red and centered.

Use the style attribute.

<h1 style="color: red; text-align: center;">My Heading</h1>

Question 12

Easy

How do you write a CSS comment?

Not like HTML.

/* comment here */

Question 13

Easy

Create a CSS rule that makes all links (a tags) have no underline.

Use text-decoration: none.

a {
  text-decoration: none;
}

Question 14

Easy

What does this CSS do?

body {
  font-family: Arial;
}

Applies to the entire body.

Sets the font of the entire page to Arial.

Question 15

Easy

Why does this CSS not work?

p
  color: blue;
  font-size: 20px;

Something is missing.

Missing curly braces { }. Properties must be inside braces.

Question 16

Medium

Create a complete HTML page with internal CSS that has a yellow background and red heading.

Use style tag in head with body and h1 selectors.

<!DOCTYPE html>
<html>
<head>
<style>
  body { background-color: yellow; }
  h1 { color: red; }
</style>
</head>
<body>
  <h1>Hello</h1>
</body>
</html>

Question 17

Medium

Which of these wins when multiple rules apply to the same element: inline, internal, or external CSS (same specificity)?

The closest to the element wins.

Inline CSS wins (highest specificity).

Question 18

Medium

Write a CSS rule that styles h1, h2, and h3 all in dark green.

Use a comma to group selectors.

h1, h2, h3 {
  color: darkgreen;
}

Question 19

Medium

In the cascade, which has higher specificity: .red or p?

Classes beat elements.

.red (class) has higher specificity than p (element).

Question 20

Medium

Aarav linked his CSS but it does not apply. Why?

<!-- index.html -->
<head>
  <link href="style.css">
</head>

Missing an attribute.

Missing rel="stylesheet". The browser does not know it is a stylesheet.

Question 21

Medium

Style a complete HTML page: background should be light blue, headings dark blue and centered, paragraphs in Arial font and grey color.

Body for background, h1 for headings, p for paragraphs.

<!DOCTYPE html>
<html>
<head>
<style>
  body {
    background-color: lightblue;
    font-family: Arial;
  }
  h1 {
    color: darkblue;
    text-align: center;
  }
  p {
    color: grey;
  }
</style>
</head>
<body>
  <h1>Priya's Page</h1>
  <p>Welcome!</p>
</body>
</html>

Question 22

Medium

What specificity does an inline style have?

It is the highest.

1000 (the highest).

Question 23

Hard

Write a complete HTML page that uses external CSS. Include both the HTML file content and what should go in style.css.

Two files: index.html links to style.css.

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Welcome</h1>
  <p>Styled with external CSS!</p>
</body>
</html>

/* style.css */
body {
  background-color: #f0f0f0;
  font-family: Arial;
}
h1 { color: purple; }
p { color: darkgreen; }

Question 24

Hard

If p { color: red; } is in external CSS and p { color: blue; } is in internal CSS below it, which color wins?

Internal CSS comes later.

Blue wins. When specificity is the same, later rules override earlier ones.

Question 25

Hard

Why does the font-size not apply?

p {
  color: red
  font-size: 20px;
}

Check for missing punctuation.

Missing semicolon after red. Without it, the parser breaks and ignores everything after.

Question 26

Hard

Build a page with 3 different sources of CSS rules that conflict: external rule makes p blue, internal makes p red, inline makes p green. Which color will the paragraph show?

Inline has the highest specificity.

<!-- Paragraph shows GREEN because inline wins -->
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="external.css"> /* p { color: blue; } */
  <style>
    p { color: red; }
  </style>
</head>
<body>
  <p style="color: green;">Hello</p>
</body>
</html>

Mixed & Application Questions

Question 1

Easy

What is the file extension for CSS files?

Short abbreviation.

.css

Question 2

Easy

Write a CSS rule for a div that has a red background and 20px of padding.

Use div as the selector.

div {
  background-color: red;
  padding: 20px;
}

Question 3

Easy

Which goes inside the : the