Scribd
Upload
67 views7 pages

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
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
67 views7 pages

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
We take content rights seriously. If you suspect this is your content, claim it here.
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