Boxes                                                                                                           Paging

Upcoming SlideShare
Loading in...5

Css Cheat Sheet


Published on

Css Cheat Sheet

Published in: Technology, Art & Photos
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Css Cheat Sheet

  1. 1. Boxes Paging css margin * size margin-top marks margin-right page-break-before margin-bottom page-break-after margin-left page-break-inside page padding * orphans padding-top widows padding-right padding-bottom Color / Background /* Comment */ Width Visible Area padding-left color @media type { * background selector { border * background-color property: values; border-top * background-image border-bottom * background-repeat } border-right * background-attachment } (Media type optional) border-left * background-position border-color * Fonts border-top-color * font border-right-color font-family Styles apply to: border-bottom-color font-style * All elements border-left-color font-variant div <div> font-weight Height Border Padding Margin div * Elements within <div> border-style * font-stretch border-top-style div span font-size <span> within <div> border-right-style font-size-adjust div, span <div> and <span> border-bottom-style div > span <span> with <div> as border-left-style Text parent px Pixels text-indent border-width * div + span text-align <span> preceded by em 1em equal to font size of border-top-width text-decoration <div> ... </div> parent (same as 100%) border-right-width text-shadow .class Elements of class quot;classquot; ex Height of lower case quot;xquot; border-bottom-width letter-spacing div.class <div> of class quot;classquot; % Percentage border-left-width word-spacing #itemid text-transform Element with id quot;itemidquot; in Inches Positioning white-space div#itemid <div> with id quot;itemidquot; cm Centimeters display a[class] <a> with class attribute mm Millimeters position Tables a[class='x'] <a> when class is quot;xquot; pt 1pt = 1/72in top caption-side right a[class~='x'] <a> when class is a list table-layout pc 1pc = 12pt bottom border-collapse of space-seperated values #789abc RGB Hex Notation left border-spacing and one of those is 'x' #acf Equates to quot;#aaccffquot; float empty-cells a[lang|='en'] <a> when lang begins rgb(0,25,50) Value (0 to 255) of each clear speak-header z-index with quot;enquot; of red, green, and blue. direction Interface May also be percentages unicode-bidi cursor 0 0 requires no unit overflow * outline clip outline-width Styles apply to: visibility outline-style outline-color :first-child First child of element Dimensions azimuth list-style :first-line First line of element width Aural border-collapse list-style-image :first-letter First letter of element min-width volume border-spacing list-style-position :hover Element when mouse over max-width speak caption-side list-style-type height * pause :active Active element min-height pause-before color orphans :focus Element with focus max-height pause-after cursor page :link Non-active, unvisited line-height * cue direction page-break-inside links without mouse over. vertical-align cue-before empty-cells quotes cue-after :visited Visited links Miscellaneous play-during font speak :lang(lang) Element with text of content azimuth font-family speak-header language quot;langquot; quotes elevation font-stretch text-align counter-reset speech-rate font-size text-indent counter-increment voice-family marker-offset pitch font-size-adjust text-transform list-style * pitch-range font-style volume all projection list-style-type stress font-variant white-space braille screen list-style-image richness font-weight widows list-style-position speak-punctuation embossed speech speak-numeral letter-spacing word-spacing handheld tty Shorthand properties line-height Available free from print tv are marked with *
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.