Draw This - beginner
Draw a diagram showing how CSS styles are applied to an HTML web page. Include the HTML structure, the CSS rules, and how the styles affect the appearance of the page elements.
10 minutes
Hint 1
Hint 2
Hint 3
0
0
CSS for styling web pages in Intro to Computing - Draw & Build Visually
Grading Criteria
HTML structure with at least one element shown
CSS rule with selector and style properties
Arrow or label showing CSS applying to HTML element
Correct style properties (color and font-size) shown
Clear connection between CSS and affected element
Solution
HTML Structure:
+-------------------+
| <html> |
| +--------------+ |
| | <body> | |
| | +---------+ | |
| | | <p>Text</p> | |
| | +---------+ | |
| +--------------+ |
+-------------------+
CSS Rules:
p {
color: blue;
font-size: 16px;
}
Diagram showing application:
[CSS Rule: p { color: blue; font-size: 16px; }]
|
v
+-------------------+
| <p>Text</p> | <-- Text appears blue and size 16px
+-------------------+This diagram shows a simple HTML page with a paragraph <p> element inside the body. The CSS rule targets all <p> elements and sets their text color to blue and font size to 16 pixels.
The arrow shows how the CSS rule applies to the <p> element, changing its appearance on the web page. This means the text inside the paragraph will appear blue and larger than the default size.
This visual helps understand how CSS styles connect to HTML elements to change how they look.
Variations - 2 Challenges
[intermediate] Draw a diagram showing how multiple CSS rules apply to different HTML elements: a heading and a paragraph. Show different colors and font sizes for each.
[advanced] Draw a diagram illustrating the CSS box model for a single HTML element. Show content, padding, border, and margin areas with labels and explain how CSS properties control each part.