Question: Hello, I have one last question for my assignment and I am stumped. Below the desktop media query, add a new comment with the text,

Hello, I have one last question for my assignment and I am stumped. Below the desktop media query, add a new comment with the text, Media Query for Print. Below the comment, add a new media query that targets print. Within the print media query, add a style rule for the body selector that sets the background-color to #fff and the color to #000.

/* Author: Maria Cruz Date: Current Date File Name: styles.css */

/* CSS Reset */

body, header, nav, main, footer, img, h1, ul

{ margin: 0;

padding: 0;

border: 0; }

/* Style rule for images */

img { max-width: 100%;

display: block; }

/* Style rules for mobile viewport */

/* Hide tab-desk class */

.tab-desk { display: none; }

/* Style rules for header content */

header { text-align: center;

font-size: 1.5em;

color: #373684; }

header h1 { font-family: 'DM Serif Display',

serif; font-style: italic; }

/* Style rules for navigation area */

nav { background-color: #373684; }

nav ul { list-style-type: none;

text-align: center; }

nav li { display: block;

font-size: 2em;

border-top: 1px solid #e5e9fc; }

nav li a { display: block;

color: #fff;

text-align: center;

padding: 0.5em 1em;

text-decoration: none; }

/* Style rules for main content */

main { padding: 2%;

background-color: #e5e9fc;

overflow: auto;

font-family: 'Roboto', sans-serif; }

main p { font-size: 1.25em; }

.action { font-size: 1.25em;

color: #373684;

font-weight: bold; }

#piano, #guitar, #violin { margin: 0 2%; }

#info { clear: left;

background-color: #c0caf7;

padding: 1% 2%; }

#info ul { margin-left: 10%; }

.round { border-radius: 8px; }

#contact { text-align: center; }

.tel-link { background-color: #373684;

padding: 2%;

margin: 0 auto;

width: 80%;

text-align: center;

border-radius: 5px; }

.tel-link a { color: #fff;

text-decoration: none;

font-size: 1.5em;

display: block; }

#contact .email-link { color: #4645a8;

text-decoration: none;

font-weight: bold; }

.map { border: 5px solid #373684;

width: 95%;

height: 50%; }

/* Style rules for footer content */

footer { text-align: center;

font-size: 0.65em;

clear: left; }

footer a { color: #4645a8;

text-decoration: none; }

/* Media Query for Tablet Viewport */

@media screen and (min-width: 550px), print { }

/* Tablet Viewport: Show tab-desk class, hide mobile class */

.tab-desk { display: block; }

.mobile { display: none; }

/* Tablet Viewport: Style rule for header content */

span.tab-desk { display: inline; }

/* Tablet Viewport: Style rules for nav area. */

nav li { border-top: none;

display:inline-block;

font-size: 1.5em;

border-right: 1px solid #e5e9fc; }

li:last-child { border-right: none;}

nav li a{ padding-top: .25em;

padding-bottom: .25em;

padding-left: .5em;

padding-right: .5em; }

/* Tablet Viewport: Style rule for map.*/

.map{ width:500px;

height:450px; }

/* Media Query for Desktop Viewport.*/

@media screen and (min-width:769px), print { }

/* Desktop Viewport: Style rule for header.*/

header { padding:2%; }

/* Desktop Viewport: Style rules for nav area.*/

nav li a{ padding-top:.5em;

padding-bottom: .5em;

padding-right: 1.5em;

padding-left: 1.5em; }

a:hover{ color:#373684;

background-color: #e5e9fc; }

/* Desktop Viewport: Style rules for main content */

#info ul { margin-left: 5%; }

main h3{ font-size: 1.5em; }

#piano, #guitar, #violin{

width: 29%;

float: left;

margin-top: 0;

margin-bottom: 0;

margin-left: 2%;

margin-right: 2%; }

/* Media Query for Print*/

@media print{ body{ background-color:#fff; color:#000; } }

Here is the error I am receiving.

Traceback (most recent call last): File "nt-test-525514a0", line 10, in raise AssertionError() AssertionError

with open('music/css/styles.css', 'r') as f: contents = f.read() count = contents.count('body') if "@media print" not in contents: raise AssertionError() if count != 2: print count raise AssertionError() if "background-color: #fff;" not in contents: raise AssertionError() if "color: #000;" not in contents: raise AssertionError()

Step by Step Solution

There are 3 Steps involved in it

1 Expert Approved Answer
Step: 1 Unlock blur-text-image
Question Has Been Solved by an Expert!

Get step-by-step solutions from verified subject matter experts

Step: 2 Unlock
Step: 3 Unlock

Students Have Also Explored These Related Databases Questions!