Lecture 12

H O M E
1	2	3	4	5
6	7	8	9	10
11	12	13	14	15
16	17	18	19	20

	.Announcement
Assignment II	Is now due 1 week later. MW - 11/17 TTH - 11/18
	Dissections
	Raiders.com Thank you Ms Quijano! - 10pts. My version Source
	More to Consider: 2A Arizona State University East Library 2B Free UK Offers 2C Open World Hotels 2D Fort Mason 2E Visual Thesarus And send me your votes!
	CSS continued
	Color & Background Properties
Color	`color: <rgb value>` Colors the foreground, most often it's text
Background	`background-color: <value>` Like bgcolor="#ffffff" `background-image: <value>` Like background="url" `background-repeat: repeat or repeat-x or repeat-y or no-repeat` No HTML equivolent. Really cool property! repeat is like normal tiling repeat-x repeats only on the horizontal axis repeat-y repeats only on the vertical axis no-repeat, well, dosen't repeat! `background-attachment: scroll or fixed` Tells the background to scroll with the content, which is normal html, or stay fixed in the background while the content scrolls. Works only on body backgrounds, not in tables. `background-position:` `<percent> or <length>` or `left or right or center` and or `top or center or bottom` Positions image in block-level element. Can specify both vertical and horizontal position, but give horizontal position first followed by vertical. `background: <background-color> and/or <background-image> and/or background-repeat and/or <background-attachment> and/or <background-position` Shortcut notation for all background properties.
	Box Properties
The Box
Margins	`margin-top: <length> or <percentage>` `margin-right: <length> or <percentage>` `margin-bottom: <length> or <percentage>` `margin-left: <length> or <percentage>` `margin: <length> or <percentage> all margins are the same` Shortcut notation. `margin: 10px` If only one value is specified it effects all sides `margin: 10px 20px` If two values are specified the top and bottom will be the first measurement and the left and right will be the second. `margin: 10px 20px 30px 40px` If four values are specified, it goes in clockwise order from top to right to bottom to left.
Padding	Same as margin, but subsitute "padding" for "margin"
Borders	Same as margin and padding
Width & Height	`width: <length> or <percentage>` Sets the width of any block-level element `height: <length> or <percentage>` Sets the height of any block-level element
Positioning & Alignment	`float: left or right or none` Same as align for images and tables, execept it can be for any block-level element, like and h1 or a p tag. `Clear: none or left or right or both` Used to specify if an element will wrap around a floating element. So, if there's an element with a left float, and you've got a paragraph with a clear rule applied to it with a value of "left" it won't wrap around the floating element but will slip beneath it.
	Classification Properties
Display	`display: block or inline or list-item or none` Redefines an elements classification. For example, you can turn an image element, which is an inline element, into a block element.
White-space	`white-space: normal or pre or nowrap` Determines how white spaces within an element will be treated. Like so: `normal` collapses multiple spaces into one `pre` does not collapse multiple white spaces `nowrap` does not allow line wrapping without a <br /> tag
Lists	`list-style-type: disc or circle or square or decimal or lower-roman or upper-roman or lower-alpha or upper-alpha or none` Changes the style of an ordered list. Not reliable in IE Windows `list-style-image` `: <url>` Lets you put an image for a bullet by specifying the location of the image in the form: url(images/someimage.gif) `list-style-position: inside or outside` Determines the indent style of a list item when it wraps. inside looks like this: This is a very long list item that should wrap to another line to show what the indent looks like. outside looks like this: This is a very long list item that should wrap to another line to show what the indent looks like.