Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

• 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?

Slide 3

Slide 3 text

• 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?

Slide 4

Slide 4 text

• 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

Slide 5

Slide 5 text

• 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)?

Slide 6

Slide 6 text

• 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?

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

• 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

Slide 9

Slide 9 text

• 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 +

Slide 10

Slide 10 text

• 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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

• 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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

• 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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

• 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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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/

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

• 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?

Slide 25

Slide 25 text

• 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

Slide 26

Slide 26 text

• 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

Slide 27

Slide 27 text

• 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

Slide 28

Slide 28 text

• 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

Slide 29

Slide 29 text

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://wp.tutsplus.com/articles/how-to-include-javascript-and-css-in-your- wordpress-themes-and-plugins/ WRONG

Slide 30

Slide 30 text

• 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

Slide 31

Slide 31 text

• 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

Slide 32

Slide 32 text

• 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

Slide 33

Slide 33 text

• 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/

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

• 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

Slide 36

Slide 36 text

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)

Slide 37

Slide 37 text

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/

Slide 38

Slide 38 text

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] @mt_Suzette https://speakerdeck.com/suzettefranck