Decorating Links

Shall we add some decorations to our links? Let's define a CSS class called social-media as shown below.

Copy
.social-media {
  width: 40px; /* Link width set to 40px */
  height: 40px; /* Link height set to 40px */
  background: khaki; /* Khaki-colored background */
  border-radius: 50%; /* Rounded border */
  border: 1px solid black; /* 1px solid black border */
}

The Instagram logo resides inside a yellow circle. We used the previously learned border-radius: 50%; and a khaki background with background: khaki;.

However, you might have noticed that the Instagram logo is not perfectly aligned within the yellow circle and appears slightly above the center.

To align the Instagram logo neatly, let's modify the social-media CSS class as shown below.

Copy
.social-media {
  width: 40px;
  height: 40px;
  background: khaki;
  border-radius: 50%;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
}

By adding display: flex;, align-items: center;, and justify-content: center; to the social-media class, the icon is now centered within the button.

What do these properties do? We'll explore them in the next lesson!