Maureen Smith Professor Tutorial 4 Lesson Plan Review Session 41 Session 42 Session 43 Review Objectives Work with CSS selectors Create styles for lists Create and apply class styles Create a rollover effect ID: 724039
Download Presentation The PPT/PDF document "Creating Special Effects with CSS" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1
Creating Special Effects with CSS
Maureen SmithProfessorTutorial 4Slide2
Lesson Plan
ReviewSession 4.1Session 4.2Session 4.3ReviewSlide3
Objectives
Work with CSS selectorsCreate styles for listsCreate and apply class stylesCreate a rollover effect
Create a drop cap using a pseudo-element
Manage page layout with CSS
Work with overflow and clipping styles
Create stacked objectsSlide4
Apply styles to various media
Hide elements from printingCreate and apply printer stylesCreate and prohibit page breaks for printingSlide5
Working with Selector Patterns
Kathy has created a basic page about scrapbookingOpen start.htmExamine 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 documentSlide6
Contextual selectors
So far you know about styles in which the style selector applies to an element or group of elements, likeb
{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 selectorsSlide7
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}Slide8
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 belowSlide9
Attribute Selectors
Might need to select elements based on their attribute valuesa {color: blue}Would display link text in blue, but would make no distinction between <a> tags used to mark links and <a> tags used to mark document anchors
HTML makes distinction based on
href
attribute being present or absentSlide10
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 mixedSlide11
Applying a selector pattern
Will now apply selector patterns to Getting Started documentWill 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.cssSlide12
H2 element nested within Basic Materials box has been modified under the new style, but h2 elements located elsewhere retain original appearanceSlide13
Applying styles to lists
Web page links are in an unordered list with bulletsWill remove bullet markersCan apply one of the many CSS list stylesSlide14
Choosing a list style type
To specify a list markerlist-style-type: typeSee 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 outlineSlide15
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 scraps2cssSlide16
Defining the list position and layout
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 listSlide17
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 25Can combine all the CSS styles for lists into a single style attribute
list-style: type
url
(
url
) positionSlide18
Working with classes
List of links covers three main areas: pages that teach scrapbooking, pages that sell products, and pages that provide informationAlthough 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 beginsSlide19
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 characteristicNow create a style for the list of linksSlide20
Using pseudo-classes and pseudo-elements
Most browsers underline linked text by defaultMight be difficult to readLinks can be underlined only when mouse hovers
Called a
rollover effect
Kathy would like that doneSlide21
Creating a link rollover
Created using pseudo-classesClassification of an element based on its current status or use in documentOne 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 elementSlide22
Let’s remove underlining and if mouse is hovering, change link text to appear in black and underlinedSlide23
Creating a drop cap
First line should be small caps and first letter should be increased in size and displayed as a drop capSee Figure 4-20A paragraph element is part of document tree and is marked with the <p> 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 lineSlide24
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 capsIncrease 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 aroundSlide25
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 pageSlide26
Generating text with pseudo-elements
You can use CSS to insert text using the before and after pseudo-elementsThe before places text directly before the element\The after places text directly afterSlide27
Positioning objects with css
Every month Kathy wants to highlight a scrapbook page that displays some noteworthy featuresSee Figure 4-23
Add callouts that highlight certain portions of the scrapbooking sample; place near the feature that it highlights
See Figure 4-24Slide28
See Figure 4-25
for text of the 3 callout notesInsert each in div containers placed within main sectionSet 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 notesSlide29
The position style
Position the notes at appropriate locationsPositioning was one of the first enhancements to original CSS1 specsKnown 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 usedSlide30
Absolute positioning
Enables you to place an element at specific coordinates either on a page or within a containing elementPosition: 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 flowSlide31
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 positioningSlide32
Relative positioning
Used to move an element relative to its default positionposition: relative; left: 10px; top: 50pxDoes 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 0Slide33
Fixed and inherited positioning
An element placed with absolute/relative positioning scrolls with rest of documentCan be fixed at specific spot by setting value of position style to fixedNot 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 notesSlide34
Working with overflow and clipping
Reducing height of each note by lowering value of its height attribute will not meet her needsHeight of each note expands to accommodate its contentWould have to define how browser should handle a situation where content overflows
overflow: type
Where type is visible, hidden, scroll, or autoSlide35
Clipping an element
Closely related to overflow style is clip styleAllows you to define a rectangular region through which element’s content can be viewedAnything 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 elementSlide36
Limiting width and height
Might want to limit an element’s height/widthOften desirable when you’ve specified the size using relative units that can expand/contract depending on size of browser window—might be difficult to readCan specify an element’s minimum or maximum height or widthSlide37
Stacking elements
Positioning elements can sometimes lead to objects that overlap each otherBy default, elements that are formatted later are stacked on top of earlier elementsAnd 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 autoSlide38
Working with different media
Some of the pages don’t print wellUsers would prefer to print only the sample, without the header, links list, and footerWould 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 outputSlide39
Media types
By default, a style sheet is applied to all devicesEach device determines how best to match the style to its own requirementsWhen 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-43Slide40
The @media rule
Not always convenient to maintain several style sheets for same documentCan 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 typeSlide41
Media groups
Distinction among different media types not always immediately clearHow 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 propertiesSlide42
CSS uses
media groups to describe how different media devices render contentContinuous or pagedVisual, 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 categorizedSlide43
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 mediaSlide44
Hiding elements
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 pageSlide45
See Figure 4-47
to compare visibility and display stylesKathy still wants notes to appear on a separate sheetWill have to place a page break in middle of document (supported in printed output and for projection devices)Slide46
Using print styles
CSS defines printed pages by extending the box model to incorporate the entire page in a page boxSee 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 pageSlide47
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 unitsSlide48
Page pseudo-classes and named pages
If you pages will require several pages when printed, might want to define different styles for different pagesDo this with pseudo-classes that reference specific pagesSlide49
Setting the page size
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
landscapeSlide50
Working with page breaks
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 stylepage-break-after: type
page-break-before: type
The type style attribute has following values:
always
avoid
leftSlide51
right
autoinheritSlide52
Preventing a page break
Sometimes you want to keep printer from inserting page breaks inside an elementpage-break-inside: typewhere 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!Slide53
Working with widows and orphans
Will be situations where a printer will have to divide contents of an element across 2 pagesCan control occurrence of widows and orphansA
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:Slide54
widow: value
orphan: valuewhere 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