2-Add the Left Eye
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?
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?
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:
<body>
<div class="wrapper">
<h1>CSS Smiley Face</h1>
<div class="face">
<div class="lefteye">
<!-- Add new code here -->
<div id="inner-left"></div>
</div>
</div>
</div>
</body>And, now to the CSS file:
.lefteye {
width: 6px;
height: 6px;
border: solid 1px black;
border-radius: 3px;
z-index: 1;
position: relative;
left: 32px;
top: 26px;
background-color: black;
}
/* Add new code here */
#inner-left {
width: 2px;
height: 2px;
border: solid 1px white;
position: relative; /* What if this was absolute? */
left: 2px;
top: 2px;
background-color: white;
}NOTE: in CSS, when you call classes, you reference it with a . (.lefteye); you reference ids with a # (#inner-left).
Great! Now We Have Our First Eye!
You should now see that your smiley face has an eye with a white pupil inside!
Last updated