Upload
mantosz
View
229
Download
0
Embed Size (px)
Citation preview
8/8/2019 CSS Cheat Sheet Compilations
http://slidepdf.com/reader/full/css-cheat-sheet-compilations 1/4
8/8/2019 CSS Cheat Sheet Compilations
http://slidepdf.com/reader/full/css-cheat-sheet-compilations 2/4
TMLPrimer.com CSS Cheat Sheet
yntax
yntaxelector {property: value;}
xternal CSSlink rel=”stylesheet” type=”text/css” ref=”style.css” />
nternal CSSstyle type=”text/css”>
elector {property: value}/style>
nline CSStag style=”property: value”>
eneral
ass String preceded by a full stop [.]
D String preceded by a hash [#]
v Formats structure or block of text.
pan Inline formatting
olor Foreground color
ursor Appearance of the cursor
splay block; inline; list-item; none;
verflow How to handle content that overflows its box.visible; hidden; scroll; auto;
sibility visible; hidden;
ont
ont-style italic; normal;
ont-variant normal; small-caps;
ont-weight normal; bold; lighter; bolder; integer [100-900]
ont-size Size of the font
ont-family Font to be used
ext
tter-spacing Space between letters
ne-height Vertical distance between lines
ext-align Horizontal alignment
ext-decoration blink; line-through; overline; underline; none;
ext-indent First line indentation
ext-transform capitalize; lowercase; uppercase;
ertical-align Vertical alignmentord-spacing spacing between words
he CSS Box Model
ontent properties height, width
argin properties margin-top, margin-right, margin-bottom, margin-left
adding properties padding-top, padding-right, padding-bottom, padding-left
order properties border-width, border-style [dashed; dotted; double;
roove; inset;outset; ridge; solid; none;], border-color
ositioning
osition static; relative; absolute;
ear If any floating elements around the elementboth, left, right, none;
oat Floats elements to a specified sideleft; right; none;
ft Distance to the left from containing elementauto, length values [pt, in, cm, px]
op Distance up to containing element
auto, length values [pt, in, cm, px]-index In front of or behind overlapping elements
auto; integer [higher values show on top];
Background
backgound-color Color of background
background-image background image url(image.gif);
background-repeat repeat; no-repeat; repeat-x; repeat-y;
background-attachment Background image scrolls with element scroll; fixed;
background-position (x y); top; center; bottom; left; right;
List
list-style-type Type of bullet or numbering in the list disc; circle; square; decimal; lower-roman; upper-ro
lower-alpha; upper-alpha; none
list-style-position Position of bullet or number in the list inside; outside
list-style-image Image to be used as bullet
Pseudo Selectors
:hover
:active
:focus
:link
:visited
:first-line
:first-letter
Media Types
all
braille
embossed
handheld
projection
screen
speech
tty
tv
Units
%
pt
px
em
8/8/2019 CSS Cheat Sheet Compilations
http://slidepdf.com/reader/full/css-cheat-sheet-compilations 3/4
8/8/2019 CSS Cheat Sheet Compilations
http://slidepdf.com/reader/full/css-cheat-sheet-compilations 4/4
margin, padding, border-width, outline-width:
1un 2un 3un 4un
specifying 4 parameters:
border, border-left, border-right, border-top, border-bottom:
example: 3px solid #888;
default: medium none #xxx; (leave style out & it defaults to none,making the width zero!!!)(width) (style) (color)
list-style: default: disc outside none;(type) (position) (image)
example: square outside url(‘star.png’);
(type becomes default when image not found!!!)
background:example: black url(‘starrynight.png’) repeat bottom right fixed;
default: white url(‘back.png’) repeat top left scroll;(color) (image) (repeat) (position) (scroll)
font: default: normal normal normal inherited-value/normal inherited-value;(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:pause: 1s;example:
(one attribute sets bothpause-before && pause-after!!!)
cue:cue: url(‘sound.au’);example:(one attribute sets both
cue-before && cue-after!!!)
colors:#xxyyzz == #xyz
specifying less than 4 parameters:
1un 1un
1un
1un
2un 2un
1un
1un
2un 2un
3un
1un
1un
2un4un
3un
CSS Shorthand Cheat Sheet
border-color, outline-color: border-style, outline-style:
#xxx #xxx #xxx #xxxsolid dotted dashed double
or
(one:) (two:) (three:)
copyright 2007 - edwardwelker.com