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

Posted by Brandon Brigham
Brandon Brigham
3,716 Points

Is there a way to pinpoint what elements of a CSS file is being used on a given HTML page?

So I've created an HTML page using Twitter Bootstrap CSS files. The only file I've used is the bootstrap.css file. This CSS file has a lot of data on it that I'm not using. I am trying to pinpoint which CSS rules are keeping my designed page intact and then deleting the rest.

The reason I want to do this is because I am incorporating the newly designed page into an already existing site so I don't want to add anymore data to the site when uploaded to the servers.

Thanks for any help or ideas....

Ken Alger
Ken Alger
Treehouse Teacher
Ken Alger
Ken Alger
Treehouse Teacher

Brandon;

One suggestion if you start deleting things out of bootstrap.css, when you are done rename it. Should someone else come along and see that your file is linked to Bootstrap, they may try to implement some styles that you have deleted.

Just a thought. :smile:

Ken

1 Answer

Max Goetz
Max Goetz
5,360 Points
Max Goetz
Max Goetz
5,360 Points

Hi Brandon,

You can use the development tools in Firefox or Chrome(Not sure about the others, but I'm sure they have them as well) to find out which CSS rules are being applied.

Right click anywhere on the page and select 'Inspect Element'. The devtools will display. In the left column is the html and the right shows the CSS. Click anywhere in the html and the css column will show what rules are being applied to it.

If you want to select an item on the actual page use either the magnifying glass tool (upper left corner of devtool) in Chrome or the select element tool (same location) in Firefox. Click anywhere on the page and html will be highlighted down below.

You can also edit either the html or css right there in the browser. None of the changes made will be saved.

To learn more, I'd recommend the Use Developer Tools class taught by Nick.

Hope this helps! :)

Max