Presented at the Melbourne WordPress Meetup. Quite often, in the WordPress forums and the like, people post simple questions about how they can change the colour of a link or menu item, or change the background colour of something. To new users HTML and CSS looks like voodoo. This presentation will try and demystify some of the common HTML and CSS tweaks people ask for and demonstrate how users can perform some basic site debugging and styling using the browser add-on, Firebug. It will also cover how Firebug can be used to find specific css styles as well and how to test basic changes within the browser before making those changes permanent.

2. What is Firebug?
Firebug is an awesome web
development tool!

3. Why would I use it?
✓ To find errors in your web page
✓ Experiment with and preview changes without
breaking your site
✓ Make simple updates yourself without having to
pay a developer

4. What can it do?
Inspect
View the HTML source
on the fly

5. What can it do?
Inspect
Inspect HTML tags
and CSS properties

6. What can it do?
Inspect
Edit HTML and CSS
and see those changes
instantly

7. What can it do?
Layout
Visualise your page
layout with Box Model
shading

8. What can it do?
Layout
Visualise breakdown
of each box in the Box
Model

9. What can it do?
Layout
View rulers and
guides for pixel
perfection layout

10. That’s not all...
Log - Log events to the console
Profile - Measure site performance
Debug - Provides a powerful debugger
Analyse - Monitor network activity

11. Where can I get it?
http://getfirebug.com
You can also get a lite version for Chrome
http://getfirebug.com/releases/lite/chrome/

12. Enabling Firebug
The Firebug panel will open at the bottom of the browser

13. WTF is this Box Model?
Every element on your
page is a box that consists of
Width, Height, Padding,
Border & Margin

14. Your new best Friends!
Click the HTML tag and the element will be highlighted
Padding is purple Margins are yellow

15. The Quick Info box
Gives you all the important
info at a quick glance
If it gets in the way, just drag it
If you don’t want it, hide it

16. Editing your HTML
Click the HTML
attributes or text to
change them
Use the Tab key to move
to the next attribute

17. Editing your CSS
Click a property to change it
When a Property is struck out, it means it’s been
overridden by another style

18. Editing your CSS
Use the Up/Down arrow keys to...
Cycle through properties
Increment or decrement numbers
Increment or decrement by ten with Shift key

19. Adding to your CSS
Add new Properties by...
Double-clicking the white area
Editing the last value and hitting Tab
Right-clicking and selecting "New Property..."

20. Demo

21. Useful Links
Firebug FAQ’s - http://getfirebug.com/wiki/index.php/FAQ
Firebug Documentation - http://getfirebug.com/wiki/index.php/Main_Page
Handy online Color Picker - http://www.colorpicker.com
The CSS Box Model explained - http://css-tricks.com/the-css-box-model
List of CSS properties - http://reference.sitepoint.com/css/propertyref
Font families - http://line25.com/articles/semi-web-safe-fonts-to-spice-up-your-web-designs
Font sizing - http://css-tricks.com/css-font-size
WordPress and CSS - http://codex.wordpress.org/CSS

22. Questions?

23. Thank You!
http://maddisondesigns.com
@maddisondesigns