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 - Sacramento

922 views

Published on

WordCamp Sacramento

Published in: Technology
  • Be the first to comment

  • Be the first to like this

How to use CSS3 in WordPress - Sacramento

  1. 1. How to Use CSS3 in WordPress WordCamp Sacramento 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 27 WordCamps in US & Canada Regular Contributor: WPwatercooler.com 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. Classes and IDs CSS selectors can be an HTML element, a class, or an ID, or a combination of these Classes add a classification name and are indicated in CSS with a dot before the class name, there can be repeated on same page HTML looks like: 
 <h3 class=“special”>This is a heading</h3>
 Reference in CSS like:
 .special { color: red; } IDs add an identifying name and each ID can only be used once per page. IDs are indicated in CSS with a #. HTML looks like:
 <h3 id=“theonlyone”>This is a heading</h3>
 Reference in CSS like:
 #theonlyone { color: yellow; }
  12. 12. Classes and IDs CSS selectors can be an HTML element, a class, or an ID, or a combination of these Classes add a classification name and are indicated in CSS with a dot before the class name, there can be repeated on same page HTML looks like: 
 <h3 class=“special”>This is a heading</h3>
 Reference in CSS like:
 .special { color: red; } IDs add an identifying name and each ID can only be used once per page. IDs are indicated in CSS with a #. HTML looks like:
 <h3 id=“theonlyone”>This is a heading</h3>
 Reference in CSS like:
 #theonlyone { color: yellow; }
  13. 13. CSS Properties browse http://www.w3schools.com/cssref/ or google it
  14. 14. CSS Comments p { color: #FF0000; /* red */ /* This is a single-line comment */ text-align: center; } /* ——————-This is a xxxxxxxx multi-line xxxxxxxx comment ————- */
  15. 15. 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/
  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> What color is the “Home” text based on below styles?
  17. 17. 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?
  18. 18. 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?
  19. 19. 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?
  20. 20. Inspecting CSS
  21. 21. Inspecting CSS w/Chrome View > Developer > Developer Tools or right-mouse click on the page > Inspect Element
  22. 22. Inspecting CSS w/Chrome
  23. 23. New CSS3 Modules
  24. 24. 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)
  25. 25. 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
  26. 26. 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
  27. 27. CSS3 Gradients http://www.colorzilla.com/gradient-editor/
  28. 28. 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; }
  29. 29. border-radius http://border-radius.com/
  30. 30. Using CSS3 in WordPress
  31. 31. 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
  32. 32. Jetpack’s Edit CSS Module Once activated, go to Appearance > Edit CSS
  33. 33. Simple Custom CSS Once activated, go to Appearance > Custom
  34. 34. 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!
  35. 35. 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)
  36. 36. Starter Theme’s style.css Starter Themes include basic theme files Make your own custom theme from them
  37. 37. 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! )
  38. 38. CSS Resources
  39. 39. CSS Resources http://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
  40. 40. CSS3 Code Demo
  41. 41. Q & A Any Questions?
  42. 42. Thank you for being here! Suzette Franck Twitter: @suzette_franck
 linkedin & speakerdeck & slideshare

×