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

James Thompson
James Thompson
1,045 Points
Posted by James Thompson
James Thompson
1,045 Points

in the CSS file, use the class to give both <a> tags 15px of padding and 10px of margin

In the CSS file, use the class to give both <a> tags 15px of padding and 10px of margin

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

3 Answers

Antonio Falcetta
Antonio Falcetta
14,192 Points
Antonio Falcetta
Antonio Falcetta
14,192 Points

I hope can help

<!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-links" href="#">Send me an Email!</a>

  </body>
</html>

.social-links {
  padding: 15px;
  margin: 10px;
}
tankredott
tankredott
4,350 Points
tankredott
tankredott
4,350 Points

Hi James,

you have to give your links a class (<a class="CLASSNAME">Follow me on Twitter!</a>) inside your html file. The syntax you wanted to use to declare the class ".social-links {}" is used in the CSS file to style the content of the class.

For example:

HTML:

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

    <a class="exampleClass">Follow me on Twitter!</a>

  </body>
</html>

CSS:

.exampleClass {
  color: red;
}
Tharsan Rajasingam
Tharsan Rajasingam
517 Points
Tharsan Rajasingam
Tharsan Rajasingam
517 Points

.social-links { padding: 15px; margin: 10px; }