Trouble with css

[Newcoder8888]

Hi, please could someone help with my code. For some reason my css is not responding to certain classes for example I'm able to style my .pineapple class however my .eye, .mouth and .leftball are not working! Also when I add another class selector to my css it comes up white not yellow.

P.s I'm using code pen currently

Here is my code:

<div id="container">
<div class="pineapple"> </div>
<div class="leftball"> </div>
<div class="cball"> </div>
<div class="rightball"> </div>
<div class="eye"> </div>
<div class="eye"> </div>
<div class="mouth"> </div>
<div class="leftarm"> </div>
<div class="rightarm"> </div>
<div class="rightleg"> </div>
<div class="leftleg"> </div>
</div>

body{
background-color: pink
}

#container{

}

.pineapple{
width: 200px;
height: 280px;
background-color: yellow;
border-radius: 60%;
margin: auto;
margin-top: 160px;
border-top-left-radius: 50% 40%;
border-top-right-radius: 50% 40%;
border-bottom-left-radius: 50% 40%;
border-bottom-right-radius: 49% 40%;
}

.eye{
width: 10px;
height: 10px;
margin-top: 80px;
background-color: black;
border-radius: 30%;
float: left;
padding: 2px;
margin-left: 50px;
}
.mouth {
width: 30px;
height: 25px;
background: black;
position: absolute;
left:375px;
border-bottom-left-radius: 133px;
border-bottom-right-radius: 136px;
overflow: hidden;
margin: 0, auto;
margin-top: 125px;
margin-left: 78px;
}
.leftball{
position:absolute;
width:80px;
height:80px;
background-color: green;
margin:0 auto;
margin-top: -79.5px;
border-top-left-radius: 50%;
border-top-right-radius:50%;
border-bottom-left-radius: 50%;
border-bottom-right-radius:50%;
{

 

[sunfighter]

It's hard to help when you don't tell us the problem(s) your having. "are not working!" is not a good explaination of the problem.

So this is what I see:
In pineapple class you have border-radius: 60%; just a waste of space since you change it soon after.
In eye class, why padding: 2px; Nothing in the div. at 10pxs hard to see even if something there. The float moves the eyes out of the containing div. A couple of ways of fixing that. I used

#container{
    float: left;
    width: 100%;
}

Floats should be cleared. You don't. You do use position: absolute; on the next two selectors so you don't notice the problem here. Maybe on you next selector(?) Anyway, let me caution you about using position: absolute; - it will get you into trouble sooner or later. Spend some time now learning CSS-Grid and Flex Box. They are the future and will replace positions in the future.

For the mouth class margin: 0, auto; negated by next two rules. overflow: hidden; Not used nor needed. When you use position: absolute; you should have a TOP rule. The mouth is outside of the container, To get the most out of use position: absolute; in a container use postion:relative; on the container!

leftball class:

margin:0 auto;
margin-top: -79.5px;

can be stated as margin: -79.5px auto 0; BUT position: absolute; changes all that. Pick one, not both.

And

border-top-left-radius: 50%;
border-top-right-radius:50%;
border-bottom-left-radius: 50%;
border-bottom-right-radius:50%;

Can and should be replaced by border-radius:50%;

 

[sunfighter]

<style>
html {
    box-sizing: border-box;
}
*, *::before, *::after {
    box-sizing: inherit;
}
body{
background-color: pink
}
#container{
    float: left;
    width: 100%;
    position: relative;
}
.pineapple{
width: 200px;
height: 280px;
background-color: yellow;
margin: auto;
margin-top: 160px;
border-top-left-radius: 50% 40%;
border-top-right-radius: 50% 40%;
border-bottom-left-radius: 50% 40%;
border-bottom-right-radius: 49% 40%;
}
.eye{
    width: 10px;
    height: 10px;
    margin-top: 80px;
    background-color: black;
    border-radius: 30%;
    float: left;
    padding: 2px;
    margin-left: 50px;
}
.mouth {
    width: 30px;
    height: 25px;
    background: black;
    position: absolute;
    left:375px;
    top:4px;
    border-bottom-left-radius: 133px;
    border-bottom-right-radius: 136px;
    margin-top: 125px;
    margin-left: 78px;
}
.leftball{
    width:80px;
    height:80px;
    background-color: green;
    margin: -79.5px auto 0;
    border-radius:50%;
}
</style>

 

[Newcoder8888]

Thank you for all your comments. I have a lot to learn

 

[sunfighter]

No problem. Here to help.