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 Gradients

Y. Kravets
Y. Kravets
10,350 Points
Posted by Y. Kravets
Y. Kravets
10,350 Points

Keep getting "Make sure you're setting the first color stop value to 'steelblue'." Why?

Keep getting "Make sure you're setting the first color stop value to 'steelblue'." and cannot figure out why. Any help appreciated.

style.css 
/* Complete the challenge by writing CSS below */
.main-header {
  background-image: linear-gradient(to top steelblue 0%, darkslateblue 90%);
}
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

Kristian Terziev
Kristian Terziev
28,449 Points

You're missing a comma mate. Also you don't need 0% after "steelblue" (I believe). You should pass the challenge with this:

.main-header {
  background-image: linear-gradient(to top, steelblue, darkslateblue 90%);
}
Ron Horn
Ron Horn
7,591 Points
Ron Horn
Ron Horn
7,591 Points

I may be wrong, but It looks to me like your steel blue should come after the darkslateblue in order to "stop with steel blue"

Ron Horn
Ron Horn
7,591 Points
Ron Horn
Ron Horn
7,591 Points

I also see that you are missing a comma after "to top" which may not read correctly to the browser.