basic css cheat sheet
TRANSCRIPT
-
7/21/2019 Basic CSS Cheat Sheet
1/1
13December2010
BASICCSSCHEATSHEET(CSS2.1RULESWITHINTERNALSTYLESHEET)
THEINTERNALSTYLESHEET
body {
background-color: black;color: white;
}
h1 {color: green;
font-family: Arial;}
Most i mpor t ant headi ng
CSSSYNTAX
Graphicfromw3schools
CSSSELECTORS
SelectorstellCSSWHATyouwanttostyle. Itcanbe:
AnHTMLelement.Forexample:p {}orbody {}
orh2{}
TheClassselectorwhichstartswitha.(period). For
example to select
the
selector
would
be . s tyl e1
TheIDselectorwhichstartswitha#(numbersign).
For example to select
the
selectorwouldbe #st yl e1
Note: each class can be used many times in a document
whileeachIDshouldonlybeusedonce.
SOMESTYLEDECLARATIONS
DeclarationstellCSSHOWyouwanttostyle.
FOREGROUND/FONT COLOR
{col or : bl ue; }
BACKGROUNDCOLOR
{backgr ound- col or: bl ue; }
FONTS
{f ont - f ami l y: "Ti mes New Roman" ,Ti mes, ser i f ; }{f ont - f ami l y: Ar i al , Hel vet i ca,sans- seri f ; }
{f ont - st yl e: nor mal ; }{f ont - s tyl e: i t al i c; }
{f ont - si ze: 40px; }
{f ont - wei ght : bol d; }
TEXT
{t ext - al i gn: cent er ; }{t ext - al i gn: r i ght ; }{text - al i gn: j us t i f y; }
{t ext- decor at i on: under l i ne; }
{t ext - t r ansf orm: upper case; }
{t ext - t r ansf or m: l ower case; }{t ext - t r ansf or m: capi t al i ze; }
MARGINSAND PADDING
{margi n- t op: 10px; }{mar gi n- r i ght : 10px; }{margi n- bot t om: 10px; }{mar gi n- l ef t : 10px; }
{paddi ng- t op: 10px; }{paddi ng- r i ght : 10px; }{paddi ng - bot t om: 10px; }{paddi ng - l ef t : 10px; }
BORDERS
{bor der : bl ack sol i d 1px; }
FLOATS
{f l oat : r i ght ; wi dt h: aut o; }{f l oat : l ef t ; wi dt h: aut o; }