1. 3.2 Cascading Style Sheets

2. 2 Positioning Elements Normally, elements are laid out on the page in the order that they are defined in the XHTML document position property –better control over page layout – position=absolute removes element from the normal flow positions it based on specified distance from the top, left, right or bottom margin of its parent element – position=relative keeps element in the normal flow offsets them by the specified top, left, right or bottom value

3. 3 Overlapp Depth z-index property –layers overlapping elements –an element with higher z-index value is displayed in front of elements with lower z- index values

4. 4 Element Types Block-level elements –displayed on their own line –have virtual boxes around them, through, Inline-level elements –do not change the flow of the document,,,,

5. 5 Grouping Elements Create a section element that –can be marked with id attribute this mark can be referenced later on –can have CSS rules applied to –inline-level grouping element –block-level grouping element

6. 6 Background Block-level elements can have color or an image as background –property background-color : see last lecture –property background-image : URL of the image –property background-position position on the page: e.g., values top, bottom, center, right individually or in combination vertical and horizontal –property background-repeat : tiling values repeat, repeat-x, repeat-y, no-repeat –property background-attachment : whether image moves when page is scrolled values fixed or scroll,

7. 7 Element Dimensions properties height and width –set element's size –values can be relative or absolute Attention –content may exceed the given size make it large enough to fit –property overflow=scroll adds scrollbars if the text overflows

8. 8 Text Alignment property text-align –values center, left, right

9. 9 Box Model and Text Flow The box model defines the virtual box of block-level elements –box model defines space surrounding each element –padding the distance between the element’s edge and the content inside properties padding-top, padding-right, padding-left, padding-bottom –margin the distance between the element’s edge and any outside text properties margin-top, margin-right, margin-left, margin-bottom – border property When an element is moved out of the normal flow, other content in the document will flow around it

10. 10 Box Model

11. 11 CSS Drop-Down Menu :hover pseudoclass –styles applied to an element when the mouse cursor is over it display property –decides if an element is displayed as a block element, inline element, or not rendered at all ( none )

12. 12 Menu Rendered

13. 13 Menu: Body Menu Home News Articles Blog Contact

14. 14 Menu: CSS body { font-family: arial, sans-serif } div.menu { font-weight: bold; color: white; border: 2px solid #225599; text-align: center; width: 10em; background-color: #225599 } div.menu:hover a { display: block } div.menu a { display: none; border-top: 2px solid #225599; background-color: white; width: 10em; text-decoration: none; color: black } div.menu a:hover { background-color: #dfeeff }

15. 15 Media Types CSS media types –allow to define different layouts for different kinds of displays – screen : computer screen – print : when for printed – handheld : mobile Internet devices – aural : for text-to-speech – braille : for printing in braille

16. 16 Media Types: Form @media all –block of style rules for all media types –enclosed in {} @media print –block of style rules for print –enclosed in {} etc.

17. 17 Guidelines Pages with light text on dark background colors use a lot of ink when printed (and are hard to read), especially on a black-and-white printer. Use the print media type with black text on white background While sans-serif fonts look better on a screen, serif fonts look better on paper. Use the print media type to display sans-serif font on screen and serif font when it is printed.