Using CSS3 in WordPress Suzette Franck 2013 WordCamp Las Vegas Sunday, December 15, 2013 Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple 

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Suzette Franck with a “ck” ★WordPress Evangelist @ Media Temple ★Born in Hollywood, California Native ★20 Years Coding & Web Development ★Developed over 200 WordPress sites ★Spoke at 12 WordCamps & WordSesh ★Attended 78 WordPress Meetups, spoke at 25 ★Reg. Contributor on WPwatercooler.com ★Hosted DradCast Episode 17 ★Blogs at: suzettefranck.com ★Slides: speakerdeck.com/suzettefranck Follow me! @mt_Suzette 

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple What We Will Cover 

• What is CSS? • Inspecting CSS • CSS Selectors • Using CSS3 in WordPress • What’s New in CSS3 Demo Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple “Using CSS3 in WordPress” by Suzette Franck 

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple What Is CSS? Cascading Style Sheets 

• Coding language that defines the styles of a webpage • Used in conjunction with HTML • Controls layout and appearance of HTML elements • Keeps styles separate from HTML markup • Ability to share common styles across different pages • Provides portability of code • Completed in 1996, but most browsers didn’t support until 2007 • If you are a web designer that wants to get into coding, CSS is for you! Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple What Are Cascading Style Sheets (CSS)? 

• The World Wide Web Consortium (W3C) • International Standards Organization • Made up of 351 members & organizations • Defines recommendations for the Web • http://www.w3.org/ Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Who Makes This Stuff Up? 

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple CSS Timeline CSS 1.0 1996 1998 CSS 2.0 CSS 2.1* 2004-2011 CSS 3.0 1999-Current (modularized) CSS 2 or CSS *Most browsers did not fully adopt CSS standards until 2007! 

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Inspecting CSS Examination of what has been done previously is the key to learning efficiently 

• Any Plain Old Text Editor • Sublime Text 2 or Coda 2 for Mac • Notepad++ for PC • Latest Version of FireFox • Firebug Extension for FireFox • Colorzilla Extension for FireFox • Good Google Skills • Time and Curiosity Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple CSS Tools + 

• FireFox with FireBug and Colorzilla Extensions • http://www.htmlgoodies.com/beyond/css/firebug-an-overview.html Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Examining CSS 

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Coding Best Practices • Indent and use spaces • Separate declarations on a individual lines • Use shorthand versions when possible • Comment liberally • Principles of writing consistent, idiomatic CSS by Nicolas Gallagher • https://github.com/necolas/idiomatic-css 

• Zeros out browser defaults: margin, border, padding, font-sizes, line-heights • Clears floats, sets display properties, etc. • Consistency of defaults across browsers • Good themes use them • Beginning of stylesheet • Normalize: http://git.io/normalize • Reset: http://meyerweb.com/eric/tools/css/reset/ Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple CSS Resets/Normalizing 

• Build cross-browser sites with tried and true standards • Add additional features that degrade gracefully • Always consider your audience • Definitely consider Mobile Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Progressive Enhancement 

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple CSS Selectors To apply CSS, target the HTML element to change 

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Terminology of CSS Rules 

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple IDs and Classes • classes can be added to any HTML element

• IDs are more specific than classes, but used similarly

• Both can not start with a number • Both must be named uniquely • Use semantic names over attribute names • “title” is better then “redbold” for a name • What is the difference? 

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple IDs • IDs can only be used once on a page • IDs indexed by the browser • Fancy things can be done with IDs & Javascript • Loaded a bit faster than classes • Specified with #title on the stylesheet

My Rad Title



Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple classes • Use on any HTML element i.e. div, span, p • Define a style for all instances of that class • Classes make the world go round • Specified as .title on the stylesheet

My Rad Title



Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple

My Rad Title 2

My Rad Title 1

• Classes and IDs are independent of each other • Class and ID be the same name • Treated as two separate entities 

• More specific and closest in proximity takes precedence • IDs take precedence over classes • !important; trumps all • If multiple rules apply, the last one loaded wins • More info at: http://css-tricks.com/specifics-on-css-specificity/ Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple CSS Specificity “Yahtzee or Poker for Styles” 

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Element Selector Selects any and all HTML elements with matching tag 

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Class Selector Selects any HTML element containing the matching class 

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ID Selector • Selects the HTML element containing matching ID • Each ID used only once per page, last one wins • IDs are indexed by the browser • Faster to render than classes • Takes precedence over classes • Most specific way to designate an HTML element 

• Ignored by browsers • Documents code • Use liberally! Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple CSS Comments 

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple CSS Pseudo Classes :hover :visited :first-child :last-child :first-letter :first-line 

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple CSS Selectors That Rock http://web-design-weekly.com/2012/05/31/css-selectors-that-rock/ 

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Twenty Thirteen Stylesheet Tip: WordPress 20xx default themes are great to study from! 

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Using CSS3 in WordPress The Right Way 

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Where Does CSS NOT Go? • Manually linked in between tags in the header.php of your WordPress theme like so: • http://goo.gl/D0Pv4 WRONG 

1.Inline in WordPress Page/Post editor (frowned upon) 2.If available...in theme’s or plugin’s “Custom CSS” section 3.In child theme’s style.css Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Where Does CSS in WordPress Go? 

• Click on Text view in WordPress Editor • add code to HTML element:

text

• Use sparingly! Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Inline CSS in Text Editor 

• Many themes have an option to add Custom CSS (WooThemes) • Jetpack Plugin custom CSS module, adds Appearance > Edit CSS Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Custom CSS 

• Preserve future upgradability of parent theme • Preserves your custom modifications • Allows you to keep parent themes updated with latest version • Takes on code of parent theme Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Why Child Themes? 

• Using SFTP...create a folder under wp-content/themes/ • Create plain text file style.css and copy required header to theme’s root folder • More Info: http://codex.wordpress.org/Child_Themes Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Creating Child Themes 

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple What’s New in CSS3? Modularization 

• Are necessary evil of CSS3 • Eventually will be phased out • prefixr.com or CSS3 generator • CSS Preprocessor like SASS or LESS Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Vendor Prefixes 

• 130 New Color Keywords + 17 previously = 147 • http://www.w3schools.com/cssref/css_colornames.asp • RGBA (red, green, blue, alpha) • HSLA (hue, saturation, lightness, alpha) • Opacity Property (applies to children) Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple CSS3 Colors 

• Specify colors, separated by commas • Specify stops or distributed evenly • Specify angle of gradient • Linear gradients well supported, circular not so much Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple CSS3 Gradients 

• Specify different images separated by commas • Stacking order is first to top, last to bottom • Can be combined with a linear gradient background • New! background-size: cover; /*stretches to fill page*/ Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple CSS3 Multiple Background Images 

• Shorthand can be used • Specify each corner from top left clockwise • Border images are cool but not well supported Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple CSS3 Rounded Corners 

• Specify multiple shadows, separated with commas • Box: horizontal offset, vertical offset, blur, spread, color • Text: horizontal offset, vertical offset, blur, color Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple CSS3 Box & Text Shadows 

• Translate: move up and down, left to right • Transform: rotate, scale, skew • w3schools.com/cssref/css3_pr_transform.asp • Specify multiple transforms separated by spaces • Use on any element, class, or id • Magical when used with :hover Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple CSS3 Transforms 

• Transforms with added duration, delay, and/or easing • Define default state with transition instructions • Define :hover state • Specify multiple transforms, separated by commas Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple CSS3 Transitions 

• Minimally specify beginning & end frames • Specify on element to be applied to: • animation-name (you define) • animation-duration (seconds) • animation-iteration-count (infinite or number) Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple CSS3 Animations @keyframes 

• Way to include font file in CSS • http://www.fontsquirrel.com/ • http://www.fontsquirrel.com/tools/webfont-generator • Add @font-face declarations near the top of the style sheet • Always check font licensing to see if web embedding is allowed Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple @font-face 

• Specify rules depending on screen min-width / max-width • Building blocks of responsive design • Typically at end of stylesheet Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple @media queries http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ 

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple mediaqueri.es 

• CSS3Pie.com • Modernizr Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Much Ado About IE 

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple CSS3 Tricks 

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple CSS3 Resources ★http://css-tricks.com/ ★http://wordpress.tv/?s=Chris+Coyier ★http://www.css3.info/ ★http://reference.sitepoint.com/css ★http://coding.smashingmagazine.com/tag/css/ ★http://w3schools.com (Not related to W3C) 

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple CSS3 Generators ★http://css3generator.com/ ★http://css3please.com/ ★http://www.css3.me/ ★http://www.css3maker.com/ ★http://css3.mikeplate.com/ ★http://mothereffingtextshadow.com/ 

http://suzettefranck.com/css3/ Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple CSS3 Demo! Click the Magical WordPress Unicorn 

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Questions? Suzette Franck [email protected] https://speakerdeck.com/suzettefranck @mt_Suzette