Background

HTMLPrimer.com CSS Cheat Sheet

backgound-color Color of background
background-image background image
Syntax url(image.gif);
Syntax background-repeat repeat; no-repeat; repeat-x; repeat-y;
selector {property: value;} background-attachment Background image scrolls with element
External CSS scroll; fixed;
<link rel=”stylesheet” type=”text/css” background-position (x y); top; center; bottom; left; right;
href=”style.css” />

Internal CSS
<style type=”text/css”>
List
selector {property: value}
</style> list-style-type Type of bullet or numbering in the list
disc; circle; square; decimal; lower-roman; upper-roman;
Inline CSS
<tag style=”property: value”> lower-alpha; upper-alpha; none
General
list-style-position Position of bullet or number in the list
class String preceded by a full stop [.] inside; outside
ID String preceded by a hash [#] list-style-image Image to be used as bullet
div Formats structure or block of text.
span Inline formatting Pseudo Selectors
color Foreground color :hover
cursor Appearance of the cursor :active
display block; inline; list-item; none; :focus
overflow How to handle content that overflows its box. :link
visible; hidden; scroll; auto;
:visited
visibility visible; hidden;
:first-line
:first-letter
Font
Media Types
font-style italic; normal;
all
font-variant normal; small-caps;
braille
font-weight normal; bold; lighter; bolder; integer [100-900]
embossed
font-size Size of the font
handheld
font-family Font to be used
print
projection
Text
screen
letter-spacing Space between letters
speech
line-height Vertical distance between lines
tty
text-align Horizontal alignment tv
text-decoration blink; line-through; overline; underline; none; Units
text-indent First line indentation
%
text-transform capitalize; lowercase; uppercase; pt
vertical-align Vertical alignment px
word-spacing spacing between words em

The CSS Box Model

Content properties height, width

Margin properties margin-top, margin-right, margin-bottom, margin-left
Padding properties padding-top, padding-right, padding-bottom, padding-left
Border properties border-width, border-style [dashed; dotted; double;
groove; inset;outset; ridge; solid; none;], border-color
Positioning
position static; relative; absolute;
clear If any floating elements around the element
both, left, right, none;
float Floats elements to a specified side
left; right; none;
left Distance to the left from containing element
auto, length values [pt, in, cm, px]
top Distance up to containing element
auto, length values [pt, in, cm, px]
z-index In front of or behind overlapping elements
auto; integer [higher values show on top];
 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
 CSS Shorthand Cheat Sheet
margin, padding, border-width, outline-width: specifying 4 parameters:
1un 2un 3un 4un
1un
border-color, outline-color: #xxx #xxx #xxx #xxx
or
border-style, outline-style: solid dotted dashed double

4un 2un specifying less than 4 parameters:

(one:)
1un (two:)
1un (three:)
1un

1un 1un 2un 2un 2un 2un

3un 1un 1un 3un

border, border-left, border-right, border-top, border-bottom:

default: medium none #xxx; (leave style out & it defaults to none,
(width) (style) (color) making the width zero!!!)

example: 3px solid #888;

default: disc outside none; (type becomes default when image not found!!!)
list-style: (type) (position) (image)

example: square outside url(‘star.png’);

default: white url(‘back.png’) repeat top left scroll;

background: (color) (image) (repeat) (position) (scroll)

example: black url(‘starrynight.png’) repeat bottom right fixed;

default: normal normal normal inherited-value/normal inherited-value;

font: (style) (variant) (weight) (size) (line-height) (family)

example: italic small-caps bold 1em/1.2em helvetica neue, helvetica, sans-serif;

(do not try this [ugly] example at home!)

pause: cue: colors:

example: pause: 1s; example: cue: url(‘sound.au’);
(one attribute sets both (one attribute sets both
#xxyyzz == #xyz
pause-before && pause-after!!!) cue-before && cue-after!!!)
copyright 2007 - edwardwelker.com