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

Stephen Gheysens
Stephen Gheysens
11,935 Points
Posted by Stephen Gheysens
Stephen Gheysens
11,935 Points

Can you help me create a linear gradient from the bottom to top with certain colors and a color stop?

Gradient requirements: linear, bottom-to-top, steelblue, to darkslateblue with a color stop at 90% I've tried changing the directional value from "to top" to 0deg to no avail.

style.css 
/* Complete the challenge by writing CSS below */
.main-header {
  background-image: linear-gradient( to top, steelblue, 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>
Stephen Gheysens
Stephen Gheysens
11,935 Points
Stephen Gheysens
Stephen Gheysens
11,935 Points

Mindy Sandilands - thank you very much, this was the issue! To the best of your knowledge, that whitespace would be ignored by a real CSS parser/interpreter, right? I know there are some values (i.e. 45deg) that can't be separated, but I didn't realize the leading space in that value could impact the challenge's outcome.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Stephen,

Here's a link to the syntax for functions from the css3 syntax module. I've quoted the relevant part of that 1st paragraph.

From 8. Functional Notations:

White space is allowed, but optional, immediately inside the parentheses.

The rgb() function in example 11 is shown with this optional white space immediately inside the right parenthesis.

Other useful things to note there is that a space is not allowed after the function name and spaces before and after commas are optional.

The white space should be ok in the real world as long as the browsers are correctly following the specification.

1 Answer

Mindy Sandilands
Mindy Sandilands
15,743 Points

Rather than your code I think this may be more of a simple spacing issue with the challenge program. I tried the challenge and took out some of your spaces and it worked. Try removing your space after the ( and before to top. The below code worked for me on this challenge:

background-image: linear-gradient(to top, steelblue, darkslate 90%);

Hope this helps.