-
Computer Science Department University of Central Florida
Tutorial 4: Creating Special Effects with CSS
COP 3175 – Internet Applications
-
Tutorial 4: Creating Special Effects with CSS page 2 © Jonathan Cazalas
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 3 © Jonathan Cazalas
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 4 © Jonathan Cazalas
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 5 © Jonathan Cazalas
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 6 © Jonathan Cazalas
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 7 © Jonathan Cazalas
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 8 © Jonathan Cazalas
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 9 © Jonathan Cazalas
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 10 © Jonathan Cazalas
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 11 © Jonathan Cazalas
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 12 © Jonathan Cazalas
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 13 © Jonathan Cazalas
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 tags used to mark links and tags used to mark document anchors (see page 78 in book) HTML makes the distinction by the presence of the href
attribute If the 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 14 © Jonathan Cazalas
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 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 15 © Jonathan Cazalas
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 16 © Jonathan Cazalas
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 17 © Jonathan Cazalas
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 18 © Jonathan Cazalas
Tutorial 4 Website – Result
-
Tutorial 4: Creating Special Effects with CSS page 19 © Jonathan Cazalas
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 20 © Jonathan Cazalas
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 21 © Jonathan Cazalas
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 22 © Jonathan Cazalas
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 23 © Jonathan Cazalas
Applying Styles to Lists
-
Tutorial 4: Creating Special Effects with CSS page 24 © Jonathan Cazalas
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 25 © Jonathan Cazalas
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 26 © Jonathan Cazalas
Tutorial 4 Website
We simply modify the css file as follows:
-
Tutorial 4: Creating Special Effects with CSS page 27 © Jonathan Cazalas
Tutorial 4 Website – Result
-
Tutorial 4: Creating Special Effects with CSS page 28 © Jonathan Cazalas
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 29 © Jonathan Cazalas
Applying Styles to Lists
List Marker Positions:
-
Tutorial 4: Creating Special Effects with CSS page 30 © Jonathan Cazalas
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 31 © Jonathan Cazalas
Working with Classes
The class attribute is used when you want to identify elements that share a common characteristic Syntax: ...
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 32 © Jonathan Cazalas
Working with Classes
Class Attribute Example: Examine the following HTML code:
Getting Started Preserving Your Memories
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
tags can belong to the same class
-
Tutorial 4: Creating Special Effects with CSS page 33 © Jonathan Cazalas
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 34 © Jonathan Cazalas
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 35 © Jonathan Cazalas
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 36 © Jonathan Cazalas
Tutorial 4 Website
Mark the links as “new Group”:
Create a “newGroup” style:
-
Tutorial 4: Creating Special Effects with CSS page 37 © Jonathan Cazalas
Tutorial 4 Website – Result
-
Tutorial 4: Creating Special Effects with CSS page 38 © Jonathan Cazalas
Brief Interlude: Human Stupidity
-
Tutorial 4: Creating Special Effects with CSS page 39 © Jonathan Cazalas
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 pseudo-classes
-
Tutorial 4: Creating Special Effects with CSS page 40 © Jonathan Cazalas
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 41 © Jonathan Cazalas
Using Pseudo-Classes and Pseudo-Elements Pseudo-classes supported by CSS:
-
Tutorial 4: Creating Special Effects with CSS page 42 © Jonathan Cazalas
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 43 © Jonathan Cazalas
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 44 © Jonathan Cazalas
Tutorial 4 Website – Result
-
Tutorial 4: Creating Special Effects with CSS page 45 © Jonathan Cazalas
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 46 © Jonathan Cazalas
Using Pseudo-Classes and Pseudo-Elements Creating a Drop Cap
We can define selectors based on pseudo-elements 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
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 47 © Jonathan Cazalas
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 48 © Jonathan Cazalas
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 49 © Jonathan Cazalas
Tutorial 4 Website – Result
-
Tutorial 4: Creating Special Effects with CSS page 50 © Jonathan Cazalas
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 51 © Jonathan Cazalas
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 52 © Jonathan Cazalas
Tutorial 4 Website
Create div containers for each note
-
Tutorial 4: Creating Special Effects with CSS page 53 © Jonathan Cazalas
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 54 © Jonathan Cazalas
Tutorial 4 Website
Here’s how the boxes will now look:
Now we simply need to position the boxes at the appropriate locations on the Samples page
Note: the boxes are placed side-by-side in this figure for viewing purposes only.
At this point, in the browser, they would appear stacked, one on top of the other
-
Tutorial 4: Creating Special Effects with CSS page 55 © Jonathan Cazalas
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 56 © Jonathan Cazalas
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 57 © Jonathan Cazalas
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 58 © Jonathan Cazalas
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 59 © Jonathan Cazalas
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
http://www.cengage.com/webdesign/np/xml3�
-
Tutorial 4: Creating Special Effects with CSS page 60 © Jonathan Cazalas
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 61 © Jonathan Cazalas
Tutorial 4 Website – Result
-
Tutorial 4: Creating Special Effects with CSS page 62 © Jonathan Cazalas
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 63 © Jonathan Cazalas
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 64 © Jonathan Cazalas
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 65 © Jonathan Cazalas
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 66 © Jonathan Cazalas
Tutorial 4 Website – Result
-
Tutorial 4: Creating Special Effects with CSS page 67 © Jonathan Cazalas
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 68 © Jonathan Cazalas
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 69 © Jonathan Cazalas
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 70 © Jonathan Cazalas
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 71 © Jonathan Cazalas
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 72 © Jonathan Cazalas
Stacking Elements
Z-index Example:
-
Tutorial 4: Creating Special Effects with CSS page 73 © Jonathan Cazalas
Tutorial 4: Creating Special Effects with CSS
WASN’T THAT
BREAKTAKING!
-
Tutorial 4: Creating Special Effects with CSS page 74 © Jonathan Cazalas
Daily Demotivator
-
Computer Science Department University of Central Florida
Tutorial 4: Creating Special Effects with CSS
COP 3175 – Internet Applications
-
Tutorial 4: Creating Special Effects with CSS page 76 © Jonathan Cazalas
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 77 © Jonathan Cazalas
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 78 © Jonathan Cazalas
Tutorial 4 Website
Kathy’s proposed printed output:
-
Tutorial 4: Creating Special Effects with CSS page 79 © Jonathan Cazalas
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 80 © Jonathan Cazalas
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: ...
or where type is the type of media used by the style sheet
-
Tutorial 4: Creating Special Effects with CSS page 81 © Jonathan Cazalas
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 82 © Jonathan Cazalas
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 83 © Jonathan Cazalas
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 84 © Jonathan Cazalas
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 85 © Jonathan Cazalas
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 86 © Jonathan Cazalas
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 87 © Jonathan Cazalas
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 88 © Jonathan Cazalas
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 89 © Jonathan Cazalas
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 90 © Jonathan Cazalas
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 91 © Jonathan Cazalas
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 92 © Jonathan Cazalas
Hiding Elements
Comparing Visibility and Display Styles
-
Tutorial 4: Creating Special Effects with CSS page 93 © Jonathan Cazalas
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 94 © Jonathan Cazalas
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 sans-serif font
We add the following style declarations in the print.css file:
-
Tutorial 4: Creating Special Effects with CSS page 95 © Jonathan Cazalas
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 96 © Jonathan Cazalas
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 97 © Jonathan Cazalas
Brief Interlude: Human Stupidity
-
Tutorial 4: Creating Special Effects with CSS page 98 © Jonathan Cazalas
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 99 © Jonathan Cazalas
Tutorial 4 Website
Kathy likes the printout! but... 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
she‘s kinda picky huh
-
Tutorial 4: Creating Special Effects with CSS page 100 © Jonathan Cazalas
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 101 © Jonathan Cazalas
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 102 © Jonathan Cazalas
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 103 © Jonathan Cazalas
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 104 © Jonathan Cazalas
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 105 © Jonathan Cazalas
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 106 © Jonathan Cazalas
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 107 © Jonathan Cazalas
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 108 © Jonathan Cazalas
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 109 © Jonathan Cazalas
Tutorial 4 Website
We add the following declarations to the print.css style sheet:
-
Tutorial 4: Creating Special Effects with CSS page 110 © Jonathan Cazalas
Tutorial 4 Website – Result
-
Tutorial 4: Creating Special Effects with CSS page 111 © Jonathan Cazalas
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 112 © Jonathan Cazalas
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 113 © Jonathan Cazalas
Tutorial 4: Creating Special Effects with CSS
WASN’T THAT
DYNAMITE!
-
Tutorial 4: Creating Special Effects with CSS page 114 © Jonathan Cazalas
Daily Demotivator
-
Computer Science Department University of Central Florida
Tutorial 4: Creating Special Effects with CSS
COP 3175 – Internet Applications
Tutorial 4:�Creating Special Effects with CSSObjectivesObjectivesTutorial 4 Web SiteWorking with Selector PatternsWorking with Selector PatternsWorking with Selector PatternsWorking with Selector PatternsWorking with Selector PatternsWorking with Selector PatternsWorking with Selector PatternsWorking with Selector PatternsWorking with Selector PatternsWorking with Selector PatternsUsing Selector PatternsTutorial 4 Web SiteTutorial 4 WebsiteTutorial 4 Website – ResultTutorial 4 Website – ResultApplying Styles to ListsApplying Styles to ListsApplying Styles to ListsApplying Styles to ListsApplying Styles to ListsTutorial 4 WebsiteTutorial 4 WebsiteTutorial 4 Website – ResultApplying Styles to ListsApplying Styles to ListsTutorial 4 WebsiteWorking with ClassesWorking with ClassesWorking with ClassesWorking with ClassesTutorial 4 WebsiteTutorial 4 WebsiteTutorial 4 Website – ResultBrief Interlude: Human StupidityTutorial 4 WebsiteUsing Pseudo-Classes �and Pseudo-ElementsUsing Pseudo-Classes �and Pseudo-ElementsUsing Pseudo-Classes �and Pseudo-ElementsTutorial 4 WebsiteTutorial 4 Website – ResultTutorial 4 WebsiteUsing Pseudo-Classes �and Pseudo-ElementsUsing Pseudo-Classes �and Pseudo-ElementsTutorial 4 WebsiteTutorial 4 Website – ResultTutorial 4 WebsiteTutorial 4 WebsiteTutorial 4 WebsiteTutorial 4 WebsiteTutorial 4 WebsitePositioning Objects with CSSPositioning Objects with CSSPositioning Objects with CSSPositioning Objects with CSSPositioning Objects with CSSTutorial 4 WebsiteTutorial 4 Website – ResultTutorial 4 WebsiteWorking with Overflow �and ClippingWorking with Overflow �and ClippingTutorial 4 WebsiteTutorial 4 Website – ResultWorking with Overflow �and ClippingWorking with Overflow �and ClippingStacking ElementsStacking ElementsStacking ElementsStacking ElementsTutorial 4: Creating Special Effects with CSSDaily DemotivatorTutorial 4:�Creating Special Effects with CSSObjectivesTutorial 4 WebsiteTutorial 4 WebsiteTutorial 4 WebsiteWorking with Different MediaWorking with Different MediaWorking with Different MediaWorking with Different MediaWorking with Different MediaWorking with Different MediaWorking with Different MediaTutorial 4 WebsiteTutorial 4 WebsiteTutorial 4 WebsiteHiding ElementsHiding ElementsHiding ElementsHiding ElementsTutorial 4 WebsiteTutorial 4 WebsiteTutorial 4 Website – ResultBrief Interlude: Human StupidityTutorial 4 �WebsiteTutorial 4 WebsiteUsing Print StylesUsing Print StylesUsing Print StylesUsing Print StylesWorking with Page BreaksWorking with Page BreaksWorking with Page BreaksWorking with Page BreaksTutorial 4 WebsiteTutorial 4 WebsiteTutorial 4 Website – ResultSummarySummaryTutorial 4: Creating Special Effects with CSSDaily DemotivatorTutorial 4:�Creating Special Effects with CSS