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

Halie Montgomery
Halie Montgomery
408 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
5,096 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
Jamie Reardon
Front End Web Development Techdegree Student 6,534 Points

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.