How to use CSS3 in WordPress
1 like6,088 views
The document provides an overview of how to use CSS3 in WordPress. It introduces the presenter and their goal to teach the audience at least one new thing. It then covers CSS/CSS3 basics, terminology, syntax, properties, specificity, inspecting CSS, new CSS3 modules like colors, gradients, border radius, and how to add CSS in WordPress through themes, plugins or inline styles. Resources for further learning CSS are also provided, followed by time for questions.
How to use CSS3 in WordPress
- 1. How to Use CSS3 in WordPress WordCamp Toronto 2015 by Suzette Franck
- 2. Who I Am HTML 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
- 3. My Goal Teach you at least one thing that you didn’t know before that will change how you work forever
- 4. What We Will Cover? What is CSS/CSS3? Using CSS in WordPress CSS Resources
- 6. CSS/CSS3 Basics Cascading 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.
- 7. Example of CSS Code
- 8. Terminology & Basic CSS Syntax
- 9. CSS Terminology Syntax 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; }
- 10. CSS Syntax h1 { color: deeppink; font-size: 18px; font-weight: bold; } selector { property: value; }
- 12. CSS Comments p { color: #FF0000; /* red */ /* This is a single-line comment */ text-align: center; } /* ——————-This is a xxxxxxxx multi-line xxxxxxxx comment ————- */
- 13. CSS Specificity More 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/
- 14. 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?
- 15. 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?
- 16. 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?
- 17. Inspecting CSS
- 18. Inspecting CSS w/Chrome View > Developer > Developer Tools or right-mouse click on the page > Inspect Element
- 20. New CSS3 Modules
- 21. New CSS3 Modules Colors & Transparency CSS Gradients Border Radius (Rounded Corners) Box Shadow & Text Shadow Transformations and Animations Web Fonts @font-face Media Queries (Responsive Design)
- 22. CSS3 Colors CSS2: 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
- 23. CSS3 Colors
- 24. 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
- 26. border-radius Accepts 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; }
- 28. Using CSS3 in WordPress
- 29. 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
- 30. Jetpack’s Edit CSS Module Once activated, go to Appearance > Edit CSS
- 31. Simple Custom CSS Once activated, go to Appearance > Custom
- 32. Inline CSS in Editor Add style attribute to opening tag in Text view <p style=“property: value; property: value;”> Considered hacky/janky/ bad practice, but works in a fix!
- 33. Child Theme’s style.css Child 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)
- 34. Starter Theme’s style.css Starter Themes include basic theme files Make your own custom theme from them
- 35. 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! )
- 36. CSS Resources
- 38. Q & A Any Questions?
- 39. Thank you for being here! Suzette Franck Twitter: @suzette_franck linkedin & speakerdeck & slideshare