how to use css3 in wordpress
TRANSCRIPT
![Page 1: How to use CSS3 in WordPress](https://reader034.vdocument.in/reader034/viewer/2022051404/58ee9ae01a28ab62788b4597/html5/thumbnails/1.jpg)
How to Use CSS3 in WordPress
WordCamp Toronto 2015
by
Suzette Franck
![Page 2: How to use CSS3 in WordPress](https://reader034.vdocument.in/reader034/viewer/2022051404/58ee9ae01a28ab62788b4597/html5/thumbnails/2.jpg)
Who I AmHTML and CSS teacher for Girl Develop It, Los Angeles Chapter
Freelancing Front End Developer
Born in Hollywood, Resides in S. California
Over 20 Years Coding & Web Development
Developed Over 300 WordPress Sites
Spoken at 25 WordCamps US & Canada
Regular Contributor: WPwatercooler.com
Hobbies: Crocheting & Adult Coloring Books
Twitter: suzette_franck
![Page 3: How to use CSS3 in WordPress](https://reader034.vdocument.in/reader034/viewer/2022051404/58ee9ae01a28ab62788b4597/html5/thumbnails/3.jpg)
My GoalTeach you at least one thing that you didn’t know before that will change how you work forever
![Page 4: How to use CSS3 in WordPress](https://reader034.vdocument.in/reader034/viewer/2022051404/58ee9ae01a28ab62788b4597/html5/thumbnails/4.jpg)
What We Will Cover?
What is CSS/CSS3?
Using CSS in WordPress
CSS Resources
![Page 5: How to use CSS3 in WordPress](https://reader034.vdocument.in/reader034/viewer/2022051404/58ee9ae01a28ab62788b4597/html5/thumbnails/5.jpg)
What is CSS/CSS3?
![Page 6: How to use CSS3 in WordPress](https://reader034.vdocument.in/reader034/viewer/2022051404/58ee9ae01a28ab62788b4597/html5/thumbnails/6.jpg)
CSS/CSS3 BasicsCascading Style Sheet language written in plain text
Used with HTML to give style/design to HTML elements
CSS3 is he latest evolution of CSS, which is meant to extend CSS 2.1, the previous version
CSS3 is backwards compatible with all versions of CSS
In WordPress, CSS code is most often put in a style.css plain text file in the starter, parent, or child theme folder in wp-content
Most themes have an “Edit CSS” option, or you can install a plugin to add your own CSS.
![Page 7: How to use CSS3 in WordPress](https://reader034.vdocument.in/reader034/viewer/2022051404/58ee9ae01a28ab62788b4597/html5/thumbnails/7.jpg)
Example of CSS Code
![Page 8: How to use CSS3 in WordPress](https://reader034.vdocument.in/reader034/viewer/2022051404/58ee9ae01a28ab62788b4597/html5/thumbnails/8.jpg)
Terminology & Basic CSS Syntax
![Page 9: How to use CSS3 in WordPress](https://reader034.vdocument.in/reader034/viewer/2022051404/58ee9ae01a28ab62788b4597/html5/thumbnails/9.jpg)
CSS TerminologySyntax refers to the proper format with punctuation for a line of code
Selectors select the HTML element to be styled and is placed on the left side of curly braces, which surround the style declarations
Each declaration includes one property: value(s); pair
Spaces and tabs are ignored in CSS, use often and generously for easy reading!
p { background-color: black; color: red; font-size: 1.5em; }
![Page 10: How to use CSS3 in WordPress](https://reader034.vdocument.in/reader034/viewer/2022051404/58ee9ae01a28ab62788b4597/html5/thumbnails/10.jpg)
CSS Syntax
h1 { color: deeppink; font-size: 18px; font-weight: bold; }
selector { property: value; }
![Page 11: How to use CSS3 in WordPress](https://reader034.vdocument.in/reader034/viewer/2022051404/58ee9ae01a28ab62788b4597/html5/thumbnails/11.jpg)
CSS Properties
browse http://www.w3schools.com/cssref/
or google it
![Page 12: How to use CSS3 in WordPress](https://reader034.vdocument.in/reader034/viewer/2022051404/58ee9ae01a28ab62788b4597/html5/thumbnails/12.jpg)
CSS Commentsp { color: #FF0000; /* red */ /* This is a single-line comment */ text-align: center; }
/* ——————-This is a xxxxxxxx multi-line xxxxxxxx comment ————- */
![Page 13: How to use CSS3 in WordPress](https://reader034.vdocument.in/reader034/viewer/2022051404/58ee9ae01a28ab62788b4597/html5/thumbnails/13.jpg)
CSS SpecificityMore specific overrides less specific
IDs override classes
Inline CSS overrides IDs
!important used at the end of a declaration overrides Inline CSS
Closest rule or declaration beats out remote declarations
http://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
![Page 14: How to use CSS3 in WordPress](https://reader034.vdocument.in/reader034/viewer/2022051404/58ee9ae01a28ab62788b4597/html5/thumbnails/14.jpg)
CSS Specificity Quiz
a { color: aqua; } ul { color: deeppink; } .warning { color: red; } #mainNav { color: yellow; } <ul class=“warning” id=“mainNav”> <li><a href=“/“>Home</a></li> </ul>
What color is the “Home” text based on below styles?
![Page 15: How to use CSS3 in WordPress](https://reader034.vdocument.in/reader034/viewer/2022051404/58ee9ae01a28ab62788b4597/html5/thumbnails/15.jpg)
CSS Specificity Quiz
a { color: aqua; } ul { color: deeppink; } .warning { color: red; } #mainNav { color: yellow; } <ul class=“warning” id=“mainNav”> <li><a href=“/“>Home</a></li> </ul>
What color is the “Home” text based on below styles?
![Page 16: How to use CSS3 in WordPress](https://reader034.vdocument.in/reader034/viewer/2022051404/58ee9ae01a28ab62788b4597/html5/thumbnails/16.jpg)
CSS Specificity Quiz
a { color: aqua; } ul { color: deeppink; } .warning { color: red; } #mainNav { color: yellow; } <ul class=“warning” id=“mainNav”> <li><a href=“/“>Home</a></li> </ul>
Bonus: what color is the bullet?
![Page 17: How to use CSS3 in WordPress](https://reader034.vdocument.in/reader034/viewer/2022051404/58ee9ae01a28ab62788b4597/html5/thumbnails/17.jpg)
Inspecting CSS
![Page 18: How to use CSS3 in WordPress](https://reader034.vdocument.in/reader034/viewer/2022051404/58ee9ae01a28ab62788b4597/html5/thumbnails/18.jpg)
Inspecting CSS w/Chrome
View > Developer > Developer Toolsor right-mouse click on the page > Inspect Element
![Page 19: How to use CSS3 in WordPress](https://reader034.vdocument.in/reader034/viewer/2022051404/58ee9ae01a28ab62788b4597/html5/thumbnails/19.jpg)
Inspecting CSS w/Chrome
![Page 20: How to use CSS3 in WordPress](https://reader034.vdocument.in/reader034/viewer/2022051404/58ee9ae01a28ab62788b4597/html5/thumbnails/20.jpg)
New CSS3 Modules
![Page 21: How to use CSS3 in WordPress](https://reader034.vdocument.in/reader034/viewer/2022051404/58ee9ae01a28ab62788b4597/html5/thumbnails/21.jpg)
New CSS3 ModulesColors & Transparency
CSS Gradients
Border Radius (Rounded Corners)
Box Shadow & Text Shadow
Transformations and Animations
Web Fonts @font-face
Media Queries (Responsive Design)
![Page 22: How to use CSS3 in WordPress](https://reader034.vdocument.in/reader034/viewer/2022051404/58ee9ae01a28ab62788b4597/html5/thumbnails/22.jpg)
CSS3 ColorsCSS2: 17 Color Names / CSS3: 140 Color Names
http://www.w3schools.com/cssref/css_colornames.asp
New Alpha on Reg-Green-Blue Values
rgba( 255, 0, 0, 0.5 );
Specify Hue, Saturation, Lightness, alone or with Alpha Values
hsla( 120, 100%, 50%, 0.5 );
Opacity Property (0 transparent 1 opaque)
http://www.w3schools.com/cssref/css_colors_legal.asp
![Page 23: How to use CSS3 in WordPress](https://reader034.vdocument.in/reader034/viewer/2022051404/58ee9ae01a28ab62788b4597/html5/thumbnails/23.jpg)
CSS3 Colors
![Page 24: How to use CSS3 in WordPress](https://reader034.vdocument.in/reader034/viewer/2022051404/58ee9ae01a28ab62788b4597/html5/thumbnails/24.jpg)
CSS3 Gradients
.fancy { background: -webkit-linear-gradient(red, green, blue); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(red, green, blue); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(red, green, blue); /* For Firefox 3.6 to 15 */ background: linear-gradient(red, green, blue); /* Standard syntax */ }
http://www.w3schools.com/css/css3_gradients.asp
![Page 25: How to use CSS3 in WordPress](https://reader034.vdocument.in/reader034/viewer/2022051404/58ee9ae01a28ab62788b4597/html5/thumbnails/25.jpg)
CSS3 Gradients http://www.colorzilla.com/gradient-editor/
![Page 26: How to use CSS3 in WordPress](https://reader034.vdocument.in/reader034/viewer/2022051404/58ee9ae01a28ab62788b4597/html5/thumbnails/26.jpg)
border-radiusAccepts px or %
Don’t forget to add vendor prefixes!
.rounded { border-top-left-radius: 5px; border-top-right-radius: 10px; border-bottom-right-radius: 20px; border-bottom-left-radius: 15px; }
or use the shorthand: .rounded { border-radius: 5px 10px 20px 15px; }
![Page 27: How to use CSS3 in WordPress](https://reader034.vdocument.in/reader034/viewer/2022051404/58ee9ae01a28ab62788b4597/html5/thumbnails/27.jpg)
border-radiushttp://border-radius.com/
![Page 28: How to use CSS3 in WordPress](https://reader034.vdocument.in/reader034/viewer/2022051404/58ee9ae01a28ab62788b4597/html5/thumbnails/28.jpg)
Using CSS3 in WordPress
![Page 29: How to use CSS3 in WordPress](https://reader034.vdocument.in/reader034/viewer/2022051404/58ee9ae01a28ab62788b4597/html5/thumbnails/29.jpg)
Where Do You Put CSS in WordPress?Installed Theme’s Custom CSS Option
Jetpack’s “Edit CSS” Module (my favorite)
Simple Custom CSS Plugin (if not using Jetpack)
Page/Post editor via Inline Styles
Child Theme’s style.css file
Starter Theme’s style.css file
![Page 30: How to use CSS3 in WordPress](https://reader034.vdocument.in/reader034/viewer/2022051404/58ee9ae01a28ab62788b4597/html5/thumbnails/30.jpg)
Jetpack’s Edit CSS ModuleOnce activated, go to Appearance > Edit CSS
![Page 31: How to use CSS3 in WordPress](https://reader034.vdocument.in/reader034/viewer/2022051404/58ee9ae01a28ab62788b4597/html5/thumbnails/31.jpg)
Simple Custom CSSOnce activated, go to Appearance > Custom
![Page 32: How to use CSS3 in WordPress](https://reader034.vdocument.in/reader034/viewer/2022051404/58ee9ae01a28ab62788b4597/html5/thumbnails/32.jpg)
Inline CSS in EditorAdd style attribute to opening tag in Text view
<p style=“property: value; property: value;”>
Considered hacky/janky/ bad practice, but works in a fix!
![Page 33: How to use CSS3 in WordPress](https://reader034.vdocument.in/reader034/viewer/2022051404/58ee9ae01a28ab62788b4597/html5/thumbnails/33.jpg)
Child Theme’s style.cssChild Themes inherit Parent Theme’s functionality
Modifications not overwritten when Parent Theme updates
Best method for extensive modifications
More info on creating Child Themes on the Codex: https://codex.wordpress.org/Child_Themes
Child Theme Plugins (Orbisius, One-click, Configurator)
![Page 34: How to use CSS3 in WordPress](https://reader034.vdocument.in/reader034/viewer/2022051404/58ee9ae01a28ab62788b4597/html5/thumbnails/34.jpg)
Starter Theme’s style.cssStarter Themes include basic theme files
Make your own custom theme from them
![Page 35: How to use CSS3 in WordPress](https://reader034.vdocument.in/reader034/viewer/2022051404/58ee9ae01a28ab62788b4597/html5/thumbnails/35.jpg)
Where Do You Not Put CSS?Linked to a stylesheet in the header.php (use wp_enqueue)
Using the native WordPress Theme Editor to edit style.css directly ( No undo or version history! )
![Page 36: How to use CSS3 in WordPress](https://reader034.vdocument.in/reader034/viewer/2022051404/58ee9ae01a28ab62788b4597/html5/thumbnails/36.jpg)
CSS Resources
![Page 37: How to use CSS3 in WordPress](https://reader034.vdocument.in/reader034/viewer/2022051404/58ee9ae01a28ab62788b4597/html5/thumbnails/37.jpg)
CSS Resourceshttp://www.csszengarden.com/
http://www.w3schools.com/css/css3_intro.asp
https://css-tricks.com/+ https://css-tricks.com/almanac
http://girldevelopit.com Take an HTML/CSS class
![Page 38: How to use CSS3 in WordPress](https://reader034.vdocument.in/reader034/viewer/2022051404/58ee9ae01a28ab62788b4597/html5/thumbnails/38.jpg)
Q & A
Any Questions?
![Page 39: How to use CSS3 in WordPress](https://reader034.vdocument.in/reader034/viewer/2022051404/58ee9ae01a28ab62788b4597/html5/thumbnails/39.jpg)
Thank you for being here!
Suzette Franck Twitter: @suzette_franck
linkedin & speakerdeck & slideshare