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>

PreviousTesting Declaration Examples NextCSS Image Examples

Last updated 5 years ago

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>

PreviousTesting Declaration Examples NextCSS Image Examples

Last updated 5 years ago