Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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

Jailson Andrade
Jailson Andrade
769 Points
Posted by 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 />
17,062 Points
<noob />
<noob />
17,062 Points

You just type in the css the rule:

.social-links a {

}

nia
nia
9,150 Points
nia
nia
9,150 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!