C050 Media Type

In this task, you will experiment with a simple form of dynamic CSS. Start by creating an empty HTML page with the following content:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <h1>Lorem ipsum dolor</h1>
    <div class="menu">
        [<a href="#">Menu 1</a>] [<a href="#">Menu 2</a>] [<a href="#">Menu 3</a>] [<a href="#">Menu 4</a>]
    </div>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error ratione vero deserunt obcaecati reiciendis optio nihil quaerat sequi suscipit magni similique enim nam ullam quod consequatur eligendi, earum placeat aperiam?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error ratione vero deserunt obcaecati reiciendis optio nihil quaerat sequi suscipit magni similique enim nam ullam quod consequatur eligendi, earum placeat aperiam?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error ratione vero deserunt obcaecati reiciendis optio nihil quaerat sequi suscipit magni similique enim nam ullam quod consequatur eligendi, earum placeat aperiam? Lorem ipsum dolor sit amet consectetur adipisicing elit. Error ratione vero deserunt obcaecati reiciendis optio nihil quaerat sequi suscipit magni similique enim nam ullam quod consequatur eligendi, earum placeat aperiam?</p>
</body>
</html>

And the following CSS:

h1 {
    color: red;
}

.menu {
    text-transform: uppercase;
    font-size: 1.5em;
}

View the page using Live Server—it should look something like this:

Your task is to add CSS to style.css so that:

The heading changes to black text, and
The menu is hidden when printed (view the result in Chrome’s print preview by pressing Ctrl+P).

Use @media print to create a “print-view.”

See a possible solution

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <h1>Lorem ipsum dolor</h1>
    <div class="menu">
        [<a href="#">Menu 1</a>] [<a href="#">Menu 2</a>] [<a href="#">Menu 3</a>] [<a href="#">Menu 4</a>]
    </div>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error ratione vero deserunt obcaecati reiciendis optio nihil quaerat sequi suscipit magni similique enim nam ullam quod consequatur eligendi, earum placeat aperiam?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error ratione vero deserunt obcaecati reiciendis optio nihil quaerat sequi suscipit magni similique enim nam ullam quod consequatur eligendi, earum placeat aperiam?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error ratione vero deserunt obcaecati reiciendis optio nihil quaerat sequi suscipit magni similique enim nam ullam quod consequatur eligendi, earum placeat aperiam? Lorem ipsum dolor sit amet consectetur adipisicing elit. Error ratione vero deserunt obcaecati reiciendis optio nihil quaerat sequi suscipit magni similique enim nam ullam quod consequatur eligendi, earum placeat aperiam?</p>
</body>
</html>

h1 {
    color: red;
}

.menu {
    text-transform: uppercase;
    font-size: 1.5em;
}

@media print {
    h1 {
        color: black;
    }
    .menu {
        display: none;
    }
}