Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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

Posted by Gina Gwenzi
Gina Gwenzi
7,656 Points

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
231,236 Points
Steven Parker
Steven Parker
231,236 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.

Rafael Salinas
Rafael Salinas
3,044 Points
Rafael Salinas
Rafael Salinas
3,044 Points

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.

Reid Young
PLUS
Reid Young
Courses Plus Student 14,209 Points
Reid Young
Reid Young
Courses Plus Student 14,209 Points

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!