Cascading Style Sheets Chapters 5-6 Color and Background Controls Border and Margin Controls

Setting a Foreground Color Keyword is color: (for foreground, primarily for text, borders; NOT font-color:) May be specified as a hex value (#123456;) shorthand (#abc;) word (red;) or rgb (rgb(51, 102, 51); OR rgb(20%, 40%, 20%);) Watch for color changes when assigning color to several tags in a window. Watch border colors for elements. The border-color property will override the color tag on the border color.

Color and Background Controls background- – color: #abc; defines the color of the background. Should specify when color: is specified. Can be background-color: transparent; – image: url(alice.gif); defines a url image to be put in the background – 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(alice.gif) no-repeat fixed right top; Note examples that style form buttons (p. 155)

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

attachment options fixed – Instructs the browser not to scroll the background. scroll –Instructs the browser to scroll the graphic.

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;

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.

Borders/Margins Child Element Content Padding Border Margin

Box model problems MOSE, IE7/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. So, ignore it, use Strict DTD or (better)

Display options display:block; Useful for separating box from other content and for full box model properties display:inline; display:none; Useful for print style sheets. No space left where element was

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.

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 consider margin: 0px auto;

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 for Mozilla only.

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 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.

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 (MOSE or IE7+)