Skip to main content
Practice

Decorating Links

Shall we try decorating links a bit more? Let's define a CSS class called social-media as follows.

Defining social-media class
.social-media {
  width: 40px; /* Link width of 40px */
  height: 40px; /* Link height of 40px */
  background: khaki; /* Khaki background */
  border-radius: 50%; /* Rounded borders */
  border: 1px solid black; /* Black solid border of 1px */
}

The Instagram logo is within a yellow circle. We've used border-radius: 50%; as learned previously, and for the yellow background color, we used background: yellow;.

However, you might notice that the Instagram logo is not perfectly centered in the yellow circle, but is aligned towards the top.

How can we neatly center the Instagram logo? Let's modify the social-media CSS class as follows.

Adding display properties
.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;, justify-content: center;, and align-items: center; to the social-media class, the icon within the button is now centrally aligned.

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

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.