1-Make a Circle
Set Up Your HTML File
Build your basic setup for your HTML file and link it to your CSS file:
<!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:
<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:
.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.
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).
Last updated