Scribd
Upload
36 views

Appendix A Css Property Reference

This document provides a summary of CSS property references organized into the following categories: value types, text properties, font properties, list properties, padding/borders/margins, background, page layout, height/width, position, tables, and miscellaneous properties. It describes the different property values like colors, lengths/sizes, keywords and URLs. It also explains properties for styling text, fonts, lists, boxes, backgrounds, page elements, and tables.

Uploaded by

Anonymous XSNBQQ4y
Copyright
© © All Rights Reserved
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
36 views

Appendix A Css Property Reference

This document provides a summary of CSS property references organized into the following categories: value types, text properties, font properties, list properties, padding/borders/margins, background, page layout, height/width, position, tables, and miscellaneous properties. It describes the different property values like colors, lengths/sizes, keywords and URLs. It also explains properties for styling text, fonts, lists, boxes, backgrounds, page elements, and tables.

Uploaded by

Anonymous XSNBQQ4y
Copyright
© © All Rights Reserved
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 7

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

-----------------------------------------------------------------------------------------

You might also like