# 2-Add the Left Eye

## Nest Your Div

Add to your html code:

```markup
<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:

```css
.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:

```markup
<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:

```css
.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!
