kristarella.com

Happiness Engineer at Automattic, lover of knitting, crochet, sci-fi and more

You are here: Home / Design / How to use Firebug for CSS

How to use Firebug for CSS

by

Firebug is one of the reasons that I changed to Firefox (from Camino, a faster, less memory intensive browser). It is so handy for checking under the hood of websites and anyone who does anything with CSS should know how to use it!

Firebug’s good for HTML and javascript too, but I don’t use it for them as much.

I was trying to find a video tutorial to show people on the Thesis forums how to use Firebug. However, the ones I found were either too old (Firebug has come a long way in the last year or two), or they were a bit long and rambling.

So, I decided to make one myself. It’s 6.5 minutes (the others I found were double that!) and gives an overview of how to use Firebug, including installation. Feel free to ask questions about it in the comments below!


Using Firebug for CSS from kristarella on Vimeo.

In you need a slightly sharper version, you can watch the quicktime video.

Reader Interactions

Comments

  1. Beautifully done. I actually had fire bug open on your site when I saw the tweet about this post.

    Thanks for all of your help Kristarella.

  4. Awesome. For novices like me – this video is a godsend. Thanks.

    And must say that your new-look blog – especially the frontpage feature boxes of posts and photos and their archiving-abilities are fantastic [ – need something like this myself as I have too many travel images after 20 years on the road across the planet ].

    Regards MRP AKA thecandytrail

  7. If you’re going to do very much of this kind of thing, I’d recommend paying for a dedicated CSS editor. For the Mac, CSSEdit is the standard, and there are a couple of excellent ones for the PC. The interface, feature set, and overall organizational tools of the dedicated editors are better.

  9. Wow, very helpful video. I installed Firebug some time ago because I’d read about how handy it is. It’s just been sitting there unused, since I never bothered to figure out how it worked. After watching your video I immediately used Firebug to solve a CSS problem that’s been plaguing me. For a CSS amateur like me it’s a great tool. Thanks for opening my eyes.

  10. Nice tutorial.. and I like your website BTW how do I automatically expand the comments automatically in Thesis Theme like I see on this page?

  11. I am sold! I am always trying to figure out how something works. Your video not only turned me on to a great plug in, it also showed me how to use it.

    Keep doing more of these for us Thesis users!

    Owen

  12. Thanks for the video. I cant live without foxmarks, firebug, webdeveloper toolbar and measureit, glad you share this screencast.

    Can you explain how you did this screencast? what program did you use?

    And what about the shadowbox effect on the video? its somekind of plugin or you put the code by hand on wp?

    Thanks, keep up the good work, your new design is awsome

  13. Thank you everyone for the positive feedback! I’m glad you found it useful.

    Mike — for someone who is doing this thing all the time, dedicated systems such as CSSEdit or Coda and your own local server are excellent. For someone who is just learning CSS, wants to make their site pretty and that’s it, I absolutely do not recommend buying a 29.95€ program (that’s $60 here), when Firebug is free and very useful. I’m also not sure CSSEdit is as useful for checking out other sites. You already browse in your browser, so when you get to a site you want to investigate, using Firebug you don’t have to go somewhere else.

    Brian — I figured that was the case for a lot of people. I have no idea how I first learnt to use Firebug, and I want to tell people to install it, but it wouldn’t be useful if they didn’t know how to use it. It’s not a super intuitive plugin.

    Paul — The comments on this page have the default behaviour for comments in Thesis, except for a bit of meta styling.

    ruigato — I used iShowU to record the screencast and SimpleMovieX to clip a couple of blunders. I know that Rick uses Screenflow though and there’s another nice looking one (for mac if you’re on mac). I bought iShowU quite a while ago and it was one of the best (while affordable) at the time, don’t know if it still is.
    Shadowbox effect is the WP plugin Shadobox JS.

    Cheers!

  17. YOU ARE A GODDESS 🙂 seriously. THANK YOU for taking the time to make this video. I’m sooo sold now on getting thesis..and with firebug I have a huch I’m gonna be able to tweak my way to creating a design that’s ‘me’ 🙂 THANK YOU for your help. Looking forward to getting to know the theme…and surely appreciate your recommendation on firebug. Your site is sooo you…great job branding yourself 🙂

  20. I’ll have to say, this is a helpful one especially for web designers tinkering with CSS. I’ve been using Firebug quite a awhile and I considered it as one of my needed tools when dealing and investigating CSS.

    Thank you so much Kristarella for this great video.

    🙂

  22. WOW! I have never heard of this plugin before… fantastic! It will save me sooooo much time! Thanks for such a great overview. I’m off to download it now.

    Cheers!

  23. I am new to editing themes in CSS, and this tool would certainly help me. Your video has inspired me to do the thing I have never tried before. Thanks for posting.

  25. I do not remember exactly how I wound up here but I am so thankful I did. This video was very good. I have been using firebug for a few months now, however I didn’t understand a few simple concepts until I watched the video! Thanks!

  28. Another thing, Firebug doesn’t yet work with the Firefox Beta (latest release) the last time I checked (today). Cheers!

    -Mig

  29. Hi there Kristarella. Always appreciate your work, even in Thesis forum. You’re awesome. And the new site is just gorgeous and clever.

    I’m just curious where is the CSS code that we saw in Firebug, located in Thesis? Or do we just customize that particular code in the custom.css?

    Thank you. Great job.

  31. Hi Kristarella,

    One quick question about Firebug, how do we save files after making the changes? I do not see any save button… please help….

  32. Taqi — You can’t. As I said in the video, Firebug doesn’t make any permanent changes and the best thing to do is to change one or two elements at a time to decide the style you want and then write that into your style.css in your text editor.

  36. I haven’t installed it yet .. one of my friends, a developer, told me that it will make firefox a lot slow .. true ?

  37. dinu, in my experience (and due to reasons explained in the Chrome comic) Firefox is a hog that continues to eat memory until it needs restarting. People experience that in different degrees and it probably is not helped by Firebug or any other addon. Any addon can add to Firefox’s slowness. I’m not sure how slow it is compared to a bare Firefox because Firebug is one of the very few reasons I use Firefox over Safari or Camino.

  38. Dinu, in my considerable experience, Firebug does cause Firefox to slow to a crawl after it’s been open for a period of time. I hate that about it, but I put up with restarting the app because I can’t live without Firebug.

  39. Thank you, thank you, Kris, for taking the time to do this. For those of us who just know enough to be dangerous, this can help us be more dangerous. I don’t seem to learn any other way, but at least I am only a danger to myself. I love this already!

  41. I agree completely with Jo Anne about knowing just enough to be dangerous. I’m currently working on moving from blogger to wordpress and there is lots to do. This will be a godsend.

  43. Kristarella:

    I came to this tutorial a while back and it was over my head. As I start to pick up CSS, this is really helpful. Thanks for taking the time to demonstrate a great tool!

    Joe

  44. Thank you! I was tasked with fixing someones site in a matter of a couple of hours and although I have some CSS experience- I simply could not figure out where the problem was located.

    The theme was acting goofy and and could not pinpoint it. I never realized this plugin existed and that it could be this easy.

    Thank you again.

  45. Please HELP!
    I am editing another theme and have found specifically where to edit and make my changes. However, I cannot find that file that it is referencing to. From what I know all WordPress is PHP and the file that Firebug seems to be pointing at is HTML.

    Is there a method in Firebug to find that steenkin file?

    I know you said you were not using Firebug for HTML but I thought you may be able to help.

    Thanks in advance.

  46. teevee — When you are viewing the styles for an element there is a link to the very right of the window on the same line as the CSS element selector. That is the file that the particular CSS comes from. If it says it’s an html file then the CSS is probably added directly to that file. If you can’t find it in the file it might be inserted by a plugin.

  48. Really appreciate you taking time out to do this video tutorial! It was a HUGE help for someone like me who knows absolutely nothing about web designing. Thanks again! 🙂

  49. I was a little hesitant at first to try out Firebug (don’t know why!), but … after your tutorial I’m in love with it! Great Video!!

  50. THANKS! This has been a miraculous help.

    And by the way, Thesis Theme is NOT as user-friendly as it’s made out to be. I bought it thinking it would be MUCH more user-friendly. The truth is that YOU MUST LEARN CSS TO USE IT. I’ve realized that the reason everyone’s promoting it is that they’ve got a good affiliate program. 🙂

    Fortunately, you’ve made it functional, Kristarella. You should get a kickback from DIY considering they even reference your video on their site. I’m serious, too.

  51. Hey FrustratedGuy, thanks for the compliments.

    The truth is that the initial promotion on Thesis was a little overblown. You could customise it more than any other theme without touching any code, but that was more about selecting what to display in bylines, how to display posts, the size and layout of your site etc. It wasn’t about things that usually need to be done with CSS and while I think it’s silly to think that you can make your own amazing custom website without learning a bit of CSS, someone who hadn’t done a website before wouldn’t know that.

    I think the advertising is more accurate now with videos on the front page of DIYthemes and stuff like that. I’d like to think that people haven’t promoted Thesis and misrepresented it just because of the affiliate program, sadly “easy” is subjective and depends on your background.

    There are a few themes that can change colours and that sort of thing more easily than Thesis, but they are much more expensive and are less flexible in other ways. The only other way to make a website without knowing any HTML and CSS is through a WYSIWYG editor, which usually produce disgusting code and are not really SEO friendly.

    Good luck with using Thesis and if you’re on Twitter check out the #thesiswp tag. You can post questions there with the tag too and usually get a pretty quick response.

  52. Thanks so much for this tutorial kristarella. If you can believe it, I JUST discovered the greatness that is Firebug – makes CSS modification SO much easier. Thanks again, I look forward to getting to know you better as I embark on this journey from design ‘noob’ to design star. Cheers!

  55. Hello,

    Although it is an off-topic question, I would like to ask you what software you used to record this video. I would love to do the same in my mac 😉

    Regards

  56. Hi Claudia,

    I used iShowU. It’s very good and easy to use… it would be worth trialing the other things that are out there as well. There wasn’t as many decent screen recorders at the right price when I bought iShowU. There’s a good round up of them on AppStorm.

  58. Cheers Lena,

    I find the Safari Webkit Inspector is usually sufficient for my needs and I prefer to use Safari over Firefox for general browsing (at some point I got tired of Firefox bloat), but I do open Firefox when I need to do more heavy firebug manipulation.

  59. Kristarella,

    I’ve installed Firebug a while back, at the suggestion of a friend, but didn’t realize until now just how useful it is. I searched for a how-to on this after a discussion about browsers, in which some friends told me they’re only using Firefox because of this very useful add-on. Thanks for producing this excellent instruction video.

    Manny

  61. Thanks for the video, I was able to edit the page, however I am not sure how to save the changes. how do I go about doing that?

  62. Dixie — you cannot save the changes directly from Firebug. You just need to use it to figure out what changes need to be made and then you copy/write them into whatever CSS file you use. For Thesis that’s custom.css, for other themes it might be style.css or something else.

  66. 2 firefox extensions that may help making changes made in Firebug permanent:

    FireDiff: https://addons.mozilla.org/en-US/firefox/addon/13179
    – Lets you see all changes made by Firebug and the application to the CSS and DOM. This would allow you to make a bunch of changes without worrying about forgetting what you did. You still need to manually update the server’s CSS though.

    FireFile: https://addons.mozilla.org/en-US/firefox/addon/52365
    – Allows you to save changes to CSS files directly to the server as many people want. You’ll need to be able to run PHP on your server as it requires a PHP file to be uploaded and the site to be registered. Seems to be in development and I haven’t quite got it working yet.

  68. Thanks a million for the video. I was looking for a free tool for checking the CSS code in wordpress blog themes and now with the help of firebug and your video, I am able to do the ask 🙂

  74. I use Firebug only for javascript debuging, and web developper plugin for CSS, but watching your video made me think that I’m going to change my habits and use Firebug for both.
    Thanks.

  76. Hi Kristella – thanks for you continued help. As someone new to building client sites in Thesis, I’ve coming to check here first for answers to what I know must be somewhat-newbie questions. But here is a tough one for you… I’m commenting it here as I’ve used Firebug to try and diagnose it, without luck.

    At http://agakhan1.tonyfleming.org, I am using a function to embed the WP login in the upper right corner, opposite the nav menu. In my custom_functions.php code, I have


    /* Login in Nav Menu */
    function nav_login () {
    ?>
    <div id="nav_login"><font face="Arial" size="2">

    <?php
    global $user_ID;
    if(!$user_ID ) :?>
    Welcome, Guest
    <?php else :?>
    Welcome back, <?php
    global $current_user;
    if ( isset($current_user) ) {
    echo $current_user->user_login;
    }
    ?>
    <?php endif;?>:<?php if (!(current_user_can('level_0'))){ ?>
    <form action="<?php echo get_option('home'); ?>/wp-login.php" method="post">
    <label for="user">User Name: </label>
    <input type="text" name="log" id="log" value="<?php echo wp_specialchars(stripslashes($user_login), 1) ?>" size="20" /> &nbsp; <label for="password">Password: </label>
    <input type="password" name="pwd" id="pwd" size="20" />

    <input type="submit" name="submit" value="Login" class="button" />

    <label for="rememberme"><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" /> Remember me</label>
    <input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>" />

    </form>
    <a href="<?php echo get_option('home'); ?>/wp-register.php?action=register">Register</a> | <a href="<?php echo get_option('home'); ?>/wp-login.php?action=lostpassword">Recover password</a>
    <?php } else { ?>
    <a href="<?php echo wp_logout_url('$index.php'); ?>">logout</a>

    <a href="<?php echo get_option('home'); ?>/wp-admin/">admin</a>
    <?php }?>

    </font></div>

    <?php }
    add_action('thesis_hook_before_html', 'nav_login');

    and in my custom.php file, I have

    .custom #nav_login {position:absolute; top:1em; right:15em; background: #ffffff;}


    The problem, as you can see, is that the links are working. It acts as if there is no link there, though Firebug shows it should be.

    If I remove “position: absolute” from the custom.php file, it works, but of course, the login then is in the wrong place.

    Any idea on why position: would cancel out the hyperlink?

    Adding to this, this only occurs in FF. The link works fine in IE 7.

    Tony

  77. PS – the hyperlink is active in IE and Opera, but is broken in FF, Safari and Chrome. Very confusing.

  78. hmmm… whatever the issue was, it was all about those hyperlinks being on the same level as the other form element and/or the nav menu. When I inserted even a simple , they work just fine. Weird…

  79. Tony — I’m almost certain the issue is about z-indexes. If you add z-index:200; to the CSS for #nav_login it might help. I think the reason it behaves differently in different browsers is that IE treats z-indexes weirdly, and even though it appeared to be correct, or work in your favour this time, it was probably wrong. Anywho, the nav menu has a pretty high z-index to get the dropdowns going over any other content. The other option is to add the form to the nav menu (if it’s not too tall for it, can’t actually see the site at the moment coz there’s a PHP error), you can add it with thesis_hook_last_nav_item and then float it to the right within the nav menu.

  80. Incredible… that z-index feature improved it significantly. Really appreciate your help. Kicked a few dinero your way in thanks.

  82. I’m surprised no one has mentioned using Google Chrome; right click in Chrome and select “inspect element”; pretty much the same thing as firebug with a more “make sense” layout. And not nearly as slow 😉

    Great job on the redesign btw! Very nice!

  83. Justin — Yeah, it’s not mentioned here, but Webkit Inspector in Safari and Chrome is extremely handy. I use them more than Firebug these days. Firebug can still do some things the inspector can’t do, such as editing CSS files sort-of directly and adding more CSS properties to an element, so I only open Firefox up when I really need to use those. Webkit Inspector is sufficient most of the time, and sometimes even better.

  90. Hello there — I am really new to Thesis and have been reading your site like crazy – the amount of information you provide here is amazing! I am having trouble with something relating to using Firebug and thought you might be able to help. I’m trying to adjust the padding in the footer on my site (http://sevenbluedesigns.com) and am finding the area in HTML (using Firebug). Adjusting it (temporarily) with Firebug fixes the issue, but I can’t seem to find the appropriate code in my Thesis panel (custom.css) to make the change for good. Do you know where I might find the padding setting to change it? Thank you SO much for any help you might be able to offer!

  92. Can Firebug be use for permanent change on the HTML if so how? cause when i refresh the page everything returns normal without the changes taking effect.

  93. Bobby — No. Firebug is only temporary. You must copy the changes to the site’s files via FTP. If you want to do that within Firefox you can try FireFTP, but it’s still the extra step of copying the changes into the files.

  95. Hi and thanks for a great tutorial and site! I keep coming back to you for inspirtion and help learning to move around in thesis css. Slowly getting there. Although I have mastered a lot since starting using firebug I am lost figuring out one thing.
    And I dare to ask for your help…

    At my site http://www.mactosh.net I want to change the background color of the content box at the right. It is a part of the free skin StraightShooter. I can not figure out what id or class to adress to change it.

    Thanks again for a superb site.

    Terjemk

  97. No I didn`t Kristarella. But at some point I must have changed that. Now u just pointed out excatly what I had to do to change it back. Thanks. I have tons and tons of questions but I´ll try to figure out some more on my own for now.

    Do you by any chance take on more work? I am in need of an origina thesis design to go for a website sooner than I can do myself.

    terje

  100. Great tutorial. I’ve been using Firebug for a long time now, it’s a lifesaver. I do quite a bit of web development and it cuts down developing and debugging time tremendously. But it’s useful even if you do occasional web work. You can tell right away if a problem is with css or the code, you can find items like images, and you can experiment with colors and positions right in the browser. Totally awesome.

  101. Thanks kristarella
    That was a marvelous introduction to firebug.

    Could I please ask a question?
    If a site has several stylesheets, will firebug tell you which stylesheet is styling a particular element?

    Thanks

  104. I recently switched from Blogger to Thesis and am trying to learn and adjust from only using html and css to having to use css and php. I have found some elements that on a site that I would like to implement on my thesis site so I downloaded firebug and found the element.

    Specifically, the element I would like to implement is the twitter box that is near the bottom of this site . However since I am adding the element and not changing an element already present on my site, I am confused about how to do this.

    I understand that I need to add the css code to the custom.css but I am confused about where to add the html code from the left side of the screen so that I can add that element to my site. Can this be done or is it necessary to somehow change the code into php?

    Any help you can give would be greatly appreciated as I have scoured the internet for hours trying to figure out how to do this and there are lots of cut and paste tutorials to add various elements to Thesis but nothing that really explains how a beginning thesis user (non-developer) how to do this. Thanks.

  106. Firebug has now been updated to its latest version. I’ve downloaded it and just had problem when installing it with the latest Firefox version. So I’m still using the old version Firefox.

  107. did not have the heart to leave your site without thanking you for the awesome video. just getting in to web dev and am blown away by firebug. unbelievably useful tool!

  109. This is priceless! Saved me a ton of money in outsourced support. So simple to use and correct whatever you want on your site.

    Thank you!!!
    Dmitri

  112. can it be permanent?? i mean to say that the changes we make can it be stored??

    • George — No, as I mentioned in the video, you need to rewrite the final changes into your actual CSS file… The might be some tool to connect Firebug to your files via FTP, but I haven’t looked into it for a long time.

  113. I’ve been looking at Firebug over the last couple of days because it seems most developers use it – but I have to say I’ve been using Chrome for the last year to do all this stuff, and more. In reply to George’s comment – in Chrome you can view all edits to css, html, etc via the “Resources” tab. I find this really useful as you can normally make all your tweaks, then select all the CSS in the Resources tab, and copy&paste it into the old file 🙂
    Also, I don’t know how you add new styles in Firebug – couldn’t find it anywhere. In Chrome there is a simple “+” icon

  114. Tom — Yeah, Webkit Inspector (in Chrome and Safari) is great! I use it a lot more than Firefox/Firebug these days. Thanks for pointing out that + button, I’d never noticed it before! I think to add a new style rule in Firebug you just double click in the right styles sidebar and it adds a new one… I haven’t used it in a while, but I think that’s what I used to do.

  115. Hi, I am so amateur on html and css I dont like hearing those words but watching this video I tried it on my website, but once I come out of firebug all the changes made in my website will not show. what am I doing wrong should I save the changes somewhere?

    thank you

    Heni

  116. Hanette — Yes, it says that in the video. All changes are only in that session of the browser, and useful for testing. You need to copy them into your site’s files.

  118. Hello,

    Do you think it could help me to find why sometimes, when using Internet Explorer, my Drupal websites is completely broken and the right content shown under the left menu ? (the left menu prints first and then under this menu the content prints).

    Also, when I flush the whole website cache and visit again the same previously broken page, it now displays perfectly on the screen.

    Sorry if it’s not related and thank you for any help you could provide.

  119. DrupalInThailand — Firebug might be able to help you find errors in the code that cause layout bugs in IE that other/better browsers are able to deal with, but if the layout bugs are only showing up in IE and not Firefox, then you’d be just as well off using W3 validator to find the errors.

  120. Thank you.

    Yes bugs only in IE and only sometimes on some pages, but not always the same ones (random) and no problem after i flush drupal cache, so weird.

    I will try W3 validator but as i am not a coder, it might be difficult ?

    Thanks again.

  121. DRUPALINTHAILAND — It might be hard to figure out how to fix it after validating if you’re not a coder, but the errors got in there somehow. So, either you knew enough to put them in there and you can hopefully fix them up when the validator points out the problem, or someone else put them in there, in which case you’d be justified to ask them to fix it.

  122. Hi Kristarella. Thanks for explaining. Good video. Nevertheless, I still ask you: Ok, I can inspect elements with Firebug, and practice on the changes I want to introduce by playing with the CSS right window of this add-on, but what I simply don’t get (and I guess maybe should be added to the general explanation for us, newbies) is how can I recognize the file where the CSS code of a theme, module, etc. lies…

    See, I’m trying to build a dynamic site by using Joomla (first time using it, but I quite understand it a bit). Nonetheless, Joomla sites tend to have lots of folders including lots of css files. And it really gets me on my nerves to open every css file on and not finding where the line I want to change really is. It would really help me if Firebug could tell me exactly where’s the code I’m modifying (and by “where” I mean the name/location of the css file I need to modify) by messing with it in the browser simulation of changes. I get everything, but this part I have never discovered/learned it from Firebug. Maybe there’s something I didn’t understand from your video? Please help me. I’m desperate… 🙁

  124. Or not, sorry… I found myself lost again… What I need to know is where the HTML file are, if I need to make some changes on those and not just on the CSS’s… Firebug does not seem to tell the name of the HTML files which are linked to the CSS’s…

  125. 6Tel — Yes, the specific CSS file is quoted on the top right of the style listed in the right column. There is absolutely no way for Firebug to tell which files the HTML is coming from with a dynamic CMS like Joomla or WordPress: in these systems the template files layout the HTML and fetch content from the database using PHP, but all the browser sees is the single HTML page that is output. You’ll just have to look through the theme/template files to find where it comes from. It can be a bit quicker if you have a good method to search through multiple files on your computer, e.g., I use Coda on mac (a text editor/site manager), which is able to find text in the file you’re looking at, or all the files in a folder. With something like that you can search for the class, or ID of the element to try to determine which file it’s in.

  126. Thank you, Krista. You are an angel. I guess I’ll have to try that Coda app (didn’t know about it. I hope it be easy to use… Have to look forward in my Mac to see if I have it).

  127. Hi
    interesting post but i just want to ask little thing as a beginner how can i page belong to witch file, i mean if it’s wordpress template how do i find out what’s the original file

  129. Great tutorial. Although I use a PC, it helped me to identify what lines of code I needed to change my style. Now if I could only determine what HTML file is also related to the change. 🙂 Any suggestions for a Coda style search on the PC platform?

  132. I am trying to figure out the coding for this website. http://www.catsaroundtheglobe.com/
    I like the way he has the mouseovers in the upper menu starting with News.
    I am lousy at using Firebug. If I click the button with the Firebug windows open the html pane is popping all over the place so fast, I cannot see what it is alluding to. When I try to click in the html pane to try and see what gets selected above, I either get the whole wrapper div or something below the menus and I cannot figure out how to work this. 🙁

  133. Sharon — I don’t really know what you mean by the behaviour of Firebug, but I’m not sure if it would have helped you much for that site. The coding is a bit unusual. The backgrounds of the nav are built into the header (http://www.catsaroundtheglobe.com/img/header.jpg) and then on hover there is an image overlaid (http://www.catsaroundtheglobe.com/img/catglow.png).

    There’s reasons to do it that way, but it’s easier to give the nav a background image and another one on hover:
    http://www.w3schools.com/css/css_background.asp
    http://www.w3schools.com/cssref/sel_hover.asp

  134. Sharon — Oh, and I was going to say, if you have trouble getting the element you want you can right click on it in the page and choose Inspect Element. You should be able to also select elements by clicking on them once in the HTML tree.

  135. Absolutely great tutorial. Really thankful that you took the time to post this, because it’s going to help save me a lot of time of performing the antiquated trial & error css changes that I’ve been performing thus far. Thanks Again!

  137. Kristarella — thanks so much for this simple and concise tutorial. Much appreciated!