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.

much smaller gnu example

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.

much smaller gnu example

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).

much smaller gnu example

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-size2em;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX