> For the complete documentation index, see [llms.txt](https://computational-thinking-in-room11.gitbook.io/room-112-dhs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://computational-thinking-in-room11.gitbook.io/room-112-dhs/css/css-declaration-examples/practice-before-we-move-forward.md).

# Practice Before we Move Forward

### 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

![](/files/-LyjYTlNQeZBhGzb_mtm)

![](/files/-LyjYWSg2BuRNCVsoXmV)

#### 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>
```
