Exercise: Using cascading to style a document
Choose rules to style the two unordered lists as follows:
- Square bullets for the Gnus affiliates.
- Circle bullets for the movies.
You do not need to change the HTML document.
Note:
Hints:
- undefined
Styling headers
Now, choose rules for the various types of headers:
- The header at the top of the page should remain as it is.
- The header for the Gnus affiliates should have a yellow background and a solid black border that is 2 pixels wide.
- The headers for Local Gnus, Us Gnus and World Report, and Entertainment Gnus should have a pink background, black text, and a solid red border that is 2 pixels wide.
You do not need to change the HTML document.
Note:
Hints:
- undefined
Styling text
Finally, add style to the classes red
(the colour red), green
(the colour green), movies
(a width of 15rem), and travel
(in blue italics, with a width of 30 rem).
You do not need to change the HTML document.
Note:
Hints:
- undefined
Solution
Here is a possible solution to the exercise.
Note:
Hints:
- undefined
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
<!DOCTYPE html>
<html lang="en">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
h1 {
font-size: 2em;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX