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

kevinthecoder
kevinthecoder
10,791 Points
Posted by kevinthecoder
kevinthecoder
10,791 Points

Unable to do box-shadow quiz/exercise. Why?

For some reason, I am unable to do the double set of box-shadow exercises, despite trying with both a comma (,) and a semicolon(;) . Careful here, as it's ASKING for two box-shadow properties to be listed in the .main-header and not just one (how odd).

I did notice the second box-shadow color is turning light blue instead of green. I was expecting both items to be green color. Anyway, both vertical and horizontal offsets are indeed 0 and the inset word is spelling correctly. The firebrick color is correct. What am I doing wrong? It keeps saying 'Bummer, check to make sure that the horizontal/vertical offsets are set to 0'. They are set to zero (0)!! Any ideas??

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 firebrick;
}
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>

2 Answers

Chris Shaw
Chris Shaw
26,676 Points
Chris Shaw
Chris Shaw
26,676 Points

Hi kevinthecoder,

When creating an box-shadow with multiple values we don't need to declare the property twice as any proceeding declarations will override any preceding values, instead you simply just need a comma to separate the values.

.main-header {
  box-shadow: 0 2px 15px #aaa, inset 0 0 60px 5px firebrick;
}

Happy coding!

kevinthecoder
kevinthecoder
10,791 Points
kevinthecoder
kevinthecoder
10,791 Points

Chris,

It worked; yay! I also selected yours as the best answer (+1).

Good catch, Chris. I totally forgot that if you list the same property (or almost anything for that matter) twice and only separate them by semi-colons, then the first property (or line/item) goes out the door and isn't used at all. By listing BOTH but separating them by a comma, it utilizes both....I need to remember this. Again, great catch. Thanks! :)

Aaron HARPT
Aaron HARPT
19,845 Points
Aaron HARPT
Aaron HARPT
19,845 Points

You accidentally put a comma after the first box-shadow property instead of a semicolon. box-shadow: 0 2px 15px #aaa, box-shadow: inset 0 0 60px 5px firebrick;

should be: box-shadow: 0 2px 15px #aaa; box-shadow: inset 0 0 60px 5px firebrick; hope that helps.

kevinthecoder
kevinthecoder
10,791 Points
kevinthecoder
kevinthecoder
10,791 Points

Aaron, this didn't work but Chris' suggestion did. I did indeed try both comma and semicolon initially before posting this issue. Still, thanks for the suggestion.