CS: Introduction to CSS: Styling Webpages
Practice using selectors, properties, values, and basic page style rules
CS: Introduction to CSS: Styling Webpages
Practice using selectors, properties, values, and basic page style rules
CS - Grade 6-8
- 1
In your own words, explain what CSS does for a webpage.
Think about the difference between the words on a page and how the page is designed.
CSS controls how a webpage looks. It can change colors, fonts, spacing, layout, borders, and other visual styles. - 2
Look at this CSS rule: p { color: blue; } Identify the selector, the property, and the value.
The selector is p. The property is color. The value is blue. - 3
Write a CSS rule that makes all h1 headings purple and centered.
Use the h1 selector and include two declarations inside curly braces.
A correct rule is h1 { color: purple; text-align: center; }. This selects every h1 heading and applies the purple color and centered alignment. - 4
A student wants every paragraph on a page to use the font Arial. Write the CSS rule they should use.
They should write p { font-family: Arial; }. This rule applies the Arial font to all paragraph elements. - 5
Explain the difference between a class selector and an ID selector in CSS.
A class is often shared by a group, while an ID identifies one specific item.
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. - 6
An HTML paragraph is written as <p class="warning">Be careful!</p>. Write a CSS rule that makes this paragraph text red.
A correct rule is .warning { color: red; }. The period shows that warning is a class selector. - 7
An HTML heading is written as <h1 id="main-title">My Website</h1>. Write a CSS rule that makes only this heading have a green background.
Use # before the ID name.
A correct rule is #main-title { background-color: green; }. The number sign shows that main-title is an ID selector. - 8
Name two different ways CSS can describe colors, and give one example of each.
One way uses words, and another way often starts with #.
CSS can use color names such as blue and hexadecimal color codes such as #ff0000. Both are valid ways to choose colors. - 9
Write a CSS rule that gives every image a solid black border that is 2 pixels wide.
A correct rule is img { border: 2px solid black; }. This selects all image elements and gives them a black border. - 10
The CSS box model includes content, padding, border, and margin. Explain what padding does.
Padding is inside the border, while margin is outside the border.
Padding adds space inside an element, between the content and the border. It makes the inside of the element less crowded. - 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?
When two equal rules conflict, the one that comes later usually wins.
The paragraph will be orange because the later rule comes after the earlier rule and overrides it when the selectors have the same strength. - 12
Find and correct the error in this CSS rule: h2 { font-size 24px; color: navy }
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. - 13
Write the HTML line that links an external CSS file named styles.css to a webpage.
This line usually goes inside the head section of an HTML document.
The correct line is <link rel="stylesheet" href="styles.css">. This tells the HTML file to load styles from the external CSS file. - 14
Write a CSS comment that says Main page styles.
A correct CSS comment is /* Main page styles */. CSS ignores this text, so it is useful for notes to the programmer. - 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.
Think about what happens when the screen is narrower than the image.
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.