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

CSS How to Make a Website Styling Web Pages and Navigation Polish the Navigation and Footer

Kelly Fichter
Kelly Fichter
799 Points
Posted by Kelly Fichter
Kelly Fichter
799 Points

Class Element and Social-Icon

Why do we put a period in front of social icon when we type it into our CSS file? It wasn't clear this was required and I didn't notice it in the instructional video until my social media icons were not resizing on the website.

4 Answers

Stefano Sarioli
Stefano Sarioli
981 Points

For selecting a class in CSS the syntax is:

.nameOfTheClass

In your case the icon in the html file has the attribute class="social-icon" and for selecting them on your css you need to type:

.social-icon { various style }

I hope this can help with you problem. Happy Coding. Stefano Sarioli

Lush Sleutsky
Lush Sleutsky
14,044 Points
Lush Sleutsky
Lush Sleutsky
14,044 Points

Any class is written with a "." (period) before the name of the class, in the CSS sheet.

Any ID is wrriten with a "#" (pound sign) before the name of the ID, in the CSS sheet.

teddykrzy
teddykrzy
2,038 Points
teddykrzy
teddykrzy
2,038 Points

The period in front of .social-icon tells the CSS stylesheet to select the class name "social-icon" in your HTML file, without the period at the beginning of your CSS rule it would be looking for an html element called social-icon as opposed to the class "social-icon" containing your icon.

Hope this helps :)