HTML Introduction to HTML and CSS Make It Beautiful With CSS Adding a Style to several Elements using Class

Jailson Andrade
Jailson Andrade
769 Points

Hello everyone how can I add a class called "social-links" to each anchor tag

index.html
<!doctype html>
<html>
  <head>
    <title>List Example</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>

    <a class="social-links" href="#">Follow me on Twitter!</a>
    <a class="social-link" href="#">Send me an Email!</a>

  </body>
</html>
styles.css

2 Answers

<noob />
<noob />
16,316 Points

You just type in the css the rule:

.social-links a {

}

nia
nia
7,850 Points

Hi Jailson,

First, note that one anchor tag has the class "social-link," while the other has "social-links" with an s, so you need to change one of them to match the other in order to make things work. Once that's fixed, you already put the class "social-links" on each of the anchor tags by putting the class="social-links" in tags, so you're halfway there! In order to style the links in CSS using that class, you simply need to do:

.social-links { /* Some CSS styling here */ }

because that now refers to the two anchor tags (note the period before the class name). You don't need to add an "a" after the class name in the CSS, since the class is already assigned to the anchor tag.

Hopefully this helps!