1. Cascading Style Sheets
Color and Background Controls Border and Margin Controls (Boxes)

2. Setting a Foreground Color
Keyword is color: (for foreground, primarily for text, borders; there is no font-color: property)
May be specified as a hex value (#123456;) shorthand (#abc;) word (red;) rgb (rgb(51, 102, 51); OR rgb(20%, 40%, 20%);), hsl (180, 50%, 75%), rgba(51,102,51, .7), hsla(180,50%,75%, .3)
Watch border colors for elements. The border-color property will override the color tag on the border color.

3. Color and Background Controls
color: #abc;
defines the color of the background . Should specify when color: is specified. Can be background-color: transparent; Shorthand is background: #abc;
image: url(alice.gif);
defines a url image to be put in the background. Use for all presentational graphics
repeat: no-repeat;
defines where the image should repeat and how. See next slide
attachment: fixed;
defines if the image can be scroll with the text or if is fixed in its position
position: -10px 10px;
defines where the image should be positioned (left, then top)
Can combine any set of these background: white url(fred.gif) no-repeat fixed right top;

4. background-repeat options
background-repeat: repeat
Repeat the graphic throughout the background.
background-repeat: repeat-x
Only repeat the graphic horizontally
background-repeat: repeat-y
Only repeat the graphic vertically
background-repeat: no-repeat
Don’t repeat the graphic

5. attachment options background-attachment: fixed
Instructs the browser not to scroll the background.
background-attachment: scroll
Instructs the browser to scroll the graphic.

6. background-position: options
length value
Can be a single or double set of values
First value is the distance from the left edge of the parent element. Positive means to the right, negative to the left. Units are pixels, or ems.
Second value specifies the position from the top edge of the parent.
percentage
Defines the size proportional to the parent’s element size. First value is the horizontal position, second value is the vertical position.
keywords
Top, bottom, left, right, center background-position: top center;

7. Box Properties The elements in a “box” have very specific roles.
Margin defines the space between the border of the element and other elements in the window.
Border is the rule (line) that surrounds the element.
Padding is the space between the border and the content of the element.
See the graphic on the next slide.

8. Borders/Margins
Border
Content
Child Element
Margin
Padding

9. Box model problems
MOSe, IE6+ if DTD=Strict get it right. If: width:100px; border: 5px solid red; padding: 10px; Then the box you see will be 130px wide (why?)
In other (older) browsers, the box you see will be 100px wide. This was an IE 5 and earlier problem.
So, ignore it, use Strict DTD or (better) <!-- [if lte IE6]> <link href="ie5.css"><![endif]-->
Or in CSS3, use box-sizing: border-box;

10. Display options
display: block; Useful for separating box from other content and for full box model properties. Vertical list of links <a> is inline by default.
display: inline;
display: none; Useful for print style sheets. No space left where element was

11. Margins margins You can set the size for all margins for an element.
margin-top, margin-right, margin-bottom, margin-left.
Each may be set separately.

12. value lists
Two values margin: 10px 20px;
First is top/bottom, second is the left/right
Three values margin: 5px 10px 20px;
First is top, second is left/right, third is bottom.
Four margin: 5px 10px 15px 20px;
First is top, second is right, third is bottom, fourth is left.
Use a clockwise rotation—starting from top (or TRBL).
You may also specify each individually. margin-top: -10px;
Also centering trick for container <div> is margin: 0px auto;

13. Border options border-width: Specifies the width of the line display
Options—a length (px) or keyword thin, medium, thick
border-style:
Specifies the type of line
Options—none, dotted, dashed, solid, double, groove, ridge, inset, outset
border-color:
Specifies the color to display
Each border may be specified uniquely with separate specs for each line (border-left, right, top, bottom)
Shorthand is at least width, style color border: 5px solid red;
Rounded corners, outline: new since MOSe and IE9.

14. Padding Used to set the padding between element’s content and border
Set of four values—set clockwise
Top, right-side, bottom, left-side
To see the results of padding, you need to turn on the borders.
Setting padding and margins appears to be the same—remember margins are relative to the parent element and the current element, padding is relative to the current element and its border.

15. Width, height Can be powerful Use px, em or %
combine with overflow: auto; (or scroll;)
Consider max-width: or max-height: min-width: or min-height: for elastic liquid/layouts