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 Ramses Alfonzo
.a{fill-rule:evenodd;}techdegree
Ramses Alfonzo
Front End Web Development Techdegree Student 592 Points

In the css file how do i create a rule? Sorry new to this

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

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

  </body>
</html>
styles.css 
. my classv {}

1 Answer

Christian Fynbo
seal-mask
.a{fill-rule:evenodd;}techdegree
Christian Fynbo
Full Stack JavaScript Techdegree Student 2,910 Points
Christian Fynbo
.a{fill-rule:evenodd;}techdegree
Christian Fynbo
Full Stack JavaScript Techdegree Student 2,910 Points

You have utilized the class-attribute in your HTML and specified a class-name for the a-element. Great start! To then target the specified class; in your CSS-file you need to use a .class-selector. It works like this:

.class-name {
   rule;
}

The dot (or period) before your class name is instructing the CSS to target a class. The class name is the name you gave your class in your HTML. The semicolon (;) after the rule is an end-of rule indicator that signals one rule has been given in full.

From your HTML I could create a new rule like so:

.social-links { 
   color: red;
}

In this case, I've targeted your class of social-links, and colored the the text red using the CSS property of color.

For more: https://www.w3schools.com/tags/att_class.asp https://www.w3schools.com/cssref/sel_class.asp