> 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

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

![](https://2507214486-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LpUPSf3tCxHePJxNjfg%2F-LyjYMDp-Y1fKiNpcQTk%2F-LyjYTlNQeZBhGzb_mtm%2Fkermit.jpg?alt=media\&token=448e0c28-3982-4a6e-99fd-a0ca5434b586)

![](https://2507214486-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LpUPSf3tCxHePJxNjfg%2F-LyjYMDp-Y1fKiNpcQTk%2F-LyjYWSg2BuRNCVsoXmV%2Fpiggy.jpg?alt=media\&token=149d06e1-38f1-4123-8201-1652c984e6c5)

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