Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

How to use CSS3 in WordPress


Published on

How to use CSS3 the right way in WordPress

Published in: Technology
  • Be the first to comment

  • Be the first to like this

How to use CSS3 in WordPress

  1. 1. How to Use CSS3 in WordPress WordCamp Toronto 2015 by Suzette Franck
  2. 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: Hobbies: Crocheting & Adult Coloring Books Twitter: suzette_franck
  3. 3. My Goal Teach you at least one thing that you didn’t know before that will change how you work forever
  4. 4. What We Will Cover? What is CSS/CSS3? Using CSS in WordPress CSS Resources
  5. 5. What is CSS/CSS3?
  6. 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. 7. Example of CSS Code
  8. 8. Terminology & 
 Basic CSS Syntax
  9. 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. 10. CSS Syntax h1 { color: deeppink; font-size: 18px; font-weight: bold; } selector { property: value; }
  11. 11. CSS Properties browse or google it
  12. 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. 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 specificity-things-you-should-know/
  14. 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. 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. 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. 17. Inspecting CSS
  18. 18. Inspecting CSS w/Chrome View > Developer > Developer Tools or right-mouse click on the page > Inspect Element
  19. 19. Inspecting CSS w/Chrome
  20. 20. New CSS3 Modules
  21. 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. 22. CSS3 Colors CSS2: 17 Color Names / CSS3: 140 Color Names 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)
  23. 23. CSS3 Colors
  24. 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 */ } css3_gradients.asp
  25. 25. CSS3 Gradients
  26. 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; }
  27. 27. border-radius
  28. 28. Using CSS3 in WordPress
  29. 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. 30. Jetpack’s Edit CSS Module Once activated, go to Appearance > Edit CSS
  31. 31. Simple Custom CSS Once activated, go to Appearance > Custom
  32. 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. 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: Child Theme Plugins (Orbisius, One-click, Configurator)
  34. 34. Starter Theme’s style.css Starter Themes include basic theme files Make your own custom theme from them
  35. 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. 36. CSS Resources
  37. 37. CSS Resources Take an HTML/CSS class
  38. 38. Q & A Any Questions?
  39. 39. Thank you for being here! Suzette Franck Twitter: @suzette_franck
 linkedin & speakerdeck & slideshare