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

Ronny Rosabal
Ronny Rosabal
4,812 Points

Anchoring in CSS file.

Is there a way to anchor a block of css to another section within the same css file. In other words if I have some type of table on contents on top of the css file can I have links that will take me directly to the block of css in the TOC.

Michael Owens
Michael Owens
5,591 Points

Sorry, I will need to ask for some clarification to be able to answer your question. When you say 'anchor' in html/css it usually refers to 'links' that bring you to another html page.

Are you asking how to create a link that will scroll to a certain place on the current page, like in a wikipedia article's TOC's links?

Ronny Rosabal
Ronny Rosabal
4,812 Points

Well I know how to do it in an HTML file. I guess my question is how to do this inside a CSS document. Lets say I have a TOC inside the CSS file (most likely using some type of comment) and one of the items is all the header selectors. Is there a way to click on this item that will take me to the block of header selectors inside that same file so I can find them easier?

Michael Owens
Michael Owens
5,591 Points

use the find function built-into your browser with a combination of good commenting.

For example: let's say you want to skip to the headers, create a comment along the lines of /* #headers */

Then ctrl + f (or cmd + f if on a mac), type in #headers and your window will scroll to your #headers comment.

Ronny Rosabal
Ronny Rosabal
4,812 Points

Oh ok, that makes sense. Thank you very much.

1 Answer

Jeff Jacobson-Swartfager
Jeff Jacobson-Swartfager
15,419 Points

I believe what you're looking to do can be achieved through a CSS preprocessor like SCSS. You can use one file to create a "TOC" via @import rules. This file will import other SCSS files so that you can separate your chunked code into individual files. The difference between these @import rules and the ones in vanilla CSS is that your code can be compiled into a single CSS file (avoiding the multiple server calls that the CSS version uses).

Also, if you are using something like Sublime Text this plugin may be useful.