Creating Special Effects with CSS - PowerPoint Presentation

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