CS: Introduction to CSS: Styling Webpages Worksheet

Question 1

In your own words, explain what CSS does for a webpage.

Accepted Answer

CSS controls how a webpage looks. It can change colors, fonts, spacing, layout, borders, and other visual styles.

Question 2

Look at this CSS rule: p { color: blue; } Identify the selector, the property, and the value.

Accepted Answer

The selector is p. The property is color. The value is blue.

Question 3

Write a CSS rule that makes all h1 headings purple and centered.

Accepted Answer

A correct rule is h1 { color: purple; text-align: center; }. This selects every h1 heading and applies the purple color and centered alignment.

Question 4

A student wants every paragraph on a page to use the font Arial. Write the CSS rule they should use.

Accepted Answer

They should write p { font-family: Arial; }. This rule applies the Arial font to all paragraph elements.

Question 5

Explain the difference between a class selector and an ID selector in CSS.

Accepted Answer

A class selector starts with a period and can be used on many elements. An ID selector starts with a number sign and should be used for one unique element on a page.

Question 6

An HTML paragraph is written as

Be careful!

. Write a CSS rule that makes this paragraph text red.

Accepted Answer

A correct rule is .warning { color: red; }. The period shows that warning is a class selector.

Question 7

An HTML heading is written as

My Website

. Write a CSS rule that makes only this heading have a green background.

Accepted Answer

A correct rule is #main-title { background-color: green; }. The number sign shows that main-title is an ID selector.

Question 8

Name two different ways CSS can describe colors, and give one example of each.

Accepted Answer

CSS can use color names such as blue and hexadecimal color codes such as #ff0000. Both are valid ways to choose colors.

Question 9

Write a CSS rule that gives every image a solid black border that is 2 pixels wide.

Accepted Answer

A correct rule is img { border: 2px solid black; }. This selects all image elements and gives them a black border.

Question 10

The CSS box model includes content, padding, border, and margin. Explain what padding does.

Accepted Answer

Padding adds space inside an element, between the content and the border. It makes the inside of the element less crowded.

Question 11

Look at these two CSS rules: p { color: black; } p { color: orange; } If both rules apply to the same paragraph and nothing else changes, what color will the paragraph be, and why?

Accepted Answer

The paragraph will be orange because the later rule comes after the earlier rule and overrides it when the selectors have the same strength.

Question 12

Find and correct the error in this CSS rule: h2 { font-size 24px; color: navy }

Accepted Answer

The corrected rule is h2 { font-size: 24px; color: navy; }. The font-size declaration needed a colon, and adding the final semicolon is a good habit.

Question 13

Write the HTML line that links an external CSS file named styles.css to a webpage.

Accepted Answer

The correct line is <link rel="stylesheet" href="styles.css">. This tells the HTML file to load styles from the external CSS file.

Question 14

Write a CSS comment that says Main page styles.

Accepted Answer

A correct CSS comment is /* Main page styles */. CSS ignores this text, so it is useful for notes to the programmer.

Question 15

A student writes this CSS for images: img { width: 600px; } Explain one problem this could cause on a small phone screen and suggest a better rule.

Accepted Answer

A fixed width of 600px could be too wide for a small phone screen and make the page hard to use. A better rule is img { max-width: 100%; height: auto; } because it lets images shrink to fit the screen.

CS: Introduction to CSS: Styling Webpages

Related Cheat Sheets

More CS Worksheets

More Grade 6-8 Worksheets