Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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,836 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 ---*/
...