Download presentation
Presentation is loading. Please wait.
Published byLenard Hancock Modified over 9 years ago
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.
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.