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 Text Shadows and Box Shadows

Posted by cliffton belcher
cliffton belcher
2,899 Points

It keeps on asking me to put a comma between the values on the last step. So what do I do?

I'm on the last step of the code challenge and I put the second box-shadow in put it's telling me to recheck and make sure i put a comma in between the values.

style.css 
/* Complete the challenge by writing CSS below */
.main-heading {
  text-shadow: 0 0 5px #be7b31;
}

.title {
  text-shadow: 1px 3px 0 #e59740;
}

.main-header {
  box-shadow: 0 2px 15px #aaa;
  box-shadow: inset 0 0 60px 5px rgb(178, 34, 34);
}
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 -->

        <footer class="main-footer">
            <p>All rights reserved to the state of <a href="#">California</a>.</p>
            <a href="#top">Back to top &raquo;</a>
        </footer>
  </body>
</html>

1 Answer

Kevin Korte
Kevin Korte
28,148 Points
Kevin Korte
Kevin Korte
28,148 Points

They way CSS works, with what you have wrote is the first box shadow, would be overwritten and not displayed because of the second box shadow.

I believe it's asking you to put both box shadows in one argument, comma seperated. Which would look something like

box-shadow: 0 2px 15px #aaa, inset 0 0 60px 5px rgb(178, 34, 34);

doing it that way would render both box shadows.