.....Also as a note: When I say 'x px, or x pt, or x %' Replace 'x' witha number: example 10px, 15pt, or 100%
I hope I made this as easy to understand as possible.
-Font Controls
-Define Fonts-
font-family:
values:
serif
sans-serif
cursive
fantasy
monospace
To specify a specific font use ' ' quotes, example 'Times New Roman'
-Define Font Sizes-
font-size:
values:
x px
x pt
x%
smaller
larger
xx-small
x-small
small
medium
large
x-large
xx-large
-Define Font Styles-
font-style:
values:
normal
italic
oblique
-Define Bold Text-
font-weight:
values:
normal
bold
lighter
bolder
100-900 (ex. font-weight: 500;)
-Small Caps-
font-variant:
values:
normal
small-caps
-Text Controls-
-Letter Spacing-
letter-spacing:
values:
*length* (xem, xpx, xpt)
normal
-Word Spacing-
word-spacing:
values:
*length* (xem or xpx or xpt etc.)
normal
-Line Spacing (Line Height)-
line-height:
values:
normal
x%
*length*
*number* (1, 2, 3 etc.)
-Text Case-
text-transform:
values:
capitalize
uppercase
lowercase
none
-Aligning Text-
text-align:
values:
left
right
center
justify
-Aligning Text Vertically-
vertical-align:
values:
super
baseline
sub
x%
*relative* (top, middle, bottom, etc.)
-Text Indentation-
text-indent:
values:
*length* (xpx, xpt, or xem)
x%
-Text Foreground Color-
color:
values:
hex (#ff00ff)
color (red, blue etc.)
example: color: blue; (or) color: #0000ff;
-Decorating Text-
text-decoration:
values:
none
underline
overline
line-through
blink (blink doesnt work on all browsers)
-Text Direction-
direction:
values:
rtl
ltr
unicode-bidi:
values:
bidi-override
embed
normal
-Page Breaks (for printing)-
page-break-before:
page-break-after:
values:
always
auto
-Element Controls-
-Element Display-
display:
values:
inline (supresses line breaks)
block (break above and below)
none (invisible)
list-item (treats item as a list item)
inherit (uses display element from parent)
table (acts like a table element)
inline-table (acts like a inline table element)
table-caption (acts like a table caption)
table-cell (acts like a table cell)
-Define Element Width-
width:
values:
*length*
x%
auto
-Define Element Height-
height:
values:
*length*
x%
auto
-Define the Margins of an Element-
margin:
values:
*length*
x%
auto
(How to Set the Margins Independantly)
margin-top: value;
margin-bottom: value;
margin-left: value;
margin-right: value;
-Setting An Elements Border-
border-width:
values:
thin
medium
thick
*length*
inherit
border-style:
values:
dotted
dashed
solid
double
groove
ridge
inset
outset
none
inherit
border-color:
values:
*color*
transparent
inherit
Setting The Border Short-Hand
border: size style color;
example: border: 2px solid #00ff00;
Setting No Borders
border: 0px;
-Defining The Borders Seperately-
border-top: value;
border-right: value;
border-bottom: value;
border-left: value;
-Defining The Padding-
padding:
values:
*length*
x%
-Defining The Padding Seperately-
padding-top: value;
padding-right: value;
padding-bottom: value;
padding-left: value;
-Background Controls-
-Background Color-
background-color:
values:
*color*
transparent
-Background Images-
background-image:
values:
url(src/to/your/image.jpg);
none
-Repeating Background-
background-repeat:
values:
repeat
repeat-x
repeat-y
no-repeat
-Background Attachment (Scolling or No)-
background-attachment:
values:
scroll
fixed
-Positioning The Background-
background-position:
values:
x%
*length*
top
center
bottom
left
right
(or a combination like right top, left bottom, etc.)
-Element Position Controls-
-Set An Elements Position Type-
position:
values:
static (flows content inline but position is static)
relative (flows content inline and allows position to be set relative to its normal position)
absolute (places the element according to the top, left, right and bottom attributes)
fixed (" just like absolute basically but it doesnt scroll)
-Setting An Elements Position-
left:
values:
*length*
x%
auto
top:
values:
*length*
x%
auto
-Setting the Position From Bottom and Right-
right:
values:
*length*
x%
auto
bottom:
values:
*length*
x%
auto
-3D Positioning With Z-Index-
z-index:
values:
*number* (...-2, -1, 1, 2, 3... etc.)
auto
-Define Floating Position Of A Selector/Element-
float:
values:
left
right
none
-Clearing Floating (stop floating)-
clear:
values:
left
right
both
none
-Define White Space Of A Selector/Element-
white-space:
values:
normal
pre (preserves multiple spaces)
nowrap (prevents line wrapping without a break tag)
-Element Visibility Controls-
-Set an Elements Visibility-
position: relative|absolute; (first position your element)
visibility:
values:
hidden
visible
inherit
-Setting The Visible Area of an Element (clipping)-
position: relative|absolute; (first position your element)
clip:
values:
rect(toplength, rightlength, bottomlength, leftlength);
auto
example: clip: rect(50px, 10px, 50px, 10px);
-Handling Overflowing Content-
width: 100px;
height: 100px; (first define the height y width of your element)
overflow:
values:
scroll
hidden
visible
auto
-Handling Seperate Scollbars-
overflow-x: (horizontal scrollbar)
overflow-y: (vertical scrollbar)
values:
scroll
hidden
visible
auto
-List, Table, and Interface Controls-
-List Styles-
list-style-type:
values:
none
disc
circle
square
decimal
decimal-leading-zero
upper-roman
lower-roman
upper-alpha
lower-alpha
lower-greek
list-style-position:
values:
inside
outside
list-style-image:
values:
url(src/to/your/img.jpg);
none
-List Styling Shorthand Example-
list-style: url(img.jpg) circle inside;
-Collapsing Borders Between Table Cells-
border-collapse:
values:
collapse
seperate
-Set Position Of A Table Caption (If ya use one)-
caption-side:
values:
top
left
right
bottom
-Changing The Cursor-
cursor:
values:
crosshair
e-resize
hand
help
move
ne-resize
n-resize
nw-resize
pointer
se-resize
s-resize
sw-resize
text
wait
w-resize
I think that about covers it, I know I missed a couple things, if you know what they are point em out k?
I hope this helps out in some way
Edited: Added a few entries I missed from before, I've left out broswer specific styles due to validity, and some I've just never seen anywhere before/dont see a use for.
If you'd like to see even more (what I've left out); visit the site listed below in the sources. Thank you.
Sources: My Notebook and http://www.blooberry...opindex/all.htm
Edited by raenef, 09 July 2005 - 09:59 PM.
