CSS3 For Beginners

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

View Slide

• Suzette Franck
• WordPress Evangelist Lead at
Media Temple
• 18+ Years Web Development & Coding
• Twitter: @mt_Suzette
• Slides:
https://speakerdeck.com/suzettefranck
Who Am I?

View Slide

• Be familiar with HTML code
• Be familiar with WordPress
settings
• Google skills
Who Are You?

View Slide

• CSS History
• CSS Terminology & Concepts
• Examining CSS
• How to use CSS in WordPress
• CSS3 Modules Demo
What We Will Cover

View Slide

• 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
What Are Cascading Style Sheets (CSS)?

View Slide

• The World Wide Web Consortium (W3C)
• International Standards Organization
• Made up of 351 members & organizations
• Define recommendations for the Web
• http://www.w3.org/
Who Makes This Stuff Up?

View Slide

CSS Timeline
CSS 1.0
1996 1998
CSS 2.0 CSS 2.1
2004-2011
CSS 3.0
1999-Current
(modularized)
CSS 2

View Slide

• Build cross-browser sites with tried and true standards
• Add additional features that degrade gracefully
• Consider your audience
• Definitely consider Mobile
Progressive Enhancement

View Slide

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

View Slide

• Everything in CSS is based off of rectangles
• margin, border, padding
• Browsers have different defaults (CSS Resets: http://git.io/normalize)
CSS Box Model

View Slide

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

View Slide

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

View Slide

Anatomy of CSS Rules

View Slide

• FireFox with FireBug and Colorzilla Extensions
• http://www.htmlgoodies.com/beyond/css/firebug-an-overview.html
Examining CSS

View Slide

Twenty Thirteen Stylesheet

View Slide

• Ignored by browsers
• Documents code
• Use liberally!
CSS Comments

View Slide

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

View Slide

Universal Selector
Selects all HTML elements
Tip: Add the above rule to see all the CSS boxes on the page

View Slide

Element Selector
Selects any and all HTML elements with matching tag

View Slide

Class Selector
Selects any HTML element containing the matching class

View Slide

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

View Slide

CSS Selectors That Rock
http://web-design-weekly.com/2012/05/31/css-selectors-that-rock/

View Slide

CSS Pseudo Classes
:hover
:visited
:first-child
:last-child
:first-letter
:first-line

View Slide

• 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)
Where Does CSS Go?

View Slide

• Many themes have an option to add Custom CSS
• Jetpack Plugin custom CSS module, adds Appearance > Edit CSS
Custom CSS

View Slide

• Preserve future upgradability of parent theme
• Preserves your custom modifications
• Allows you to keep parent themes updated with latest version
Why Child Themes

View Slide

• 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
Creating Child Themes

View Slide

• Click on Text view in WordPress Editor
• add style=”property: value; property2: value;” to HTML element
• Use sparingly!
Inline CSS in Text Editor

View Slide

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

View Slide

• Are necessary evil, but will be phased out like border-radius
• prefixr.com
• CSS Preprocessor like Sass
Vendor Prefixes

View Slide

• CSS3Pie.com
Progressive Internet Explorer
• Modernizr
Much Ado About IE

View Slide

• 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
@font-face

View Slide

• Building blocks of responsive design
• Typically at end of stylesheet
• Specify different rules depending on screen min-width and max-width
@media queries
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

View Slide

mediaqueri.es

View Slide

• http://validator.w3.org/unicorn/
• Unicorn: tests against current W3 Recommendations
• Use as a guideline
• Newer features will throw errors
CSS Validation

View Slide

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)

View Slide

CSS3 Generators
★http://css3generator.com/
★http://css3please.com/
★http://www.css3.me/
★http://www.css3maker.com/
★http://css3.mikeplate.com/
★http://mothereffingtextshadow.com/

View Slide

Questions?
Suzette Franck
[email protected]
@mt_Suzette
https://speakerdeck.com/suzettefranck

View Slide

CSS3 For Beginners

CSS3 For Beginners

Suzette Franck

More Decks by Suzette Franck

Other Decks in Technology

Featured

Transcript