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 Debugging HTML and CSS Problems Use Developer Tools

Diego Murray
Diego Murray
2,515 Points

When dev tools shows some code being overridden should I go through and delete those?

or just leave them.

2 Answers

Chyno Deluxe has a point.

The Dev Tools are just tools to give you an insight to the code that is actually rendered by the browser you are using.

When referring to CSS and dev tools consider the Dev tools as a quick edit-result interface.

You can get the info from it to what class or id a html element has and you can edit them directly in the dev tools but those changes stay only for the time of the edit: this means that when you refresh the page all those changes are lost.

You can also save the edits with the Dev tools when you are on your local development server or if you have access the remote server.

But best practice is to use the Dev tools to get information of the DOM HTML elements and use it for quick changes. The real changes should be done in sour CSS files.

To make it easier by developing the front-end you could use something like "Brackets" or "NetBeans" where you can see the changes on the fly as you edit your CSS files - it's also faster this way.

Hope this helped a bit.

Best,

nWEBd

It's always best practice to override them using your own stylesheet. You also do have the option to leave it alone as well but I you would like to change any css properties you can use the dev tools to find the elements class name(s) is and add them to your custom stylesheet.

I hope this helps.