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

Crackerjack CSS: Basics & Best Practices

Sheri Bigelow
January 20, 2012

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.

Sheri Bigelow

January 20, 2012
Tweet

More Decks by Sheri Bigelow

Other Decks in Design

Transcript

  1. <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
  2. <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
  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> ID & Class
  4. #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
  5. #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
  6. #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