Cascading Style Sheets

1. Cascading Style Sheets List and Mouse ControlsColor and Background ControlsBorder and Margin Controls

2. Setting up the List • list-style-type • disc, circle, square, decimal, upper-roman, lower roman, upper-alpha, lower-alpha • list-style-position • inside, outside • list-style-image • <url>, none • li {list-style-image: url(check.gif); margin-left: 20px;} • It is suggested that you always use a list-style-type for a backup if the url can’t be found.

3. Mouse Pointer Appearance • cursor • crosshair, hand, pointer, move • xx-resize where xx is n (north), s (south) ne (northeast), nw (northwest) se (southeast), sw (southwest) e (east), w (west) • text • wait • help

4. Also allowed to create your own mouse by using a graphic • cursor: url(filename.gif)

5. Color and Background Controls • background- • color • defines the color of the background image • image • defines a url image to be put in the background • repeat • defines where the image should repeat and how • attachment • defines if the image can be scroll with the text or if is fixed in its position • position • defines where the image should be positioned

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

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

8. 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. Presented as 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.

9. Other options – • Combinations of • Left or right • Top or bottom or center • Example left-top

10. Setting a Foreground Color • Keyword is color • May be specified as a hex value or an adjective. • 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.

11. Options for setting colors • May be set by specifying the hex value. • May be specified as a noun. • Be careful with an element’s color—the parent’s color may show through or influence the color selection.

12. Border and Margin Controls • The elements in a “box” have very specific pieces. Consider an element inside an element. • 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.

13. Borders/Margins Border Content Nested Element Margin Padding

14. Options • width values • height values • Both may be set as length, percentages or auto. • margins • You can set the size for all margins for an element. • margin-bottom, margin-top, margin-left, margin-right. • Each may be set separately. • A list of values

15. value lists • Two values • First is top/bottom, second is the left/right • Three values • First is top, second is left/right, third is bottom. • Fourth • First is top, second is right, third is bottom, fourth is left. • Use a clockwise rotation—starting from top. • You may also specify each individually.

16. border options • border-width • Specifies the width of the line display • Options—a length 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)

17. element’s padding • Used to set the padding between element’s • 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 the its border.

18. Tables and CSS • You can use CSS to define background and content attributes to a whole table or cells in the table. • You define a set of specs for the tag and then apply the class to the tag when it is defined. • Some browsers do not allow borders and height/width attributes to be set for a table using CSS (specifically N4.0)

19. Text Wrapping • clear attribute- • Defines how you float text around an element • Use in combination with e.g. float:right. • Options • left, right, both or none. • Specifies text will NOT wrap around the specified margin of the element. • Example style clear : right. • Text will wrap around the left side of the element—not on the right side.

20. Defining Display Options • Display options tell how an object should be shown in specific browsers • Style option display • list-item • Displays as a list item with space above and below • block • A block alone with space above and below. • inline • Suppresses line breaks in the tag • none • Element will not display