Can't use box-shadow in my class declaration

Well, I am doing practical what I am learning from code camp but I ran into a problem.
As you can see I have created the full card class I was trying to use box-shadow in it but I was unable to do so I assign the ID to

element and it worked. but I have a question about why I was not able to use a box-shadow in the class.
here is my code.
<!DOCTYPE html>

<html>

<head>

    <title>Google</title>

</head>

<style>

    h3 {

        position: relative;

        bottom: 65px;

        text-align: center;

        text-transform: uppercase;

        padding: 10px;

        font-size: 27px;

    }

    

    p {

        text-align: justify;

        font-style: italic;

        position: relative;

        bottom: 90px;

    }

    

    .fullcard {

        border-style: solid;

        border-width: 1px;

        border-color: black;

        border-radius: 10px;

        margin: 10px 5px;

        padding: 30px

    }

    

    .content {

        margin: -30px;

        padding: 20px;

    }

    

    .text-content {

        margin: 1px;

        padding: 10px;

    }

    

    .line {

        position: relative;

        bottom: 98px

    }

    

    #check {

        box-shadow: 0 10px 20px 10px rgba(0, 0, 0, 0.1);

    }

</style>

<body>

    <div class="fullcard" id="check">

        <div class="content">

            <div class="text-content">

                <h3 id="check">This is for Test Purpose</h3>

                <hr class="line">

                <p>I dont even have any idea what i am designing</p>

            </div>

        </div>

    </div>

</body>

</html>
type or paste code here

Hey!
I tried your exact code on codepen and I saw that box shadow in .fullcard class is also working, though it was not so visible as you have gave it opacity of 0.1 in box-shadow: 0 10px 20px 10px rgba(0, 0, 0, 0.1) when I change it’s opacity to 0.3 shadow was visible enough.

well i don’t know maybe it’s the problem with VS code
Here is what happened when i use the box-shadow in the full card also i can’t use comment in it.

It’s really small and silly mistak you did :smile:

Actually on line 29 , padding : 10px here you forget to end the padding style with " ; "

Code should be :

padding : 10px;
box-shadow: 0 10px 20px rgba(0, 0 , 0, .5);

:rofl: Programmers are very sensitive a semicolon can make them cry.
Thanks.
I want to ask another question of course it is not related to topic but i will be glad if you answered my question. I am new as you can see by the mistake i just did. I am learning the HTML from freecodecamp in some of the lessons html have codes and elements that they haven’t taught us like element that they used in the Applied Visual Design: Lock an Element to the Browser Window with Fixed Positioning topic so do i have to do research on it or will they tell me about this later. of course i did the quick google and i figured out what element does but there are few thing for them i am not sure what they did and what exactly they have used. One of the statement is nav ul{ }
what exactly they are using of course it is not element css selection and also not class, id or type what exactly is happening.
well by the way thanks for your Help

<style>
  body {
    min-height: 150vh;
  }
  #navbar {



    width: 100%;
    background-color: #767676;
  }
  nav ul {
    margin: 0px;
    padding: 5px 0px 5px 30px;
  }
  nav li {
    display: inline;
    margin-right: 20px;
  }
  a {
    text-decoration: none;
  }
</style>
<body>
  <header>
    <h1>Welcome!</h1>
    <nav id="navbar">
      <ul>
        <li><a href="">Home</a></li>
        <li><a href="">Contact</a></li>
      </ul>
    </nav>
  </header>
  <p>I shift up when the #navbar is fixed to the browser window.</p>
</body>

Yes, I checked through our FCC css course but it does not explain this topic.
You may have checked about how to apply some styles on multiple selectors by separating them with ’ , ’ (comma).

p, li {
style 
}

Well that apply style to both of the component.

Apart from this multiple selection we have Combinators in css.

nav ul { style }
 # this is an example of combinator. It suggest that these style
 # should apply to only UL elements who are under the parent NAV element. 

It is a great css styling topic and very important in real world project.
You should learn about all cominators here. They are very helpful and important.

In the world of CSS, this are advance topics. What you have till now is enough to make things work. if you fin that bit hard, don’t worry about them now. You can do pretty much anything with class and id.

Note : tag is new tag introuced in HTML5 along with , ,
etc… it is just like normal div element for us but for browser and search engine it helps to understand website parts clearly.

Thanks for your help my friend.

1 Like