CSS Lesson 3

Cascading Style Sheets

Lesson 3

This lesson covers the following properties:

word-spacing
letter-spacing
line-height
text-align
vertical-align
text-indent
margin-top, margin-left, etc.
padding-top, padding-left, etc.
border-width, border-color, border-style, etc.
float
clear

Word Spacing:
H3 { word-spacing: 1em }
This line adds 1 EM to the current browser spacing value, so it seems bigger. (NOTE only IE4 MAC version like word spacing. Also, you can use any of the length units in the previous lesson.)

Letter Spacing:
Uses the same spacing units, but changes the space between letters.
H3 { letter-spacing: 10px }
(NOTE this only works with IE 4 and 5, NOT with Netscape)

Line Height:
This code lets one control spacing between the baselines ( where the letters without descenders --"x" but not "y"-- sit. ) Your value totally replaces the default browser's code.
B { line-height: 16pt }
You should also note that you can adjust the height by using a number, length unit, or percentage.


Overlapping Lines:
Make line height smaller than normal, and make the lines overlapp.
B { font-size: 28pt; line-height: 2pt }

Text Align:
Horizontally align text and/or pictures. Applies only to tags which start their own paragraphs (i.e. <p> <H*> <blockquote> and <ul> )
H4 { text-align: *** } *=justify, center, left, right.


Vertical-Align:
Make letters/words/pics closer or farther away than the default for that text. *** ALMOST NO SUPPORT FOR vertical-align
H4 { vertical-align: *** }

Possible Values for ***:
top aligns the top of the element with the tallest parent element on the line. 
*	bottom aligns the bottom of the element with the lowest parent element on the line. 
*	text-top aligns the top of the element with the top of the font of the parent element. 
*	text-bottom aligns the bottom of the element with the bottom of the font of the parent element. 
*	baseline aligns the baseline of the element with the baseline of the parent element. 
*	middle aligns the midpoint of the element with the middle of the parent element. 
*	sub puts the element in subscript. 
*	super puts the element in superscript.


Text-Indent:
Used to indent text, but only in block-quote level tags - which are defined as <Blockquote> <p> and < H* > tags. *** IE can be buggy with this tag.
P { text-indent: 2em }
This tag can also have a negative value applied which makes the paragraph start before the default position.

Margins and Padding:
Margin alignment can be:
Margin-left, *-right, *-top, and *-bottom
use any length unit or percentage.
Padding:
Used for padding between element and border.
H4 { padding-***: 10pt }
Values for *** are:
top, bottom, left, and right.

Borders:
Borders are used to make borders (DUH) around elements such as text objects and pictures.
H4 { border-***-width: 4px }
*** can be bottom, top, left, and right. You only have to apply border rules to one side, but in IE 4 & 5 you have to set the opposite size to 0 or IE will adjust the border's size to it's own standards. Can also use relative parameters such as "thin" "thick" or "medium."
Border Color and Type:
Color-- H4 { border-color: green/hex# }
Style-- H4 { border-style: *** }
*** can be solid, double, dashed, groove, dotted, ridged, inset, & outset.

Floating:
Allows floating of text around pictures AND text.
H4 { float: left/right }
Clear:
Allows wrapping of text, but waits until the paragraph is free of obstructions before doing so.
H4 { clear: right/left }

END OF LESSON
Lesson 4

Hosted by www.Geocities.ws

1