Task 1 of 2 in Media Queries challenge - says I haven't specified the correct color but I have?

Question

It says "Did you specify the correct background color?" Am I missing someting?

style.css

/* Complete the challenge by writing CSS below */
@media screen and (min-width: 421px) {
  .header {
    background-color:#294969;
    text-color: ghostwhite;
  }
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Developer Diane's blog</title>
  <link rel="stylesheet" href="page.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <div id="logo">Developer Diane’s Blog</div>
  </header>
  <article>
    <section class="intro">
      <h1>The verdict is in. CSS Layout is great!</h1>
      <p>I’ve been working with CSS for a while now, and I have to say, it’s pretty awesome. I love being able to separate content from presentation, and to keep all my styles in an external stylesheet.</p>
      <p>I’ve had a pretty good grasp on the basics for a while now, but I needed to learn more about how to control layout with my CSS. Understanding CSS layout meant first exploring the parts of the CSS box model.</p>
    </section>
    <section class="featured">
      <h2>The CSS Box Model</h2>
      <p>There are lots of great resources online to help you learn the CSS Box Model. I like the CSS Tricks article <a href="https://css-tricks.com/the-css-box-model/" target="_blank">The CSS Box Model</a> by Chris Coyier. To quote the author:</p>
      <blockquote>At the risk of over-repeating myself: <strong>every element in web design is a rectangular box.</strong></blockquote>
      <p>That’s right! Every HTML element is considered by the browser to be a rectangular box.</p>
      <p>The CSS Box Model consists of four properties: content, padding, border, and margin. I've included a graphic from Coyier’s article to illustrate this principle.</p>
      <p class="clear">It’s pretty easy to understand the Content portion of the box model. The content is whatever your HTML consists of. It could be a paragraph full of text, or a bulleted list, or an image.</p>
      <p>Beginning developers may have some trouble keeping the other parts of the box model straight, so let’s examine them one by one.</p>
    </section>
    <footer>©2020 Developer Diane.</footer>
</body>
</html>

Answer 1 · 2021-08-25T14:05:02Z

August 25, 2021 2:05pm

Hi Claire Taylor

You're on the right track. There are just a couple of things.

The task asks you to select the header element. But you have put a period in front of the element name, so this is telling the rule to look for an class with the name of "header." Remember, a period is used to select a class in the HTML; a hash (#) is used to select an ID and just the name alone will select an element.
To change the color of the text, you use color not text-color.

Once you fix up those two things, it will pass.

:)

Answer 2 · 2021-09-17T11:31:20Z

September 17, 2021 11:31am

Hi,

I have followed the above as I was encountering the same issue, however I am still getting the same error "Did you specify the correct background color?"

I am really not sure what I am missing... css below;

@media screen and (min-width: 421px) { #header { background-color: #294969; color: ghostwhite; } }

Any help would be appreciated,

Thanks

Heather

Answer 3 · 2021-12-06T02:55:35Z

December 6, 2021 2:55am

@media and (max-width: 421px) { header { background-color: #294969; color: ghostwhite; } }

Welcome to the Treehouse Community

Looking to learn something new?

Claire Taylor

Claire Taylor

Task 1 of 2 in Media Queries challenge - says I haven't specified the correct color but I have?

3 Answers

Jason Anders

Jason Anders

Claire Taylor

Claire Taylor

Heather Penten

Heather Penten

Kevin Markay

Kevin Markay