Cascading Style Sheets

1. Cascading Style Sheets Color and Background ControlsBorder 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 • background- • 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 thesebackground: 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, centerbackground-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]-->

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 colorborder: 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 withoverflow: auto; (or scroll;) • Consider max-width: or max-height:min-width: or min-height:for elastic liquid/layouts (MOSe or IE7+)