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