CSS PROPERTY REFERENCE
*4 Basic Types of Property Values
1. COLOURS
2. LENGTHS/SIZES
3. KEYWORDS 4. URLS
*Value Type 1 Colours =>
A.
Keywords Aqua, etc.
B.
RGB Values
1. HEX = color: #ff0033;
2. RGB % = rgb(100%, 0%, 33%)
3. DECIMAL = RGB(255, 0, 33)
*Value Type 2 Lengths/Sizes =>
A.
B.
C.
Pixels
Ems
%
- IE6 = users cant resize Text w/ px
- Inherited = so Text can keep getting Smaller
a. Font-size = based on Texts Inherited Value
b. Width = based on Nearest Parent Tags Size
*Value Type 3 Keywords =>
eg.
Left, Bottom, Inherit
- inherit = can be used on ANY Prop
BUT its not very useful
*Value Type 4 URLs => - unlike in HTML-quotemarks = optional
URL TYPES =
1. Absolute =
url(www.rughbnz.com/images/jk.jpg)
2. Root Relative =
url(/images/jk.jpg)
3. Document Relative = url(../../images/jk.jpg)
(../ = UP 1 LEVEL)
-----------------------------------------------------------------------------------------
TEXT PROPERTIES
1.
COLOR
(I)
2.
FONT
(I)
a. Keyword
b. Hex (#fff)
Shorthand = font-style, font-variant, font-weight, font-size, line-height,
font-family;
=> font: italic small-caps bold 1.25em/150% Arial, Helvetica, Serif;
- When incl. a Line Height, add a / after Font-size = 1.25em/150%
- MUST include = at least: 1.font-size 2.font-family (also these 2 must
be listed last)
*Can apply to <body>
-------------------------------------------------------------------------------------------------------
font1.
family:
(I)
- Separate by ,
- If 2 worded = surround in
2.
size:
(I)
a. Keywords = xx-small medium xx-large
b. px
c. em
d. %
3.
style: (I)
= italic, oblique, normal
4.
variant:
(I)
= small-caps, normal
5.
weight:
(I)
= bold, normal
-----------------------------------------------------------------------------------------
letter-spacing:
(I)
= (+/-)
1. em
line-height:
(I) - Default = 120%
2. px
1. em 2. px 3. %
----------------------------------------------------------------------------------------text1.
-align:
(I) = left, center, right, justify
2.
-decoration:
(I) =underline, overline, line-thru, blink, none
3.
-indent:
(I) = (+/-)
4.
-transform:
(I) = uppercase, lowercase, capitalise, none
(1st Line of <p>)
a. em b. px
----------------------------------------------------------------------------------------*
vertical -align:
(+/-)baseline, sub, super, top,
text-top, middle, bottom, text-bottom, %,
em, px.
- % = calculated on Tags Line-height Value
white-space:
= nowrap, pre, normal
word-spacing:
(I) = (+/-) a. em b. px c. normal
----------------------------------------------------------------------------------------LIST PROPERTIES
list-style:
(I)
a. list-style-type:
=>
= Shorthand for
b. list-style-image:
c. list-style-position:
list-style: disc url(images/jk.jpg) inside
1.
-image:
(I)
= a. url( ) b. none
2.
-position:
(I)
a. inside
(b/g-image: = better)
b. outside ( default)
3.
-type:
(I)
= disc, circle, square, decimal,
decimal-leading-zero, upper-alpha,
lower-alpha, upper-roman,
lower-roman, lower-greek, none
---------------------------------------------------------------------------------------PADDING, BORDERS & MARGINS
*
border:
= solid, dotted, dashed, double, groove, ridge, inset,
outset, none, hidden
= size, type, colour
=> border: 2px solid #FFF;
-top / -right/ -bottom / -left:
-color:
= if just 2 values applied 1st = T&B
2nd = L&R
-top-colour / -right-colour / -bottom-colour / left-colour:
-style:
solid, dotted, dashed, double, groove, ridge, inset,
outset, none, hidden
- can use 1, 2 or 4 Keywords
-top-style / -right-style / -bottom-style / -left-style:
-width:
= ems, px
-top-width / -right-width / -bottom-width / -left-width
outline:
= shorthand for
- outline-colour/style/width:
*same as Border but doesnt add any Width/Height to Tag
-color:
-style:
- also: invert (makes Outline Color inverse of B/G)
-width:
----------------------------------------------------------------------------------------padding: -To add space around: text, images, etc (1 or 4 Values)
-top / -right / -bottom / -left:
----------------------------------------------------------------------------------------margin:
(V) Margins can Collapse (B ignores 1 Value)
-top / -right / -bottom /-left:
----------------------------------------------------------------------------------------background:
= s/hand for all 5 Prop (if you dont list 1
B will put the Default for that Prop)
-color:
-image:
= url(images/jk.jpg)
-repeat:
= repeat, no-repeat, repeat-x, repeat-y
-attachment:
= scroll, fixed
-position:
= (H) left, centre, right (V) top, centre, right
----------------------------------------------------------------------------------------PAGE LAYOUT
*
top / right / bottom / left:
clear:
clip:
= px, em, %
= left, right, both, none
= rect
-Creates a Rectangle Wto reveal part of El
=> clip: rect(5px,110px,30px,10px);
display:
= block, inline, none
a. block =forces a line-break- before/after El
b. inline =forces an El to be on same line
c. none =hides El (can us J/S or :hover to reappear
float:
= left, right, none
height:
= px, em, % (if more text added or user
increases text-size = use overflow: )
= px, em, %
width:
----------------------------------------------------------------------------------------HEIGHT/WIDTH
*min/max-height/width:
= IE6=X-usually used w/ Liquid L/outs
max-height:
= max. height for the Tag
min-height:
= min. height for the Tag
max-width:
= max. width for the Tag
min-width:
= min. width for the Tag
overflow:
= visible, hidden, scroll, auto
-IE6 = makes box bigger
- auto= only adds Scoll if needed
----------------------------------------------------------------------------------------POSITION
position:
= static, fixed, relative, absolute
visibility: = visible, hidden, collapse (to hide Table row/col)
- to toggle a Tag between hidden/visible (J/S or :hover)
z-index:
= (+/-)
----------------------------------------------------------------------------------------TABLES
border-collapse:
= collapse, separate
- only works when applied to <table> Tag
border-spacing:
- border-spacing: 0 10px; (= T/B & L/R)
- IE7 = X so use cell-spacing in <table>
caption-side: = top, bottom places caption above/below Table
(HTML Rules = <caption> must be after <table>
- IE7=X => Use <caption-align: top/bottom>
table-layout:
= auto, fixed
----------------------------------------------------------------------------------------MISC.
content:
= specifies text that appears before/after a Tag
cursor:
= change the look of the mouse pointer
*orphans:
= 1, 2, 3 - Only B = Opera
page-break-before/after:
= auto, always, *avoid, *left, *right
*page-break-inside:
= avoid
= Only Opera
*widows
= 1, 2, 3 only Opera
-----------------------------------------------------------------------------------------
