|
| 1 | +# CSS Cheat Sheet |
| 2 | +A quick go to guide for CSS goodness. Checkout the [pretty version](http://adam-marsden.co.uk/css-cheat-sheet). |
| 3 | + |
| 4 | +##Contributing |
| 5 | +If you have a bug to report about the [pretty CSS Cheat Sheet](http://adam-marsden.co.uk/css-cheat-sheet) or something to add onto the CSS Cheat Cheet follow the [contribution guidelines](https://github.com/AdamMarsden/css-cheat-sheet/blob/master/CONTRIBUTING.md). |
| 6 | + |
| 7 | +##CSSCS Nav |
| 8 | + |
| 9 | + * [Selectors](https://github.com/AdamMarsden/css-cheat-sheet#selectors) |
| 10 | + * [Pseudo Selectors](https://github.com/AdamMarsden/css-cheat-sheet#pseudo-selectors) |
| 11 | + * [Font Styling](https://github.com/AdamMarsden/css-cheat-sheet#font-styling) |
| 12 | + * [Position](https://github.com/AdamMarsden/css-cheat-sheet#position) |
| 13 | + * [Background](https://github.com/AdamMarsden/css-cheat-sheet#background) |
| 14 | + * [Box properties](https://github.com/AdamMarsden/css-cheat-sheet#box-properties) |
| 15 | + * [List Styling](https://github.com/AdamMarsden/css-cheat-sheet#list-styling) |
| 16 | + |
| 17 | + |
| 18 | +###Selectors |
| 19 | + |
| 20 | +Universal Selector `* {}` |
| 21 | + |
| 22 | +Type Selector `h1, h2 ,h3 {}` |
| 23 | + |
| 24 | +Child Selector `ul > li {}` |
| 25 | + |
| 26 | +Descendant Selector `p a {}` |
| 27 | + |
| 28 | +Class Selector `.class {}` |
| 29 | + |
| 30 | +ID Selector `#id {}` |
| 31 | + |
| 32 | +Adjacent Sibling Selector `h1 + p {}` |
| 33 | + |
| 34 | +General Sibling Selector `h1 ~ p {}` |
| 35 | + |
| 36 | +###Pseudo Selectors |
| 37 | + |
| 38 | +Mouse Over Selector `a:hover {}` |
| 39 | + |
| 40 | +Active Link Selector `a:active {}` |
| 41 | + |
| 42 | +Focus Selector `input:focus {}` |
| 43 | + |
| 44 | +Visited Links Selector `a:visited {}` |
| 45 | + |
| 46 | +Link Selector `.class:link {}` |
| 47 | + |
| 48 | +First Line Selector `p::first-line {}` |
| 49 | + |
| 50 | +First Letter Selector `p::first-letter {}` |
| 51 | + |
| 52 | +First Child Selector `p:first-child {}` |
| 53 | + |
| 54 | +Last Child Selector `p:last-child {}` |
| 55 | + |
| 56 | +:nth-child Selector `p:nth-child() {}` |
| 57 | + |
| 58 | +###Font Styling |
| 59 | + |
| 60 | +Font style `font-style: normal | italic | oblique` |
| 61 | + |
| 62 | +Font Variant `font-variant: normal | small-caps` |
| 63 | + |
| 64 | +Font Weight `font-weight: normal | bold | bolder | lighter | 100 - 900` |
| 65 | + |
| 66 | +Vertical Alignment `vertical-align: baseline | 10px | sub | super | top | |
| 67 | +text-top | middle | bottom | text-bottom | initial` |
| 68 | + |
| 69 | +Font Size `font-size: 12px | 0.8em | 80%` |
| 70 | + |
| 71 | +Text Transform `text-transform: capitalise | lowercase | uppercase` |
| 72 | + |
| 73 | +Space Between Characters `letter-spacing: normal | 4px` |
| 74 | + |
| 75 | +Line Height `line-height: normal | 3em | 34%` |
| 76 | + |
| 77 | +Horizontal Alignment `text-align: left | right | center | justify` |
| 78 | + |
| 79 | +Text Decoration `text-decoration: none | underline | overline | line-through` |
| 80 | + |
| 81 | +Indent First Line `text-indent: 25px` |
| 82 | + |
| 83 | +Font Family `font-family: 'Open Sans', sans-serif` |
| 84 | + |
| 85 | +###Position |
| 86 | + |
| 87 | +Position `position: static | relative | absolute` |
| 88 | + |
| 89 | +Left Position `left: 10px | 10% | auto` |
| 90 | + |
| 91 | +Top Position `top: 10px | 10% | auto` |
| 92 | + |
| 93 | +Float Element `float: left | right | none` |
| 94 | + |
| 95 | +Clear Floating Elements `clear: none | left | right | both` |
| 96 | + |
| 97 | +Z Index `z-index: 3 | auto | inherit` |
| 98 | + |
| 99 | +###Background |
| 100 | + |
| 101 | +Background Image `background-image: url()` |
| 102 | + |
| 103 | +Background Repeat `background-repeat: repeat-x | repeat-y | repeat | space | |
| 104 | +round | no-repeat` |
| 105 | + |
| 106 | +Background Color `background-color: #2AA9E0` |
| 107 | + |
| 108 | +Background Position `background-position: top | right | bottom | left | |
| 109 | +center` |
| 110 | + |
| 111 | +###Box properties |
| 112 | + |
| 113 | +Margin `margin-top: 2px` `margin-right: 4px | auto` `margin-bottom: 6px` |
| 114 | +`margin-left: 8px | auto` `margin: 2px 4px 6px 8px | 0 auto` |
| 115 | + |
| 116 | +Padding `padding-top: 2px` `padding-right: 4px | auto` `padding-bottom: 6px` |
| 117 | +`padding-left: 8px | auto` `padding: 2px 4px 6px 8px | 0 auto` |
| 118 | + |
| 119 | +Border Color `border-color: #2AA9E0` |
| 120 | + |
| 121 | +Border Style `border-style: none | hidden | dotted | dashed | solid | double | |
| 122 | +groove | ridge | inset | outset` |
| 123 | + |
| 124 | +Border Width `border-width: 10px` |
| 125 | + |
| 126 | +###List Styling |
| 127 | + |
| 128 | +List Type `list-style-type: disc | circle | square | none` |
| 129 | + |
| 130 | +List Position `list-style-position: inside | outside` |
| 131 | + |
| 132 | +List Image `list-style-image: url();` |
| 133 | + |
| 134 | +##Notes |
| 135 | + |
| 136 | +Project by [Adam Marsden](https://twitter.com/AdamMarsdenUK) |
| 137 | + |
| 138 | +Made with [Crumpet](http://suitedpixel.com/crumpet/) |
0 commit comments