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 Jessica Hines
Jessica Hines
1,670 Points

What am I doing wrong in making a second box-shadow?

on a challenge in CSS Basics, there is a question about adding a second box shadow value to an element.

I wrote:

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

It keeps bouncing back and saying that I need to put commas in between the values, and I even went back and watched the section on box-shadows, and there is nothing about commas anywhere. I also Googled the correct notation and did it exactly that way. But I can't get past the quiz because it keeps saying I have the wrong answer. Grrrrr. Help.

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>

4 Answers

John Breslin
John Breslin
16,963 Points
John Breslin
John Breslin
16,963 Points

You're overwriting your first rule with your second. Remember the cascade. For more than one, use a comma:

box-shadow: 0 2px 15px #aaa, inset 0 0 60px 5px firebrick;

Can't test currently, so hopefully that works :)

Jessica Hines
Jessica Hines
1,670 Points

thanks so much!

John Breslin
John Breslin
16,963 Points

No prob. Glad to help.

John Tasto
John Tasto
21,587 Points
John Tasto
John Tasto
21,587 Points

By declaring box-shadow twice, the second one overwrites the first one and you're left with only one shadow. To get two shadows, just declare box-shadow once, list all the parameters for your first shadow, then put a comma, then list all the parameters for your second shadow.

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

thanks so much!

rydavim
rydavim
18,814 Points
rydavim
rydavim
18,814 Points

You can actually assign multiple box-shadows on the same line, which is why it's asking for a comma.

box-shadow: 0 2px 15px #aaa, inset 0 0 60px 5px firebrick;
Jessica Hines
Jessica Hines
1,670 Points

thanks so much!

Jessica Hines
Jessica Hines
1,670 Points
Jessica Hines
Jessica Hines
1,670 Points

Thank you all so much! For some reason, I was thinking that multiple box-shadows could be added without overwriting. That did the trick!!