# 1-Make a Circle

## Set Up Your HTML File

Build your basic setup for your HTML file and link it to your CSS file:

```markup
<!DOCTYPE html>
<html>
<head>
    <title>Smiley Face</title>
    <link rel="stylesheet" type="text/css" href="smileyFace.css">
</head>
<body>
    <div class="wrapper"></div>
</body>
</html>
```

Fill the following code inside your `div` with the class of `wrapper`:

```markup
<body>
    <div class="wrapper">
        <h1>CSS Smiley Face</h1>
        <div class="face"></div>
    </div>
</body>
```

## Make a Circle

Now, let's go into our CSS file and make some additions:

```css
.wrapper {
  margin: 5px;
}

.face {
  width: 75px;
  height: 75px;
  border: solid 2px black;
  background-color: yellow;
  border-radius: 50px;
}
```

Now, open up your browser and see if you have an `h1` title of `CSS Smiley Face` and a yellow circle with a black border.\ <br>

If you do not see this, check to make sure that your CSS file is properly hooked up in the link tag. Also, make sure that ALL of your tags are closed.

## So What Have We Done?

The `div` that you have created (with the class of `face`) defaults as a clear box. Setting the designated `width` and `height` sets the size of that box; the `border` adds a border this is `solid 2px and black`. You then colored that `div` box to be yellow and made it perfectly circular by setting the `border-radius` to 50px (setting it at different sizes, adjusts how circular that box is).
