getting to grips with firebug
TRANSCRIPT
What is Firebug?
Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.
“
”
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
That’s not all...Log - Log events to the console
Profile - Measure site performance
Debug - Provides a powerful debugger
Analyse - Monitor network activity
Where can I get it?
http://getfirebug.com
You can also get a lite version for Chrome
http://getfirebug.com/releases/lite/chrome/
WTF is this Box Model?
Every element on your page is a box that consists of Width, Height, Padding, Border & Margin
Firebug’s Box ModelGet a visual breakdown of each box in the Box Model
It shows you the width and height of the innermost box, along with the size of the padding, border & margin
Your new best Friends!The HTML panel displays the generated HTML
The Style panel displays the CSS styles for the currently selected tag
Selecting your HTML
Click the HTML tag and the element will be highlighted Padding is purple Margins are yellow
The Quick Info boxGives 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
Editing your HTMLClick the HTML attributes or text to change them
Use the Tab key to move to the next attribute
Editing your HTMLYou can also use the Edit button to change the HTML
HTML & CSS changes appear as you type
Messed things up? Just refresh the browser window
Editing your CSSClick a property to change it
When a Property is struck out, it means it’s been overridden by another style
Editing your CSS
Cycle through properties Increment or decrement numbers Increment or decrement by ten with Shift key
Use the Up/Down arrow keys to...
Adding to your CSS
Double-clicking the white area Editing the last value and hitting Tab Right-clicking and selecting "New Property..."
Add new Properties by...
Useful CSS StylesText Colorcolor: #hexcode;
color: #123456;
Important points: Each property needs to end in a semi-colon ( ; ) Use American English (color NOT colour. center NOT centre)
Useful CSS StylesPaddingpadding: top right bottom left;
padding: 10px 0 20px 0;
padding-left: length; padding-right: length; padding-top: length; padding-bottom: length;
padding-right: 10px; padding-bottom: 10px;
Useful CSS StylesMarginmargin: top right bottom left;
margin: 10px 0 20px 0;
margin-left: length; margin-right: length; margin-top: length; margin-bottom: length;
margin-left: 5px; margin-bottom: 5px;
Useful CSS StylesBackground Colorbackground: color image repeat attachment position;
background: #fff url(image.jpg) no-repeat fixed left top;
background-color: color; background-image: url(path/filename.ext); background-repeat: repeat; background-position: position; background-attachment: scroll;
background-color: #abc123;
Useful CSS StylesBordersborder: width style color;
border: 2px solid #2233FF;
border-left: width style color; border-right: width style color; border-top: width style color; border-bottom: width style color;
border-left: 1px dotted #000; border-right: none;
Useful CSS StylesTypefont: style variant weight font-size/line-height font-family;
font: bold 15px/18px Georgia, "Times New Roman", Times, serif;
font-family: family-name; font-size: size; font-weight: weight; font-style: style;
font-size: 16px; font-weight: bold; font-style: italic;
Useful LinksFirebug FAQ’s - https://getfirebug.com/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 sizing - http://css-tricks.com/css-font-size WordPress and CSS - http://codex.wordpress.org/CSS
Thank You!I’m Anthony Hortin
You can find me here
http://maddisondesigns.com@maddisondesigns
http://easywpguide.com@easywpguide