1. CSS Positioning Creating Special Effects with CSS CS202 Working with Cascading Style Sheets (Chapter 4) CS202 1

2. Objectives First, the labs… Work with CSS selectors Create styles for lists Create and apply class styles Create a rollover effect Create a drop cap using a pseudo-element Manage page layout with CSS Work with overflow and clipping styles Apply styles to various media Hide elements from printing Apply printer styles and page breaks for printing CS202 2

3. Review of CSS (Chapter 4) Background ◦ background-attachment: fixed; background-attachment: fixed; ◦ background-attachment: scrolled; background-attachment: scrolled; Text Decoration: ◦ links links ◦ fonts fonts Boxes: ◦ General info General info ◦ Mix and match classes Mix and match classes ◦ Border Style Border Style Visibility: ◦ Changing from: visibility: hidden Changing from: visibility: hidden All of that leading to DHTMLDHTML CS202 3

4. Working with Selector Patterns On a Web page, elements are nested within other elements, forming a hierarchical tree structure CS202 4

5. Working with Selector Patterns The tree structure allows CSS to create contextual selectors ◦ Express location of an element within the hierarchy of elements parent descendant {styles} li b {color: blue} li b, h2 {color: blue} #notes b {color: blue} * {color: blue} p > b {color: blue} CS202 5

6. Using Selector Patterns To apply a style to  a single element  use the e selector /* e is the name of the element */  all elements  use the * selector  a descendant element (f)  use the e f selector /* e is the parent and f is an element nested within the parent */  a child element (f)  use the e > f selector /* (e) is the name of a parent and (f) is a direct child  a sibling element  use the e + f selector /* (e) and (f) are siblings and (f) immediately follows (e) in the document tree */ CS202 6

7. Working with Selector Patterns Can also select elements based on their attribute element[att] {styles} a[href] {color: blue} See ◦ http://faculty.wwu.edu/~granier/info/css/advanced/css_attributes_1.htm http://faculty.wwu.edu/~granier/info/css/advanced/css_attributes_1.htm  title is one of “core attributes” (class, id,style and title)core attributes And ◦ http://webdesign.about.com/od/cssselectors/qt/cssselattribute.htm http://webdesign.about.com/od/cssselectors/qt/cssselattribute.htm ◦ http://www.blooberry.com/indexdot/css/index.html http://www.blooberry.com/indexdot/css/index.html CS202 7

8. Working with Selector Patterns Conditional comments allow you to apply different HTML code for different versions of Internet Explorer HTML code And browsers extensions (page 237) extensions CS202 8

9. Using Pseudo-Classes and Pseudo-Elements Pseudo-elements are abstracted from what we know of an element’s content, use, or position in the document Pseudo-elements selector:pseudo-element {styles} CS202 9

10. Using Pseudo-Classes and Pseudo- Elements A pseudo-class is a classification of an element based on its status, position, or current use in the documentpseudo-class Rollover effects can be created using pseudo-classes ◦ http://www.tutorio.com/tutorial/pure-css-image-rollovers http://www.tutorio.com/tutorial/pure-css-image-rollovers About CSS 10

11. Positioning Objects with CSS CS202 11

12. Positioning Objects with CSS Create div containers for each note Add a class attribute to apply a common set of styles Each note should have a unique id or class (example)example CS202 12

13. Positioning Objects with CSS CSS-P (CSS-Positioning) ◦ part of the specification for CSS2 ◦ positioning styles adopted by browsers type; top: value; right: value; bottom: value; left: value; Absolute positioning ◦ enables you to place an element at specific coordinates either on a page or within a containing element position: absolute; left: 100px; top: 50px Relative positioning ◦ used to move an element relative to its default position on the page position: relative; left: 100px; top: 50px  You can fix an element at a specific spot in the document window while the rest of the page scrolls by setting the value of the position style to fixedfix an element  You can assign the inherit position style to an element so that it inherits the position value of its parent element CS202 13

14. Positioning Objects with CSS About CSS 14 The different positioning styles aka (CSS1 specs) CSS-Positioning or CSS-P To place an element at a specific position on a page use: position: type; top: value; right: value; bottom: value; left: value;

15. Positioning Objects with CSS CS202 15

16. Stacking Elements About CSS 16 Specify stacking order with: z-index: value z-index: 3 z-index: 1 z-index: 2

17. Stacking Elements Elements placed using CSS positioning are stacked on top of elements that are not To specify a different stacking order, use the style: z-index: value CS202 17

18. Working with Overflow and Clipping The overflow property syntax: ◦ overflow: type overflow: type If you want to force an element into a specified height and width, you have to define how the browser should handle a situation where content overflows the space allotted to the object overflow: type CS202 18

19. Working with Overflow and Clipping and Clippingand Clipping The clip style allows you to define a rectangular region through which the element’s content can be viewed clip: rect(top, right, bottom, left) CS202 19

20. Hiding Elements CSS has two styles that you can use to keep an element from being displayed in the output: ◦ the display style ◦ the visibility style visibility: type The type attribute can be set to visible, hidden, collapse, or inherit CS202 20

21. Comparing the visibility and display styles About CSS 21 Visibility hidden Object is hidden but still is part of the page flow Display: none Object is hidden and is removed from the page flow

22. Working with Different Media About CSS 22 By default, a style sheet is applied to all devices each device must determine how best to match the styles to its own requirements You can specify output styles for particular devices in the media attribute of the link and style elements... or

23. The @media Rule About CSS 23 You can also specify the output media within a style sheet using: @media type {style declarations} Where media is one of the supported media types and style declarations are the styles associated with that media type

24. Media Groups About CSS 24 CSS2 uses media groups to describe basic facets of different media and to differentiate between different types of media based on the ways they render content –Continuous or paged –Visual, aural, or tactile –Grid or bitmap –Interactive or static –Various media typesVarious media types

25. Working with Different Media You can use a single style sheet broken down into different sections for each media type @media screen { body {font-size: 1em} h1 {font-size: 2em} } @media print { body {font-size: 12pt} h1 {font-size: 16pt} } @media handheld { body {font-size: 8pt} h1 {font-size: 12pt} } @media tv { body {font-size: 16pt} h1 {font-size: 24pt} } CS202 25

26. Working with Different Media CSS uses media groups to describe how different media devices render content ◦ Continuous or paged ◦ Visual, aural, or tactile ◦ Grid (for character grid devices) or bitmap ◦ Interactive (for devices that allow user interaction) or static (for devices that allow no interaction) CS202 26

27. Using Print Styles CSS defines printed pages by extending the box model You can specify the size of a page, margins, internal padding, etc. of the page box (Check page HTML 248 for working with print styles) CS202 27

28. Using Print Styles The general rule to create and define a page box is: @page {styles} Printed media can vary in size and orientation The size style allows the Web author to define the default dimensions and orientation of the printed page size: width height orientation CS202 28

29. Working with Page Breaks Page BreaksPage Breaks The printer will decide the location of the page breaks page-break-before: type page-break-after: type hr {page-break-after: always} CS202 29

30. Working with Page Breaks Working with Page Breaks The type style attribute has the following values: ◦ Always, Avoid, Left, Right, Auto and Inherit Widow: ◦ only a few lines of an element at the top of a page Orphan: ◦ only a few beginning lines of an element appear at the bottom of a page The styles to control the appearance of widows and orphans in the printout are: widow: value orphan: value CS202 30