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 Customizing Colors and Fonts Organize CSS with Comments

Danilio Moreno
Danilio Moreno
929 Points

Not understanding how to Organize CSS with Comments.

I understand how to add in Comments to the CSS section, but I'm having a real hard time understanding what to label each one and how to move things around. Am I suppose to match things up with the way it looks when you look at the website or move things around like it looks on my HTML? Please help I'm completely lost!!!!

2 Answers

Stone Preston
Stone Preston
42,016 Points

you need to group your css code logically. so if you have multiple pages you might start by separating your css with comments that identify the page that its for. if you have styles that apply to all pages you might put those under a universal comment. on one page if you have css for its header, group that together. if you have css for typography, group that together. etc etc.

It does not have to look anything like your html. group it so that its easy for you to find things.

Danilio Moreno
Danilio Moreno
929 Points

Thank you, the example in the video was grouping things like in the html grouping and that was throwing me off. I appreciate your help on this.

Ron McCranie
Ron McCranie
7,837 Points

I use comments for different pages, and if they have different reusable sections/modules I'll create comments for those sections.

/*-----  Contact Page  -----*/
...
/*--- contact form ---*/
...

/*-----  Help Page  -----*/
...
/*--- faq ---*/
...