search

2-Add the Left Eye

hashtag
Nest Your Div

Add to your html code:

<body>
    <div class="wrapper">
        <h1>CSS Smiley Face</h1>
        <div class="face">
            <!-- Add new code here -->
            <div class="lefteye"></div>
        </div>
    </div>
</body>

Now, let's go into our CSS file and add features for the left eye:

.lefteye {
  width: 6px;
  height: 6px;
  border: solid 1px black;
  border-radius: 3px;
  z-index: 1;
  position: relative;
  left: 32px;
  top: 26px;
  background-color: black;
}

What does z-index do? What does position do? What happens if you set position to absolute? Does it change? What happens if you make your browser window different sizes with position: relative vs. position: absolute?

hashtag
So What Have We Done?

You should now have a round-cornered-square over your yellow circle around where an eye should go. Notice that border-radius is now set as 3px. See how it is not quite a perfect circle?

hashtag
Now, Let's Add a Pupil!

Here, we will work with an id, where we have been working with classes exclusively. First, we need to add it to our html file:

And, now to the CSS file:

NOTE: in CSS, when you call classes, you reference it with a . (.lefteye); you reference ids with a # (#inner-left).

hashtag
Great! Now We Have Our First Eye!

You should now see that your smiley face has an eye with a white pupil inside!

Previous1-Make a CircleNext3-Add the Right Eye

Last updated