1. Maureen Smith Professor Tutorial 4

2.  Review  Session 4.1  Session 4.2  Session 4.3  Review

3.  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  Create stacked objects

4.  Apply styles to various media  Hide elements from printing  Create and apply printer styles  Create and prohibit page breaks for printing

5.  Kathy has created a basic page about scrapbooking  Open start.htm  Examine design  She wants a different format for the Basic Materials h2 heading  Would like to create styles for elements based on location or use in the document

6.  So far you know about styles in which the style selector applies to an element or group of elements, like b {color: blue}  Which would display all bold text in blue  What if we wanted just bold text in lists to be blue?  Can create contextual selectors

7.  They express the location of an element within the hierarchy of elements (body, then other elements) li b {color: blue}  Is the style used to apply blue to bold text found in lists  Contextual selectors can be grouped with other selectors li b, h2 {color: blue}

8.  Contextual selectors can be applied with elements marked with a specific id #notes b {color: blue}  Displays bold text in blue if nested within an element with an id of notes  See Figure 4-3 and examples below

9.  Might need to select elements based on their attribute values a {color: blue}  Would display link text in blue, but would make no distinction between tags used to mark links and tags used to mark document anchors  HTML makes distinction based on href attribute being present or absent

10. a[href] {color: blue}  Applies blue only to link elements that contain an href attribute  See Figure 4-5 for other attribute selectors  Use with caution—browser support is mixed

11.  Will now apply selector patterns to Getting Started document  Will create a style for H2 headings in Basic Materials box so style can be used for other similar boxes on other pages #pullout h2 {text-align: center; background-color: white; margin-top: 0px; border-bottom: 2px solid orange}  Put this in scraps1.css

12.  H2 element nested within Basic Materials box has been modified under the new style, but h2 elements located elsewhere retain original appearance

13.  Web page links are in an unordered list with bullets  Will remove bullet markers  Can apply one of the many CSS list styles

14.  To specify a list marker list-style-type: type  See Figure 4-8 for list style types  See Figure 4-9 in which several levels of list style markers are used  Note that each marker style is determined by location of each ordered list within the levels of the outline

15.  Can supply your own marker with a graphic image file ul {list-style-image: url(redball.gif) }  Would give an unordered list marked with graphic image in redball.gif file  See description of how Kathy wants her list of links to appear  See scraps2css

16.  Too much empty space to left of the lists??? Let’s remove it!  Each list is treated as a block-level element and list markers automatically appear to the left of the block list-style-position: outside or inside  See Figure 4-12 for appearance and description of how browser renders a list

17.  By specifying “inside”, force both text and markers inside block—will have less space available for text  Indent Kathy’s list by 15 pixels and Basic Materials list by 25  Can combine all the CSS styles for lists into a single style attribute list-style: type url (url) position

18.  List of links covers three main areas: pages that teach scrapbooking, pages that sell products, and pages that provide information  Although Kathy has ordered the links by area, sections are not separated visually on rendered page  Let’s increase space between the 3 groups to it’s clear where one ends and another begins

19.  One way is to mark first link in each group and increase margin above those links  Can use the class attribute when you want to identify elements that share a common characteristic  Now create a style for the list of links

20.  Most browsers underline linked text by default  Might be difficult to read  Links can be underlined only when mouse hovers  Called a rollover effect  Kathy would like that done

21.  Created using pseudo-classes  Classification of an element based on its current status or use in document  One indicates whether a link has been visited or is being currently clicked  To create a style for a pseudo-class, use  selector:pseudo-class (styles)  See Figure 4-17  Two or more pseudo-classes can apply to same element

22.  Let’s remove underlining and if mouse is hovering, change link text to appear in black and underlined

23.  First line should be small caps and first letter should be increased in size and displayed as a drop cap  See Figure 4-20  A paragraph element is part of document tree and is marked with the tag; first line of that paragraph is not—there is no first line element  CSS allows you to create style for objects such as a paragraph’s first line

24.  Advantage is that you don’t have to mark first letter in HTML doc; its position is inferred by browser when it applies the style  Pseudo-element also useful for design elements such as drop caps  Increase font size of first letter and float it on left margin  Look better if you decrease line height of first letter, enabling surrounding content to better wrap around

25.  Trial and error! And will vary from browser to browser p:first-letter {float: left; font-size: 400%; line-height: 0.8}  Apply this style to first paragraph on each page

26.  You can use CSS to insert text using the before and after pseudo-elements  The before places text directly before the element\  The after places text directly after

27.  Every month Kathy wants to highlight a scrapbook page that displays some noteworthy features  See Figure 4-23  Add callouts that highlight certain portions of the scrapbooking sample; place near the feature that it highlights  See Figure 4-24

28.  See Figure 4-25 for text of the 3 callout notes  Insert each in div containers placed within main section  Set id values to note1, note2, and note3  Add class value notes to each element so you can apply a common set of styles to all the notes  Because the styles will apply only to this page, will add an embedded style sheet to format appearance of the 3 notes

29.  Position the notes at appropriate locations  Positioning was one of the first enhancements to original CSS1 specs  Known as CSS-Positioning or CSS-P  To place an element at a specific location:  position: type; top: value; right: value; bottom: value; left: value  In practice, usually only left and top are used

30.  Enables you to place an element at specific coordinates either on a page or within a containing element Position: absolute; left: 100 px; top: 50 px  Places an element at coordinates (100, 50), or 100 pixels to right and 50 down from upper-left corner of page or containing element  Absolute positioning takes an element out of normal flow

31.  Any subsequent content flows into space previously occupied by the element  When elements are nested within one another, position of the element is based on coordinates within parent object if that object is itself placed on page using CSS positioning

32.  Used to move an element relative to its default position position: relative; left: 10px; top: 50px  Does not affect position of other elements  Might want to position any object nested in a div container  Don’t move container itself; use relative positioning to place div container with top and left value at 0

33.  An element placed with absolute/relative positioning scrolls with rest of document  Can be fixed at specific spot by setting value of position style to fixed  Not all browsers support fixed position  Can also assign inherit position so it inherits the position value of its parent element  Now position the 3 callout notes

34.  Reducing height of each note by lowering value of its height attribute will not meet her needs  Height of each note expands to accommodate its content  Would have to define how browser should handle a situation where content overflows overflow: type  Where type is visible, hidden, scroll, or auto

35.  Closely related to overflow style is clip style  Allows you to define a rectangular region through which element’s content can be viewed  Anything outside boundary of rectangle is hidden clip: rect(top, right, bottom, left)  These values can also be set to auto, which matches the specified edge of the clipping region to edge of parent element

36.  Might want to limit an element’s height/width  Often desirable when you’ve specified the size using relative units that can expand/contract depending on size of browser window—might be difficult to read  Can specify an element’s minimum or maximum height or width

37.  Positioning elements can sometimes lead to objects that overlap each other  By default, elements that are formatted later are stacked on top of earlier elements  And CSS-P elements are stacked on top of elements that are not CSS-P  To specify a different stacking order, use z-index: value  where value is positive, negative, or auto

38.  Some of the pages don’t print well  Users would prefer to print only the sample, without the header, links list, and footer  Would also like notes to be printed on separate page from sample (see Figure 4-42)  Could create two versions of samples page  One for screen and one for printer  Avoid multiple versions; use a style sheet designed for printed output

39.  By default, a style sheet is applied to all devices  Each device determines how best to match the style to its own requirements  When you print, the browser and its built-in styles prepare doc for the printer with some control by user (size of margins, content of header/footer)  CSS2 has given more control by using the media attribute  See Figure 4-43

40.  Not always convenient to maintain several style sheets for same document  Can use a single style sheet broken down into different sections for each media type @media type {styles declarations}  where type is one of supported media types and style declarations are associated with that media type

41.  Distinction among different media types not always immediately clear  How is projection media different from screen media?  Difference lies in what kind of output can be sent to the media  All output media can be described based on common properties

42.  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 (no interaction)  See Figure 4-44 for how output media are categorized

43.  Decide to create a style sheet for printers  Kathy wants you to use the print.css style sheet for any paged visual media, which includes both printed media and projected media

44.  You notice from sketch of printed version that many elements are missing (links, address)  CSS has 2 styles that can be used to keep an element from being displayed in the output: the display style and the visibility style visibility: type  where type is visible, hidden, collapse, or inherit  Unlike display style, visibility style hides an element but doesn’t remove it from flow on page

45.  See Figure 4-47 to compare visibility and display styles  Kathy still wants notes to appear on a separate sheet  Will have to place a page break in middle of document (supported in printed output and for projection devices)

46.  CSS defines printed pages by extending the box model to incorporate the entire page in a page box  See Figure 4-51—page box is composed of two areas: the page area, containing the content of the document, and the margin area, containing the space between the printed content and edges of the page

47.  As with the box model, can specify size of a page box, page margins, internal padding, and other features  Cannot use the em or ex measurement units

48.  If you pages will require several pages when printed, might want to define different styles for different pages  Do this with pseudo-classes that reference specific pages

49.  Because printed media can vary in size and orientation, one of the styles supported by the page box is the size style that allows the author to define default dimensions of printed page as well as whether the pages should be printed in portrait or landscape

50.  When a doc is sent to the printer, the printer decides location of page breaks unless that info is included as part of the print style  page-break-after: type  page-break-before: type  The type style attribute has following values:  always  avoid  left

51.  right  auto  inherit

52.  Sometimes you want to keep printer from inserting page breaks inside an element  page-break-inside: type  where type is auto, inherit, or avoid  To prevent a block quote from appearing on two pages, use blockquote {page-break-inside: avoid}  Not a guarantee!

53.  Will be situations where a printer will have to divide contents of an element across 2 pages  Can control occurrence of widows and orphans  A widow occurs when only a few ending lines appear at top of a page  An orphan is just the opposite  Makes it more difficult to read  Styles to control them are:

54. widow: value orphan: value  where value is number of lines that must appear within the element before a page break can be inserted by the printer  Default is 2  See guidelines on page 251