css cheat sheet compilations

5

Upload: mantosz

Post on 10-Apr-2018

229 views

Category:

Documents


0 download

TRANSCRIPT

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

print

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