Tutorial 4: Creating Special Effects with CSS College of Computing & Information Technology King Abdulaziz University CPCS-403 Internet Applications Programming
Objectives 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 Dealing with stacked objects Tutorial 4: Creating Special Effects with CSS page 2
Objectives Apply styles to various media Hide elements from printing Create and apply printer styles Create and prohibit page breaks for printing Tutorial 4: Creating Special Effects with CSS page 3
Tutorial 4 Web Site We ll modify site by adding: 1) Graphical bullets 2) Rollover effects 3) Drop caps Also, the site needs to work for any kind of output, including mobile devices and printed output Tutorial 4: Creating Special Effects with CSS page 4
Working with Selector Patterns Motivation for Contextual Selectors: Let s say you have several h2 elements And you want all of them to look the same Except for one of them You want that one to look different How do you do this? You could use an id attribute You would apply a specific id to the specific h2 tag that you want to look different from the rest And you would make a style for that specific id But the requires you keeping a (possibly) long list of id values for all the various elements on the page Tutorial 4: Creating Special Effects with CSS page 5
Working with Selector Patterns Motivation for Contextual Selectors: Let s say you have several h2 elements And you want all of them to look the same Except for one of them You want that one to look different Another Option: Make styles based on their location or use in the document css allows this through the use of contextual selectors Tutorial 4: Creating Special Effects with CSS page 6
Working with Selector Patterns Contextual Selectors: Thus far, we ve worked with styles in which the selector references either an element (or group of elements) or an element referenced by an id Example: b {color: blue} this makes all boldface text appear in a blue font But what if we didn t want every bold font to be blue? Instead, what if we only wanted bold text, which appeared inside a list, to be blue? How would we do that? Tutorial 4: Creating Special Effects with CSS page 7
Working with Selector Patterns Recall that on a Web page, elements are nested within other elements, forming a hierarchical tree structure Here s an example of a Web page that has a few headings, paragraph tags, and bold tags: Tutorial 4: Creating Special Effects with CSS page 8
Working with Selector Patterns Contextual Selectors: To take advantage of the hierarchical structure of Web page elements, CSS allows you to create contextual selectors What do contextual selectors do? They allow you to express the location of an element within the hierarchy of elements Syntax: parent descendant {styles} where parent is the parent element, descendant is a descendant of the parent, and styles are the styles applied to the descendant element Tutorial 4: Creating Special Effects with CSS page 9
Working with Selector Patterns Contextual Selectors: Example: Apply a blue color only to boldface text found in lists. You would use the style: li b {color: blue} In this case, li is the parent element, and b is the descendant element Any bold element not nested within a list element will not be affected by this style Also note that the descendant element does not have to be a direct descendant of the parent Tutorial 4: Creating Special Effects with CSS page 10
Working with Selector Patterns Contextual Selectors: contextual selectors can be grouped with other selectors Example: Apply a blue font to h2 headings and boldface list items You would use the style: li b, h2 {color: blue} Tutorial 4: Creating Special Effects with CSS page 11
Working with Selector Patterns Contextual Selectors: contextual selectors can be applied with elements marked with a specific id Example: Display bold text in a blue font if it is nested within an element with an id of notes You would use the style: #notes b {color: blue} Figures 4-3 and 4-4 (page 202-203) show detailed examples of contextual selectors that can be used in CSS Tutorial 4: Creating Special Effects with CSS page 12
Working with Selector Patterns Attribute Selectors On occasion you might also need to select elements based on their attribute values Example: To display link text in a blue font, you would use: a {color: blue} However, this declaration makes no distinction between <a> tags used to mark links and <a> tags used to mark document anchors (see page 78 in book) HTML makes the distinction by the presence of the href attribute If the <a> tag has an href attribute, it is a link Otherwise it is an anchor (which is deprecated) Tutorial 4: Creating Special Effects with CSS page 13
Working with Selector Patterns Attribute Selectors On occasion you might also need to select elements based on their attribute values Now examine the following declaration: a[href] {color: blue} This applies the blue font color style only to link elements that contain an href attribute So any <a> tag used to mark anchors would not contain the href attribute, and therefore would not be affected by this style See Figure 4-5 for a detailed listing of other attribute selectors supported by CSS Tutorial 4: Creating Special Effects with CSS page 14
Using Selector Patterns To apply a style to all elements in the document, use the * selector To apply a style to a single element, use the e selector, where e is the name of the element To apply a selector to a descendant element, f, use the e f selector, where e is the name of the parent element and f is an element nested within the parent To apply a selector to a child element, f, use the e > f selector, where e is the name of a parent element and f is an element that is a direct child of the parent To apply a selector to a sibling element, use the e + f selector, where e and f are siblings and f immediately follows e in the document tree Tutorial 4: Creating Special Effects with CSS page 15
Tutorial 4 Web Site Notice the h2 heading called Basic Materials We want to create a specific style for this heading But we don t want to affect the other h2 headings Tutorial 4: Creating Special Effects with CSS page 16
Tutorial 4 Website Modify Basic Materials h2 heading: This heading currently appears within a div element that is identified by an id value named pullout So we simply modify the style sheet, adding a contextual selector to the pullout style: The selector #pullout h2 will reference only those h2 elements within an element with the pullout id Tutorial 4: Creating Special Effects with CSS page 17
Tutorial 4 Website Result Tutorial 4: Creating Special Effects with CSS page 18
Tutorial 4 Website Result Links on left side of page: Notice that the links are in an unordered list, which is displayed in a box floated on the left page margin Like all unordered lists, the browser displays the list items with bullet markers How would you remove the bullet marker? Or perhaps choose a different type of bullet? Tutorial 4: Creating Special Effects with CSS page 19
Applying Styles to Lists To specify the list marker displayed by the browser, you can apply the style list-style-type: type where type is one of the following markers: Tutorial 4: Creating Special Effects with CSS page 20
Applying Styles to Lists List Style Types: Example: To create a list with alphabetical markers such as A. Home B. Getting Started C. Scrapbooking Tips D. Supply List you would apply the following list style to the ol list element: ol {list-style-type: upper-alpha} Tutorial 4: Creating Special Effects with CSS page 21
Applying Styles to Lists Nested Lists and Contextual Selectors List style types can be used with contextual selectors to create an outline style for several levels of nested lists The following page shows an example in which several levels of list style markers are used in formatting an outline Note that each marker style is determined by the location of each ordered list within the levels of the outline Tutorial 4: Creating Special Effects with CSS page 22
Applying Styles to Lists Tutorial 4: Creating Special Effects with CSS page 23
Applying Styles to Lists Using Custom List Markers If you don t like any of the markers (bullets) in the list-style-type style, you can supply your own in a graphic image file Use the style: list-style-image: url(url) where (url) is the URL of the graphic image file Example: Display items in an unordered list marked with a graphic image file named redball.gif: ul {list-style-image: url(redball.gif) } Tutorial 4: Creating Special Effects with CSS page 24
Tutorial 4 Website Left side links: We will modify these links so they appear without any bullet marker Links inside Basic Materials box These links should use a bullet marker based off of a graphic image file (bullet.jpg) How to differentiate between the two lists: Use contextual selectors! List of links is nested inside a div container with an id named links Basic Materials box is nested within the pullout div box Tutorial 4: Creating Special Effects with CSS page 25
Tutorial 4 Website We simply modify the css file as follows: Tutorial 4: Creating Special Effects with CSS page 26
Tutorial 4 Website Result Tutorial 4: Creating Special Effects with CSS page 27
Applying Styles to Lists Lists are treated as block-level elements Most browsers place the list marker to the left of the block, lining up the markers with each list item You can change this default behavior using the style: list-style-position: position where position is either outside (the default) or inside When using inside, the marker is placed inside the block, causing the list text to flow around the marker More on page 211-122 (padding & margins) Tutorial 4: Creating Special Effects with CSS page 28
Applying Styles to Lists List Marker Positions: Tutorial 4: Creating Special Effects with CSS page 29
Tutorial 4 Website Left side links There are three main subtopics within the links: Pages that teach scrapbooking Pages that sell products Pages that give information about the company The links are ordered by these subtopics But there is no visual separation between the subtopics of links We want the links to appear as three groups One way to do this is to mark the first link, in each group, and then increase the top margin for those links We mark those links using the class attribute Tutorial 4: Creating Special Effects with CSS page 30
Working with Classes The class attribute is used when you want to identify elements that share a common characteristic Syntax: <elem class="class">... </elem> where elem is an element in the body of the Web page and class is a name that identifies the class of objects to which the element belongs Tutorial 4: Creating Special Effects with CSS page 31
Working with Classes Class Attribute Example: Examine the following HTML code: <h2 class="subtitle">getting Started</h2> <h2 class="subtitle">preserving Your Memories</h2> This code marks both of the h2 headings as belonging to the subtitle class Note, that unlike the id attribute, several elements can share the same class value Meaning, multiple elements can belong to the same class Also note that the class value need not be assigned to the same type of element Example: h3 and <p> tags can belong to the same class Tutorial 4: Creating Special Effects with CSS page 32
Working with Classes Advantage of class attribute You can use it to assign the same style to multiple elements sharing the same class value The selector for the class attribute is.class {styles} where class is the name of the class and styles are the styles applied to that class of element Example: Display all elements belonging to the subtitle class in a blue font:.subtitle {color: blue} Tutorial 4: Creating Special Effects with CSS page 33
Working with Classes More details on class attributes: Remember that the same class name can be used with elements of different types As such, you may need to specify exactly which elements of a particular class receive a defined style Syntax: elem.class {styles} where elem is the element and class is the class Example: h2.subtitle {color: blue} applies a blue font to elements of the subtitle class, but only if they are h2 headings Tutorial 4: Creating Special Effects with CSS page 34
Tutorial 4 Website We want to create a visual separation between the three groups of links The three links are Home, Online Store, and About Us We will mark these three links as belonging to a class called newgroup Then we will apply a style that increases the top margin of those elements Tutorial 4: Creating Special Effects with CSS page 35
Tutorial 4 Website Mark the links as new Group : Create a newgroup style: Tutorial 4: Creating Special Effects with CSS page 36
Tutorial 4 Website Result Tutorial 4: Creating Special Effects with CSS page 37
Brief Interlude: Human Stupidity Tutorial 4: Creating Special Effects with CSS page 38
Tutorial 4 Website Links now look much better But Kathy thinks the large block of underlined links is difficult to read She doesn t want the links underlined except when the mouse pointer hovers over the link Only then should an underline appear This is called a rollover effect, because it applies only when a user rolls the mouse over an element We can create rollover effects using pseudoclasses Tutorial 4: Creating Special Effects with CSS page 39
Using Pseudo-Classes and Pseudo-Elements What is a pseudo-class? it is a classification of an element based on its current status, position, or use in the document Example: One pseudo-class indicates whether a link has been previously visited by the user Another pseudo-class indicates whether a link is currently being activated or clicked To create a style for a pseudo-class, use the style: selector:pseudo-class {styles} where selector is an element or group of elements within a document, pseudo-class is the name of the pseudo-class and styles are the styles you want to apply Tutorial 4: Creating Special Effects with CSS page 40
Using Pseudo-Classes and Pseudo-Elements Pseudo-classes supported by CSS: Tutorial 4: Creating Special Effects with CSS page 41
Using Pseudo-Classes and Pseudo-Elements Example of rollover effect: If you want the font color of your links to change to red after they ve been visited, you could use the following style declaration: a.visited {color: red} Or to change the font color of your links to green only while the mouse hovers over the link, use: a.hover {color: green} Tutorial 4: Creating Special Effects with CSS page 42
Tutorial 4 Website Using rollover effects: Kathy wants to remove the default underlining of links If the mouse hovers over a link, she wants the text to appear in a black font and underlined She ll use the following style declarations: Tutorial 4: Creating Special Effects with CSS page 43
Tutorial 4 Website Result Tutorial 4: Creating Special Effects with CSS page 44
Tutorial 4 Website Creating a Drop Cap Kathy wants to apply the following effects to the first paragraph on the page: The first line should be displayed in small caps style The first letter should be increased in size and displayed as a drop cap Tutorial 4: Creating Special Effects with CSS page 45
Using Pseudo-Classes and Pseudo-Elements Creating a Drop Cap We can define selectors based on pseudoelements that are not part of the document tree Instead, they are abstracted from what we know of an element s content, use, or position in the document Example: A paragraph element is part of the document tree and is marked with the <p> tag But the first line of the paragraph is not marked There is no first line element, even though we intuitively know where the first line is located Tutorial 4: Creating Special Effects with CSS page 46
Using Pseudo-Classes and Pseudo-Elements Syntax of a pseudo-element selector: selector:pseudo-element {styles} where selector is an element or group of elements within the document, pseudo-element is an abstract element based on the selector, and styles are the styles you want to apply to the pseudo-element. Here are some pseudo-elements supported by CSS Tutorial 4: Creating Special Effects with CSS page 47
Tutorial 4 Website Remember, Kathy wants two new effects: The first line should be displayed in small caps style The first letter should be increased in size and displayed as a drop cap We use the style declarations: Note: the first paragraph already has an id applied to it with the name firstp Tutorial 4: Creating Special Effects with CSS page 48
Tutorial 4 Website Result Tutorial 4: Creating Special Effects with CSS page 49
Tutorial 4 Website Kathy wants to show scrapbook samples each month And she wants to have callouts that highlight certain portions of the scrapbook sample for the reader Each callout box should be placed close to the feature it highlights The following is a sketch of what she wants Tutorial 4: Creating Special Effects with CSS page 50
Tutorial 4 Website Here s a sketch of what she wants Notice the three boxes labeled note #1, note #2, and note #3 Each note will be inserted in a div container with specific id values Each container will also belong to the same class, allowing a common set of styles to be placed on them Tutorial 4: Creating Special Effects with CSS page 51
Tutorial 4 Website Create div containers for each note Tutorial 4: Creating Special Effects with CSS page 52
Tutorial 4 Website The styles in this task will apply only to this page and no others in Kathy s Web site So we use an embedded style sheet Text should appear in a brown 8-point sans-serif font on an ivory background. Boxes should have a 3-pixel light gray inset border. Notes should be 130 pixels wide, with a margin space of 5 pixels around the paragraphs Tutorial 4: Creating Special Effects with CSS page 53
Tutorial 4 Website Here s how the boxes will now look: Note: the boxes are placed side-byside in this figure for viewing purposes only. At this point, in the browser, they would appear stacked, one on top of the other Now we simply need to position the boxes at the appropriate locations on the Samples page Tutorial 4: Creating Special Effects with CSS page 54
Positioning Objects with CSS The Position Style: CSS-P (CSS-Positioning) became part of the specification for CSS2, and positioning styles were some of the first CSS2 styles to be adopted by browsers To position an element, use the style: position: type; top: value; right: value; bottom: value; left: value; where type indicates the type of positioning applied to the element, and the top, right, bottom, and left styles indicate the coordinates of those edges of the element Tutorial 4: Creating Special Effects with CSS page 55
Positioning Objects with CSS The position style has five possible values: static, absolute, relative, fixed, and inherit The default position is static Enables browsers to place an element based on where it flows in the document Essentially the same as not using any CSS positioning at all Any values that you specify for the left or top styles are simply ignored by the browser when static is used Tutorial 4: Creating Special Effects with CSS page 56
Positioning Objects with CSS The position style has five possible values: 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 places an element at the coordinates (100, 50) or 100 pixels to the right and 50 pixels down from the upper-left corner of the page OR from the container element Once an element has been placed using absolute positioning, it affects the placement of other objects on the page Tutorial 4: Creating Special Effects with CSS page 57
Positioning Objects with CSS The position style has five possible values: Relative positioning is used to move an element relative to its default position on the page position: relative; left: 100px; top: 50px places an element 100 pixels to the right and 50 pixels down from its normal placement in a browser window Relative positioning does NOT affect the position of other elements on a page Other elements retain their original position, as if the element had never been moved See book (p 230) & demo for detailed examples Tutorial 4: Creating Special Effects with CSS page 58
Positioning Objects with CSS The position style has five possible values: 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 fixed Not all browsers support this proceed with caution You can assign the inherit position style to an element so that it inherits the position value of its parent element Download DEMO for Tutorial 4 and play with it: http://www.cengage.com/webdesign/np/xml3 Tutorial 4: Creating Special Effects with CSS page 59
Tutorial 4 Website Position the Callout Boxes We ve already styled the callout boxes Now we can position them on the Scrapbooks sample page by adding the following styles to the embedded style sheet: Notice that we used absolute positioning for each callout box Tutorial 4: Creating Special Effects with CSS page 60
Tutorial 4 Website Result Tutorial 4: Creating Special Effects with CSS page 61
Tutorial 4 Website Kathy likes the changes But she s picky! And she feels the boxes are too large They cover up too much of the actual scrapbook sample image So we need to make the callout boxes less intrusive Tutorial 4: Creating Special Effects with CSS page 62
Working with Overflow and Clipping Just reduce the height of the box? Unfortunately, this wouldn t work. Why? If you simply decrease the height of the box, the height would still expand to accommodate the content 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 Tutorial 4: Creating Special Effects with CSS page 63
Working with Overflow and Clipping Dealing with overflow Syntax of the overflow style: overflow: type where type is visible (the default), hidden, scroll, or auto Tutorial 4: Creating Special Effects with CSS page 64
Tutorial 4 Website Fixing the callout boxes The boxes were too large (per Kathy) So we limit the height of each callout box to 90 pixels, and we display scroll bars as needed We set the overflow style to auto Tutorial 4: Creating Special Effects with CSS page 65
Tutorial 4 Website Result Tutorial 4: Creating Special Effects with CSS page 66
Working with Overflow and Clipping Clipping an Element The clip style allows you to define a rectangular region through which the element s content can be viewed Anything that lies outside the boundary of the rectangle is hidden Syntax: clip: rect(top, right, bottom, left) where top, right, bottom, and left define the coordinates of the clipping rectangle Tutorial 4: Creating Special Effects with CSS page 67
Working with Overflow and Clipping Clipping an Element Example: clip rect(10, 175, 125, 75) Defines a clip region whose top and bottom edges are 10 and 125 pixels from the top of the element, and whose right and left edges are 175 and 75 pixels from the left side Tutorial 4: Creating Special Effects with CSS page 68
Stacking Elements Problems with positioning elements: Objects can sometimes overlap each other By default, elements that are formatted later in the page are stacked on top of earlier elements Also, 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 where value is a positive or negative integer or the keyword auto Tutorial 4: Creating Special Effects with CSS page 69
Stacking Elements Z-index Style: Objects are stacked based on their z-index value, with the highest z-index value placed on top Tutorial 4: Creating Special Effects with CSS page 70
Stacking Elements Z-index Style: Only works for elements placed with absolute positioning Also, an element s z-index value determines its position relative only to the other elements that share a common parent Example: Study the graphic on the next page The object with the highest z-index (4) is still covered Why? Because it is nested within another object that has a low z- index (1) Tutorial 4: Creating Special Effects with CSS page 71
Stacking Elements Z-index Example: Tutorial 4: Creating Special Effects with CSS page 72
Tutorial 4: Creating Special Effects with CSS WASN T THAT BREAKTAKING! Tutorial 4: Creating Special Effects with CSS page 73
Daily Demotivator Tutorial 4: Creating Special Effects with CSS page 74
Tutorial 4: Creating Special Effects with CSS College of Computing & Information Technology King Abdulaziz University CPCS-403 Internet Applications Programming
Objectives Apply styles to various media Hide elements from printing Create and apply printer styles Create and prohibit page breaks for printing Tutorial 4: Creating Special Effects with CSS page 76
Tutorial 4 Website Problem printing The site looks good right now But Kathy says the pages don t print well When a customer prints the sample scrapbook page, they don t need a printout of the header logo or the left side links They just want the scrapbook page And, ideally, they want the notes (callout boxes) to be printed on a separate page So they don t cover up the scrapbook sample page Tutorial 4: Creating Special Effects with CSS page 77
Tutorial 4 Website Kathy s proposed printed output: Tutorial 4: Creating Special Effects with CSS page 78
Tutorial 4 Website Problem printing So what is the solution? We could create two different versions of the Samples page: one for screens and one for print But then you have to maintain two pages with effectively the same content. That makes no sense! Guess what: Since we ve moved the styling away from the content, we can simply make a separate style sheet specifically for printing purposes We ll have one page, but rendered different based on the style sheet applied to it Tutorial 4: Creating Special Effects with CSS page 79
Working with Different Media Media Types By default, a style sheet is applied to all devices, and each device must determine how best to match the styles to its own requirements To specify the media, you use the media attribute: <style type="text/css" media="type">... </style> or <link href="url" type="text/css" media="type"... /> where type is the type of media used by the style sheet Tutorial 4: Creating Special Effects with CSS page 80
Working with Different Media Table of values for the media attribute: See page 241 for more details Tutorial 4: Creating Special Effects with CSS page 81
Working with Different Media You can use a single style sheet broken down into different sections for each media type You do this using the rule: @media type { style declarations } where type is one of the supported media types and style declarations are style declarations associated with that media type Tutorial 4: Creating Special Effects with CSS page 82
Working with Different Media You can use a single style sheet broken down into different sections for each media type Example: The following style sheet is broken into four sections with different styles for each section: @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} } Tutorial 4: Creating Special Effects with CSS page 83
Working with Different Media Differences between different media types is not always clear Ex: how is projection media different from screen media? The difference lies in what kind of output can be sent to the media All output can be described based on some common properties CSS uses media groups to describe how different media devices render content Tutorial 4: Creating Special Effects with CSS page 84
Working with Different Media CSS uses four media groups based on the following characteristics: 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) Tutorial 4: Creating Special Effects with CSS page 85
Working with Different Media The following table shows how all output media are categorized based on the four media groups: Tutorial 4: Creating Special Effects with CSS page 86
Tutorial 4 Website Making a css style sheet for printing From our samples.htm web page, we will link to another css file, print.css So now two css files will be linked to this one web page Which will be used? That depends on the media! If the page is being viewed, it will use scraps.css If the page is being printed, it will use print.css Tutorial 4: Creating Special Effects with CSS page 87
Tutorial 4 Website Making a css style sheet for printing The samples.htm file also includes an embedded style sheet Like the external style sheet, we need to create two embedded sheets as well Note: we haven t actually declared the styles yet Tutorial 4: Creating Special Effects with CSS page 88
Tutorial 4 Website Examine Kathy s sketch of her proposed print version of the Samples page What do you immediately notice? Many elements are missing! Such as the list of links and the address at the bottom How do we magically remove these elements? Thankfully, it is easy! CSS has two styles that you can use to keep an element from being displayed in the output The display style and the visibility style Tutorial 4: Creating Special Effects with CSS page 89
Hiding Elements CSS has two styles that you can use to keep an element from being displayed in the output 1) The display style This style supports the value none causes the element to not be rendered to the output device This is precisely what we want! Tutorial 4: Creating Special Effects with CSS page 90
Hiding Elements CSS has two styles that you can use to keep an element from being displayed in the output 2) The visibility style Syntax: visibility: type where type is visible, hidden, collapse, or inherit (which is the default) Unlike the display style, the visibility style hides an element, but it does NOT remove it from the flow of elements on the page Compare the two styles on the next page Tutorial 4: Creating Special Effects with CSS page 91
Hiding Elements Comparing Visibility and Display Styles Tutorial 4: Creating Special Effects with CSS page 92
Hiding Elements CSS has two styles that you can use to keep an element from being displayed in the output Based on the previous graphic, it is clear that the display: none style is more appropriate for our purposes and is usually more appropriate whenever you want to hide elements Tutorial 4: Creating Special Effects with CSS page 93
Tutorial 4 Website For the print version, Kathy wants to hide the following div elements: head, links, and address And she wants all headings to appear in a sansserif font We add the following style declarations in the print.css file: Tutorial 4: Creating Special Effects with CSS page 94
Tutorial 4 Website Also, For the print version, Kathy wants the callout boxes to print as a bulleted list We change the style of the boxes by using the following display style: display: list-item we also use the same bullet.jpg graphic and set the text to a 12-point sans-serif font with a margin of 20 pixels Add the following to the embedded style sheet: Tutorial 4: Creating Special Effects with CSS page 95
Tutorial 4 Website Result Now, reload the samples.htm file Does it look different? Why not? Because we are viewing it on a screen! And the modifications we just made were for print media To confirm that the print styles are working, either print the web page or use your browser s Print Preview command to preview the printed version Tutorial 4: Creating Special Effects with CSS page 96
Brief Interlude: Human Stupidity Tutorial 4: Creating Special Effects with CSS page 97
Tutorial 4 Website Here s the printed output of the same HTML page Cool how this is the same page but looks completely different Such is the power of CSS! Tutorial 4: Creating Special Effects with CSS page 98
Tutorial 4 Website Kathy likes the printout! but... she s kinda picky huh She wants the notes to appear on a separate page So we need to use a page break in the middle of the document Page breaks are not supported by media types such as computer screens But they are supported in printed output and for projection devices Tutorial 4: Creating Special Effects with CSS page 99
Using Print Styles CSS defines printed pages by extending the box model (described in Tutorial 3) The entire page is incorporated in a page box The page box has 2 areas: The page area: contains the content of the document The margin area: contains the space between the printed content and the edges of the page Tutorial 4: Creating Special Effects with CSS page 100
Using Print Styles The Page Box The general rule to create and define a page box is: @page {styles} where styles are the styles you want applied to the page Example: @page {margin: 5in} this page rule sets the page margin for printed output to 5 inches Note: you should only use inches or centimeters See page 249 for more details Tutorial 4: Creating Special Effects with CSS page 101
Using Print Styles Setting the Page Size: 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 Syntax: size: width height orientation where width and height are the width and height of the page, and orientation is the orientation of the page (portrait or landscape) Tutorial 4: Creating Special Effects with CSS page 102
Using Print Styles Setting the Page Size: Example: @page {size: 8.5in 11in landscape; margin: 1in} This formats a print page as a standard-size page in landscape orientation with a 1-inch margin Example 2: @page {size: 8.5in 11in; margin: 1in} The orientation is not show here Browsers will assume portrait by default Tutorial 4: Creating Special Effects with CSS page 103
Working with Page Breaks When a document is sent to the printer, the printer decides the location of the page breaks unless that information is included as part of the print style To specify page breaks before or after a page element, you use the styles: page-break-before: type page-break-after: type where type can be one of the options on the following page Tutorial 4: Creating Special Effects with CSS page 104
Working with Page Breaks The type style attribute has the following values: Always, to always place a page break before or after the element Avoid, to never place a page break Left, to place a page break where the next page will be a left page Right, same as above, but for a right page Auto, allows the printer to determine page breaks Inherit, to insert the page break style from the parent element Tutorial 4: Creating Special Effects with CSS page 105
Working with Page Breaks Page Break Examples: Example 1: If you want h1 headings to always be placed at the start of a new page, you would use: h1 {page-break-before: always} Example 2: If you want block quotes to always appear on their own page, you would use a page break before and after the block quote style blockquote {page-break-before: always; page-break-after: always} Tutorial 4: Creating Special Effects with CSS page 106
Working with Page Breaks A widow occurs when only a few ending lines of an element appear at the top of a page An orphan is just the opposite: it occurs when 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 where value is the number of lines that must appear within the element before a page break can be inserted Tutorial 4: Creating Special Effects with CSS page 107
Tutorial 4 Website Remember what Kathy wants She wants the notes to appear on a separate page We can put a page break after the third callout note Or we can put a page break before the inline image of the scrapbooking sample Also, Kathy wants the sample image itself to be enlarged to better fit the print page Enlarged to 7 wide by 9.1 tall The img element is part of a div container, so we can simply adjust the size as part of the container Tutorial 4: Creating Special Effects with CSS page 108
Tutorial 4 Website We add the following declarations to the print.css style sheet: Tutorial 4: Creating Special Effects with CSS page 109
Tutorial 4 Website Result Tutorial 4: Creating Special Effects with CSS page 110
Summary Worked with CSS selectors Created styles for lists Created and applied class styles Created a rollover effect Created a drop cap using a pseudo-element Managed page layout with CSS Worked with overflow and clipping styles Tutorial 4: Creating Special Effects with CSS page 111
Summary Created stacked objects Applied styles to various media Hid elements from printing Created and applied printer styles Created and prohibited page breaks for printing Tutorial 4: Creating Special Effects with CSS page 112
Tutorial 4: Creating Special Effects with CSS WASN T THAT DYNAMITE! Tutorial 4: Creating Special Effects with CSS page 113
Daily Demotivator Tutorial 4: Creating Special Effects with CSS page 114
Tutorial 4: Creating Special Effects with CSS College of Computing & Information Technology King Abdulaziz University CPCS-403 Internet Applications Programming