Practice Before we Move Forward
Start with NEW CSS and NEW HTML pages to avoid any confusion
CSS Document titled style2.css
Insert your own color choices for the ______
body {
background-color:_____;
}
p {
color:_____;
text-align:center;
}
.green {
background-color: white;
color: green;
}
img {
border: 50px solid pink;
border-radius: 20px;
padding: 15px;
width: 150px;
}
.center {
border: 50px solid _________;
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
Now save these two images to your folder titled kermit and piggy


New HTML Document titled muppets.html
!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="style2.css">
<title><muppets> </title>
<!--Your Name Date and Block-->
</head>
<body>
These are words with no formatting
<p>These are words with simple paragraph formatting </p>
<div class = "green">
<p>This uses the "green" formatting </p>
<br>
</div>
<img src = "kermit.jpg" alt = "kermit">
These are more words
<div class = "center">
<img src = "piggy.jpg" alt = "piggy">
</div>
</body>
</html>
Last updated