Crackerjack CSS: Basics & Best Practices

The very basic things you need to know to get started with CSS, browser and browser developer tools, adventures in color palettes, how to add CSS to WordPress themes, and a few showcase examples of what I like to think of as the Cracker Jack surprise inside every website.

Transcript

1. CSS Basics & Best Practices Sheri Bigelow @designsimply
2. HTML Content CSS Style
3. <nav id="connect" class="clear"> <ul> ! <li class="flickr"> ! ! <a href="http://flickr.com/designsimply" title="Flickr"></a> ! </li> ! <li class="twitter"> ! ! <a href="http://twitter.com/designsimply" title="Twitter"></a> ! </li> ! <li class="rss"> ! ! <a href="http://designsimply.com/feed/" title="RSS"></a> ! </li> </ul> </nav> Elements
4. <nav id="connect" class="clear"> <ul> ! <li class="flickr"> ! ! <a href="http://flickr.com/designsimply" title="Flickr"></a> ! </li> ! <li class="twitter"> ! ! <a href="http://twitter.com/designsimply" title="Twitter"></a> ! </li> ! <li class="rss"> ! ! <a href="http://designsimply.com/feed/" title="RSS"></a> ! </li> </ul> </nav> Attributes
5. <nav id="connect" class="clear"> <ul> ! <li class="flickr"> ! ! <a href="http://flickr.com/designsimply" title="Flickr"></a> ! </li> ! <li class="twitter"> ! ! <a href="http://twitter.com/designsimply" title="Twitter"></a> ! </li> ! <li class="rss"> ! ! <a href="http://designsimply.com/feed/" title="RSS"></a> ! </li> </ul> </nav> ID & Class
7. #connect { display: inline-block; margin: 22px auto 8px; } #connect li { float: left; list-style-type: none; padding-left: 0.846em; } #connect li a:link, #connect li a:visited { display: block; width: 18px; height: 18px; border-bottom: none; } #connect li a:link:hover, #connect li a:visited:hover { background-position: 0 -18px; } #connect li.twitter a { background-image: url(images/twitter.png); } #connect li.flickr a { background-image: url(images/flickr.png); } #connect li.rss a { background-image: url(images/rss.png); } Selectors
8. #connect { display: inline-block; margin: 22px auto 8px; } #connect li { float: left; list-style-type: none; padding-left: 0.846em; } #connect li a:link, #connect li a:visited { display: block; width: 18px; height: 18px; border-bottom: none; } #connect li a:link:hover, #connect li a:visited:hover { background-position: 0 -18px; } #connect li.twitter a { background-image: url(images/twitter.png); } #connect li.flickr a { background-image: url(images/flickr.png); } #connect li.rss a { background-image: url(images/rss.png); } Properties
9. #connect { display: inline-block; margin: 22px auto 8px; } #connect li { float: left; list-style-type: none; padding-left: 0.846em; } #connect li a:link, #connect li a:visited { display: block; width: 18px; height: 18px; border-bottom: none; } #connect li a:link:hover, #connect li a:visited:hover { background-position: 0 -18px; } #connect li.twitter a { background-image: url(images/twitter.png); } #connect li.flickr a { background-image: url(images/flickr.png); } #connect li.rss a { background-image: url(images/rss.png); } Values
10. Selector Types
12. Who is more evil?
13. http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
14. Order Matters
16. Box Model
17. http://hicksdesign.co.uk/boxmodel/
18. Box Model http://redmelon.net/tstme/box_model/
19. Pseudo Elements
20. http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/
21. http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/demo/backgrounds.html
26. http://www.colorspire.com/
27. http://colorschemedesigner.com/
28. http://colourlovers.com/
29. http://www.istockphoto.com/
30. http://www.degraeve.com/color-palette/
31. http://color.aurlien.net/
34. Responsive Design
36. http://colly.com/
37. Validation
38. http://jigsaw.w3.org/css-validator/
39. Browser Wars
40. http://shoze.blogspot.com/2011/06/brorwser-wars.html
41. http://caniuse.com/
42. Developer Tools
44. Custom CSS http://wordpress.org/extend/plugins/safecss/
46. Child Themes http://wordpress.org/extend/plugins/one-click-child-theme/
50. http://daneden.me/animate/
51. https://developer.mozilla.org/en-US/demos/detail/css-tricks
52. https://developer.mozilla.org/en-US/demos/detail/the-planetarium
53. http://animatable.com/demos/madmanimation/
54. thank you :)