Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

CSS Quick Reference / Cheat Sheet - Scott DeLoach, ClickStart

2,033 views

Published on

CSS Quick Reference / Cheat Sheet

Published in: Technology
  • Be the first to comment

CSS Quick Reference / Cheat Sheet - Scott DeLoach, ClickStart

  1. 1. CSS Quick Reference Defining styles Height and width External height: 20px; can be px, ems, % <link rel="stylesheet" type="text/css" href="styles.css" media="screen" /> width: 100px; Embedded Margins <style type="text/css"> … </style> top, right, bottom, left margin: 2px 0px 2px 0px; Color Bold, italic, and underline Text align p { color: red; } font-weight: bold; text-align: left, Padding Borders p { color: #f00; } font-style: italic; right, center top right bottom left width style color p { color: #ff0000; } text-decoration: underline; justify; padding: 2px 0px 2px 0px; border: 1px solid black; Image alignment Spacing IDs Classes vertical-align: super, top, text-top, middle, letter-spacing: 2px; You should only use an id once/file. You can use a class many times. baseline, bottom, text-bottom, word-spacing: 2px; P#myID { color: #f000; } p.myClass { color: #f00; } sub <p id=“myID”>red text</p> <p class="myClass">red text</p> Background #myID { color: #f00; } .myClass { color: #f00; } background-color: #f00; <p id=“myID">red text</p> or <h1 class="myClass">red text</h1> background-image: url(image.gif); <h1 id=“myID">red text</h1> <p class="myClass">red text</p> background-repeat: repeat, no-repeat, repeat-x, repeat-y background-attachment: scroll, fixed Measurement units Link pseudo selectors background-position: top, center, bottom, left, right points: 12pt; /* good for print styles */ LoVe/HAte a:link { color: red; } pixels: 12px; /* used for spacing */ :link Shorthand ‘ems’: 1em; /* ≈ 100% */ background: #fff url(image.gif) no-repeat fixed center; :visited percentages: 120%; /* will inherit */ :focus :hover Lists Position, overflow, and visibility :active list-style-type: circle, decimal, disc, square, lower-roman, clear: both, left, right, none upper-roman, lower-alpha, upper-alpha, none float: left, right, none Comments list-style-position: inside or outside left: auto, measurement value list-style-image: url(image.gif); top: auto, measurement value /* this is a comment */ position: relative, absolute overflow: visible, hidden, scroll, auto Font family visibility: visible, hidden font-family: Georgia, "Times New Roman", serif; z-index: auto, integer© 2012 ClickStart, Inc. | UX + UA Consulting and Training | www.clickstart.net

×