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

Posted by Halie Montgomery
Halie Montgomery
422 Points

adding class (css)

trying to add class "social-links" to an anchor. what am I doing wrong? thanks

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

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

  </body>
</html>
styles.css
Ian Steele
Ian Steele
7,253 Points

Hello Halie,

the issue you're running into here is that you need to specify that this is your class name like this

<body>
   <a class="social-links" href="#">Follow me on Twitter</a>
</body>

Some added feedback is to remove the . after the a in both anchor tags. Also, in the second anchor tag your class name is social.links. If you create any styles for social-links they will not apply to this anchor element. Decimals are not meant to be used in selector names, making this class name invalid. Fix this typo and both of the anchor elements will accept whatever styles you add to your social-links class.

Your css would then look something like this

.social-links {
   /* Your styles here*/
}

1 Answer

Jamie Reardon
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer
Jamie Reardon
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer

Like Ian said, you need to make sure that your HTML anchor tags both have the same name as the class you are trying to target in your CSS file. To do that properly in order for it to work, you first need to define the class correctly in your HTML file like so:

<body>
    <a href="#" class="social-links">Follow me on Twitter!</a><br> <!-- This <br> tag will break the line and force the anchor tags to be on two separate lines instead of one. Unless you have specified so in your CSS. You can remove it otherwise! -->
    <a href="#" class="social-links">Send me an Email!</a>
</body>

You need to make sure that your CSS file is targeting the name exactly how you have specified in the HTML file.

.social-links {
}

The reason your code didn't work was because you we're trying to define your class attribute in your anchor tag like this ."social.links instead of like this class="social-links". You need to ensure that you add the attribute class followed by the = sign and the name you want to define the class with. You can't define a class starting with a peroid (.) as HTML won't understand what you are intending to do.