2. About Me
Marcus Crutcher - @mcsocially
Owner, cSocially Media
http://csocially.com
Web design, SEO, Social, Content
iThemes Builder advocate
WordPress fan & user since 2011
1st WordCamp – 2012
3. What We’ll Cover Today
S 1. What is CSS
S 2. How to Add Custom CSS via JetPack plugin
S 3. What is Firefox Firebug?
S 4. How to use Firebug to identify & modify CSS on live site.
S 5. Time permitting >> How to Use Chrome Inspect
Element
4.
5. Where to Find CSS in
WordPress
Login to your WordPress
site.
From your Dashboard,
go to Appearance >
Editor
7. Active Jetpack Plugin
If you don’t have Jetpack already, search the WP Plugin Repository for Jetpack,
download, & activate it.
Connect Jetpack to your WordPress.com account to get access to the CSS Editor
10. Why Use Firebug?
S Easily preview & test html & CSS changes in real time
S No harm, no foul – changes don’t affect site until you add to
your stylesheet or custom CSS area
S Saves a ton of time, allows for easy debugging
S Ability to open Firefox controls in new window
S It’s FREE
11. Get & Start Firebug
S To get Firebug, go to http://getfirebug.com/
S To use, click the Firebug icon on your Firefox browser
12. Firefox Opens
Firefox splits your screen, opening it’s control window. This is where you will
identify & modify CSS
14. CSS Tips
S When styling for responsive sites, use percentage, EM &
REM instead of PX designation
S For example: .container {
S width: 100%;
S max-width: 650px;
S }
S Instead of .container {
S Width: 650px;
S }
15. CSS Tips
S The last CSS command to load wins.
S Imagine you have .menu li {font-size:14px;} at the top of your
stylesheet
S And you have .menu li {font-size:21px;} at the bottom of your
stylesheet
S Bottom one wins.
S Use !important after attribute if you have the selector correct
but the attribute just isn’t working
16. Fun with CSS
S CSS Background Patterns
S http://lea.verou.me/css3patterns/
S CSS Button Generator
S http://www.cssbuttongenerator.com/
17. CSS Resources
S How to load Google Fonts into your page
S http://www.wpbeginner.com/wp-themes/how-add-google-
web-fonts-wordpress-themes/
S How to use Firebug for WordPress (detailed slideshare)
S http://www.slideshare.net/LauraHartwig/customizing-your-
word-press-theme-with-firebug-and-css-33273990
S W3 Schools Tutorial
S http://www.w3schools.com/css/default.asp
18. Chrome Inspect Element
S Simply open Chrome, right click on the website & choose
Inspect Element
S To access stylesheet, click Sources tab & follow instructions
to open files
19. WordPress Default CSS
S WordPress generates default classes & IDs
S http://www.wpbeginner.com/wp-themes/default-wordpress-
generated-css-cheat-sheet-for-beginners/