Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Basics (2014) Enhancing the Design With CSS Media Queries

Im receiving an error saying 'did you specify the correct font size for the h1 element' but it looks correct.

css, stage 6 challenge task 2 of 2

style.css
/* Complete the challenge by writing CSS below */
@media( max-width: 1020px) {

  .main-header{
     background-color: tomato;
     color: white;
  }

}

@media( max-width: 768px) {
  .title{
     font-size: 1.4rem;
  }

  .h1{
     font-size: 5rem;
  }
}
index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Lake Tahoe</title>
    <link rel="stylesheet" href="page.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body> 
    <header id="top" class="main-header">
      <span class="title">Journey Through the Sierra Nevada Mountains</span>
      <h1 class="main-heading">Lake Tahoe, California</h1>
    </header>

        <div class="primary-content">
            <p class="intro">
                Lake Tahoe is one of the most breathtaking attractions located in California. It's home to a number of ski resorts, summer outdoor recreation, and tourist attractions. Snow and skiing are a significant part of the area's reputation.
            </p>
            <a class="callout" href="#more">Find out more</a>
        </div><!-- End .primary-content -->
  </body>
</html>

3 Answers

Steven Parker
Steven Parker
220,501 Points

The font size is correct, but when targeting an element by tag name, you don't want a period in front on the selector..

Periods indicate class names.

Like Steven pointed out.

h1 is the element you are attempting to target but by typing .h1 its is looking for an class, example, class="h1" which doesn't exists in your code.

Native HTML elements (h1, span, div, title, table, etc.) do not require a selector character in CSS.

In CSS, you select a class attribute with a period ('.') and an id with a pound sign ('#'); however, native elements (ones already part of the DOM) require neither.

This is powerful because it allows you to create more complex selectors later that combine, for example, a class name and a native element, like all h1 tags with the class 'nav' when you're styling a navigation bar. You don't want ALL the h1 tags in your application to be styled the exact same, so this is how you can control font size in one spot and styles like color and hover effects, for example, by combining that information with a class name (or id name) and (pseudo) selectors that you will learn about soon.

CSS often has a guess-and-check feel to it. If it's upsetting you, just tell yourself not to worry. It's a matter of practice and understanding how the elements are interacting. That will come. Learning new interactions in CSS often feels annoying, but I can say from experience that it will save you loads of time later and keep your code more succinct, legible, and easier to organize and maintain. CSS is also getting better with this all the time, like the fairly recent addition of variables to the language. Keep after it!