100% found this document useful (31 votes)
4K views

CSS Cheat Sheet v2

This document provides a summary of CSS selectors and properties related to styling elements. It includes a list of CSS selectors for targeting different types of elements as well as properties for controlling the box model, dimensions, positioning, fonts, text, and other styles. The box model section describes properties for margins, padding, borders, and dimensions. Other sections cover color and background properties, font properties, text properties, and more advanced topics like tables, paging, and interfaces.

Uploaded by

JB
Copyright
© Attribution Non-Commercial ShareAlike (BY-NC-SA)
Available Formats
Download as PDF or read online on Scribd
100% found this document useful (31 votes)
4K views

CSS Cheat Sheet v2

This document provides a summary of CSS selectors and properties related to styling elements. It includes a list of CSS selectors for targeting different types of elements as well as properties for controlling the box model, dimensions, positioning, fonts, text, and other styles. The box model section describes properties for margins, padding, borders, and dimensions. Other sections cover color and background properties, font properties, text properties, and more advanced topics like tables, paging, and interfaces.

Uploaded by

JB
Copyright
© Attribution Non-Commercial ShareAlike (BY-NC-SA)
Available Formats
Download as PDF or read online on Scribd
You are on page 1/ 1

css

Selectors Box Model Boxes

* All elements margin x border-color x


Visible Area Margin
div <div> margin-top border-top-color
div * All elements within <div> margin-right border-right-color
div span <span> within <div> margin-bottom border-bottom-color
div, span <div> and <span> margin-left border-left-color
div > span <span> with parent <div> padding x border-style x
div + span <span> preceded by <div> padding-top border-top-style
.class Elements of class "class" padding-right border-right-style
div.class <div> of class "class" padding-bottom border-bottom-style
#itemid Element with id "itemid" padding-left border-left-style
div#itemid <div> with id "itemid" border x border-width x
a[attr] <a> with attribute "attr" border-top x border-top-width
a[attr='x'] <a> when "attr" is "x" Height Border Width Padding border-bottom x border-right-width
a[class~='x'] <a> when class is a list border-right x border-bottom-width
containing 'x' Positioning border-left x border-left-width
a[lang|='en'] <a> when lang begins "en"
display clear
Tables
position z-index
Pseudo-Selectors and Pseudo-Classes
top direction + caption-side + border-spacing +
:first-child First child element right unicode-bidi table-layout empty-cells +
:first-line First line of element bottom overflow border-collapse + speak-header +
:first-letter First letter of element left clip
:hover Element with mouse over float visibility
Paging
:active Active element
:focus Element with focus size page-break-inside +
Dimensions
:link Unvisited links marks page +
:visited Visited links width min-height page-break-before orphans +
:lang(var) Element with language "var" min-width max-height page-break-after widows +
:before Before element max-width vertical-align
:after After element height
Interface

cursor + outline-style
Sizes and Colours Color / Background
outline x outline-color
0 0 requires no unit color + background-repeat outline-width
Relative Sizes background x background-image
em 1em equal to font size of background-color background-position
Aural
parent (same as 100%) background-attachment
ex Height of lower case "x" volume + elevation
% Percentage speak + speech-rate
Text
Absolute Sizes pause x voice-family
px Pixels text-indent + word-spacing + pause-before pitch
Text
cm Centimeters text-align + text-transform + pause-after pitch-range
mm Millimeters text-decoration white-space + cue x stress
in Inches text-shadow line-height + cue-before richness
pt 1pt = 1/72in letter-spacing + cue-after speak-punctuation
pc 1pc = 12pt play-during speak-numeral
Colours azimuth +
Fonts
#789abc RGB Hex Notation
#acf Equates to "#aaccff" font + x font-weight +
Miscellaneous
rgb(0,25,50) Value of each of red, green, font-family + font-stretch +
and blue. 0 to 255, may be font-style + font-size + content list-style-type +
swapped for percentages. font-variant + font-size-adjust + quotes + list-style-image +
counter-reset list-style-position +
Shorthand properties are marked x Available free from counter-increment marker-offset
Note
Properties that inherit are marked + www.AddedBytes.com list-style + x

You might also like