How to Use CSS to style <figure> and <figcaption>

The figure and figcaption elements + CSS

index.html

Example: HTML

<style>
figure {
  border: 1px #cccccc solid;
  padding: 4px;
  margin: auto;
}

figcaption {
  background-color: black;
  color: white;
  font-style: italic;
  padding: 2px;
  text-align: center;
}
</style>

<figure>
  <img src="https://horje.com/avatar.png" alt="Trulli" style="width:100%">
  <figcaption>Fig.1 - Trulli, Puglia, Italy</figcaption>
</figure>

Output should be:

Type:	html
Category:	Web Tutorial
Sub Category:	HTML Tag
Uploaded by:	Admin