Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS3 For Beginners

CSS3 For Beginners

CSS3 is the latest and greatest in web technology. Using CSS in WordPress is a little different then using CSS for regular webpages, and the methods to doing this will be reviewed. If you are new to CSS in general, this session will help you to understand the basics and show you how to leverage the new CSS3 modules to make your website really pop! The CSS3 demo is set up on http://suzettefranck.com/css3/

6224f65dc0d9288ca4c9817d993d8ca4?s=128

Suzette Franck

March 23, 2013
Tweet

Transcript

  1. CSS3 For Beginners Suzette Franck 2013 San Diego WordCamp March

    23, 2013 Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple
  2. • Suzette Franck • WordPress Evangelist Lead at Media Temple

    • 18+ Years Web Development & Coding • Twitter: @mt_Suzette • Slides: https://speakerdeck.com/suzettefranck Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Who Am I?
  3. • Be familiar with HTML code • Be familiar with

    WordPress settings • Google skills Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Who Are You?
  4. • CSS History • CSS Terminology & Concepts • Examining

    CSS • How to use CSS in WordPress • CSS3 Modules Demo Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple What We Will Cover
  5. • Controls layout and appearance of page elements • Keeps

    styles separate from HTML markup • Ability to share common styles across different pages • Completed in 1996, but most browsers didn’t support until 2007 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)?
  6. • The World Wide Web Consortium (W3C) • International Standards

    Organization • Made up of 351 members & organizations • Define 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?
  7. 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
  8. • Build cross-browser sites with tried and true standards •

    Add additional features that degrade gracefully • 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
  9. • 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 +
  10. • Everything in CSS is based off of rectangles •

    margin, border, padding • Browsers have different defaults (CSS Resets: http://git.io/normalize) Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple CSS Box Model
  11. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple CSS Units of Measure 10px = actual pixels 1.5em = width of m in current font size 50% = percentage Tip: Use relative units (em & %) for Responsive Design
  12. • More specific and closest in proximity takes precedence •

    IDs take precedence over classes • Added to end of declaration before ; !important; trumps all • If multiple rules apply, the last one 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
  13. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Anatomy of CSS Rules
  14. • 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
  15. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Twenty Thirteen Stylesheet
  16. • 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
  17. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Selectors and Containers • Selectors select HTML elements • Selectors come before {} • Major types of selectors: Universal, Element, Class, ID • Classes and IDs can be added to target specific elements • Div and Span containers can be added to segment HTML further
  18. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Universal Selector Selects all HTML elements Tip: Add the above rule to see all the CSS boxes on the page
  19. 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
  20. 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
  21. 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
  22. 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/
  23. 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
  24. • If available...in theme’s or plugin’s “Custom CSS” section •

    In child theme’s style.css • Inline in WordPress Page/Post editor (only for emergencies) Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Where Does CSS Go?
  25. • Many themes have an option to add Custom CSS

    • 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
  26. • Preserve future upgradability of parent theme • Preserves your

    custom modifications • Allows you to keep parent themes updated with latest version Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Why Child Themes
  27. • 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
  28. • Click on Text view in WordPress Editor • add

    style=”property: value; property2: value;” to HTML element • 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
  29. 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 <head> tags in the header.php of your WordPress theme like so: <link rel=”stylesheet” type=”text/css” href=”mystyle.css”> • http://wp.tutsplus.com/articles/how-to-include-javascript-and-css-in-your- wordpress-themes-and-plugins/ WRONG
  30. • Are necessary evil, but will be phased out like

    border-radius • prefixr.com • CSS Preprocessor like Sass Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Vendor Prefixes
  31. • CSS3Pie.com Progressive Internet Explorer • 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
  32. • 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
  33. • Building blocks of responsive design • Typically at end

    of stylesheet • Specify different rules depending on screen min-width and max-width 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/
  34. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple mediaqueri.es
  35. • http://validator.w3.org/unicorn/ • Unicorn: tests against current W3 Recommendations •

    Use as a guideline • Newer features will throw errors Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple CSS Validation
  36. 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)
  37. 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/
  38. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Questions? Suzette Franck sfranck@mediatemple.net @mt_Suzette https://speakerdeck.com/suzettefranck