Have you ever wanted to change the color or size of text, find a specific html element or locate a buggy javascript file?
The Developer Tools, bundled and available in Google Chrome and Safari web browsers, allows anyone to inspect the elements (html, css, js) that make up a webpage. Simply right-click on any element in the page and select the “Inspect Element” option from the context menu. This will open the Developer Tools and drill right to the element you clicked on.
Selecting “Inspect Element” will bring up the Developer Tools, which should look like the following:
The html of the element that you inspected will be be shown highlighted in the bottom left panel. The css of the element that you inspected with be shown in the bottom right panel.
Clicking on the html code in the left panel and also the css code in the right panel will allow you to preview html or css changes live directly on the page. Lets change the font-family css attribute to Arial and the font-size of the intro class to 24px:
Neat, eh? Using this approach, you can find any element on your webpage, view the html that creates the page and view the css that styles the page.
Important Note
Using Developer Tools doesn’t save these change to your live website. You still need to modify the actual html, css or template file that renders the code. If you are using our WordPress themes, you can visit the Appearance -> Theme Options -> CSS section and paste the code you modified into the textarea to override your theme’s default styles. For the example above, the css would look like this:
#home-welcome p.intro {
font-family: Arial;
font-size: 24px;
}Developer Tools Video Tutorials
Here are a couple video tutorials for learning more about Chrome’s Developer Tools:
“Using Developer Tools doesn’t save these change to your live website”. So, why do I need it? Do you have an easier way to deal with the type ? I went to theme options, there is no CSS section.
You need it because you can preview your changes by modifying the CSS directly in the browser. Then, you just apply those changes to your stylesheet.
I’ve imported the gridspace html into dreamweaver, if i edit this in there is there a way to save and attach it to my blog so that my changes will be live?
The website is very informative and useful. Thanks for producing amazing posts that help in some ways.
Word. Thanks.
Would have been even more useful if you could add FTP that could then allow one to apply changes to the site. This method would eliminate any security or unwarranted access issues.
BTW nice article.
Hi, Do you know the CSS for changing the fonts color? Now they are white, I need them in black… thanks!
ow good post
Some Techniques to get more comments in your blog/website
Developer tool has made my life so easy! I can test new css elements with the help of inspect element. It’s a time saving feature! Love it.