jozef goetz, 2012 1 © 2011-13 pearson education copyright (c) 2009 prentice-hall. all rights...

Jozef Goetz, 2012

1

© 2011-13 Pearson EducationCopyright (c) 2009 Prentice-Hall. All rights reserved.

expanded by J. Goetz, 2012

Jozef Goetz, 2012

2

Learning Outcomes In this chapter, you will learn about:

Code relative hyperlinks to Web pages in folders within a Web site

Configure a hyperlink to a named anchor internal to a Web page

Configure images with CSS sprites

Configure three-column page layouts using CSS

Configure CSS for both screen and print display

Configure CSS for mobile display

Utilize CSS3 media queries to target mobile devices

Jozef Goetz, 2012

3Creating Links

Opening Tag Closing Tag

Text that will be highlightedURL

Jozef Goetz, 2012

4

4

HTML/XHTML <a> tag The anchor tag Used to specify a hypertext reference (href) to a

web page you want to display. The text between the <a> and </a> is displayed on

the web page href Attribute

used to indicate the document to link to

Syntax:<a href=“URL”>text</a>

Absolute link<a href=“http:// yahoo.com”>Yahoo</a>

indicates the protocol http:// being used Relative link<a href=“index.htm”>Home</a>

Jozef Goetz, 2012

5

5 5Copyright (c) 2006 Prentice-Hall. All rights reserved.

Effects of <a>, href, and title

Tool tip generated by title="Home Page Link"

Displayed text generated by text between the <a> tag and the </a> tag

<a href="home.htm" title="Home Page Link">Click here to go to our home page!</a>

Mouse pointer changes when hovered over the link

When user clicks, the page opened will be based on href="home.htm"

Jozef Goetz, 2012

6

6

More on Relative Linking

Absolute URLs include a full path - both the domain name + the file name

Domain name – the computer's unique name on the Internet

Relative URLs – include only the file name, not the domain name

Refer to files to the current file (position) on the same Web server

Therefore URL refers to the same domain name

Jozef Goetz, 2012

7

7

Anatomy of a URL URL - Uniform Resource Locator URLs are global addresses of documents and other

resources on the Web

Parts of URLs there are three parts:

protocol - the way the page is accessed host name ( = Web server name + domain

name) – the system on which the page is stored

directory & filename - location of the page on the host system

http://www.w3.org/TR/html4/intro/intro.html

protocol directory and filename

host name

Jozef Goetz, 2012

8

8

More on Relative Linking

Relative pathnames point to files based on their

locations relative to the current file (position.)

To specify relative pathnames link to Web pages within your site use UNIX-style pathnames regardless of the

system directory names are separated with a forward

slash (/) use two dots (..) to refer to the (parent)

directory above the current directory

From the groomer directory: <a href="contact.htm">Contact</a> <a href="products/collars.htm">Collars</a>

//now from the collars.htm level <a href="../index.htm">Home</a> <a href="../services/bathing.htm">Dog

Bathing</a>

<= Relative links from the homepage: index.htm

Jozef Goetz, 2012

9

9

Linking Local Pages Using Relative and Absolute Pathnames

Examples of Relative pathnames: href=“index.html” href=“resumes/jaden.html” href=“jobs/software/

javaprogrammer.html” href=“../news/company.html” href=“../../products/widget.html” href=“../../../officers.html”

Jozef Goetz, 2012

10

10


Absolute pathnames point to files based on their absolute location on the file system (root) or to other websites

begin with a forward slash (/)

Absolute pathnames: href=“/index.html” href=“/resumes/jaden.html” href=“/d/jobs/software/javaprogrammer.html”

Jozef Goetz, 2012

11

11


Which should you use? Relative pathnames:

use to link between your documents

can move the site from one server to another and the links will still work -- portable

easier to maintain

Absolute pathnames easier on complicated sites but they are not portable

Jozef Goetz, 2012

12

12

Links to Other Documents on the Web

Linking to remote documents these are documents that are not on

the system which you are currently working

use the URL of the remote sitehttp://the.url.com/of/the/remote/

page.html

Jozef Goetz, 2012

13

13

Opening a Link in a New Browser Window

The target attribute can be used on the anchor tag to open a link in a

new browser window.

<a href="http://yahoo.com" target="_blank">Yahoo!</a>

HOP 7.2

Jozef Goetz, 2012

14Linking to Specific Places Within Documents

Anchors are special places that you can link to inside documents.

Soft Fruits

Please choose a subtopic:

• Strawberries

• Cane Fruits

• Blackberries

• Raspberries

• Loganberries

• Bush Fruits:

•Blueberries

•Huckleberries

Softfruits.htmlBlackberries

Blackberries grow on canes

Blueberries

Blueberries grow on bushes in colder climates

Strawberries

Strawberries are an herbaceous plant

Softfruits.html

Jozef Goetz, 2012

15


This line has<a href="#top">Back To Top</a>

Clicking here takes you to the top of the page(no need for an anchor named "top"

<a name=“top” id=“top”></a>

HTML Linking to Fragment Identifiers

Jozef Goetz, 2012

16

16

HTML/XHTML Internal Links using the <a> tag

A link to a part of a web page Also called bookmarks, named fragments, named anchors

2 components:1. Establish target – named fragment:

identifies a bookmark or named fragment of a web page. This requires two attributes: the id attribute (for HTML/XHTML)

and the name (for Netscape 4) attribute.

<a name=“top” id=“top”></a> Or: “a” can be h1 or <div id=“content”>

2. Reference target - anchor tag (pointer) :links to the bookmark or named fragment of a web page.

This uses the href attribute

<a href=“#top”>Back to Top</a> Or: <a href=“#content”>Skip to content</a>

Jozef Goetz, 2012

17

17

Linking to Specific Places Within Documents – Internal Links Creating anchors and linking to them

creating an anchor is similar to creating a link

the <a> tag is used

the attribute “name” (or “id” ) is used instead of “href”

the “name” (or “id” ) attribute takes a key word to uniquely identify the anchor on the page

anchors require text between the opening and closing tags

Jozef Goetz, 2012

18


Effects of Within-Page Linking

This line has<a href="#duck">Can a duck fly if it's wet?</a>

This line has<a name="duck">Can a duck fly if it’s wet?</a>

Clicking here takes you to the "duck" line

Jozef Goetz, 2012

19

19 19

Creating and Linking to Within-Page Targets1. The <a> tag's name attribute

Creates a target at the location of the anchor tag Commonly used on longer Web pages Syntax:

<a name="specific choice">link text</a> Example anchors

<a name=“education”>Education</a> <a name=“dinner”>Dinner</a>

2. The pound (#) symbol in an href attribute References one of the named anchor tags

Value after the pound sign must be identical to name of an anchor Syntax: <a href=“#specific choice">link

text</a>

Jozef Goetz, 2012

20

20

Linking to Specific Places on another Documents/Website

1. Linking to anchors in the same page use the hash mark (#) and the anchor name only

<a href=“#dinner”>What’s for dinner?</a>

2. Linking to anchors on another page use the same form as you would to link to the page add a hash mark (#) and the name of the anchor at the end

<a href=“filename.html#education”>Education</a>

3. Linking to anchors on another website by appending a hash mark (#) and name value

<a href=“URL/filename.html#name”>What’s for dinner?</a>

Jozef Goetz, 2012

21

21

HOP 7.1 start: starter1.html output: favorites.html

Jozef Goetz, 2012

22

22

Remainder: Email Links using the <a> tag

An e-mail link will automatically launch the default mail program configured for the browser:

<a href=“mailto:[email protected]”>[email protected]

</a>

Jozef Goetz, 2012

23


Links in HTML/XHTML 2.0

In HTML/XHTML 1.x, href attributes are confined to anchor tags Example, to make a header with a link requires: <a href="http://webdesign.about.com/"><h2>Web

Design at About</h2></a>

In HTML/XHTML 2.0, any tag can include an href attribute

Example, to make a header with a link: <h2 href="http://webdesign.about.com/">Web

Design at About</h2> No anchor tag necessary

Jozef Goetz, 2012

24

24

HOP 7.2 start: favorites.htm output: target.html

target=“_blank”- the page is open in a new window or tab if

it is put in <a>

Jozef Goetz, 2012

25

HTML5 Block Anchor Configure block display elements (e.g. h1,

div or paragraph) within a hyperlink

<a href="http://www.w3.org/TR/html-markup">

<h1>HTML5 Reference</h1>

<p>Bookmark this site for a handy HTML5 reference.</p>

</a>

25

Jozef Goetz, 2012

26Telephone & Text Message Hyperlinks

Telephone Scheme<a href="tel:888-555-5555">Call 888-555-5555</a>Many mobile browsers will initiate a phone call

when the hyperlink is clicked.

SMS Scheme<a href="sms:888-555-5555">Text 888-555-5555</a>Many mobile browsers will initiate a text message

to the phone number when the hyperlink is clicked.

26

Jozef Goetz, 2012

27CSS Sprites HOP 7.3 Sprite

an image file that contains multiple small graphics

+’s: saves download time b/c Reduced bandwidth Reduced the # of http request by the

browser Quick display of individual images in the

sprite

27

Jozef Goetz, 2012

28CSS Sprites HOP 7.3

28

Jozef Goetz, 2012

29Checkpoint 7.1 p.619

1. Describe a reason to organize the files (images, media, file function - Web page or scripts, Web site sections – products, services etc in a Web site using folder and subfolders.

Increase productivity when a project team is developing a large Web site, easier to find different files types

2. State a reason to use an unordered list to configure navigation links.

A menu is a list of links, so it is semantically correct to configure using an unordered list. This technique is popular among Web developers

Jozef Goetz, 2012

30Checkpoint 7.1 visit p.6192. Which attribute configures a

hyperlink to open the file in a new browser window or tab?

3. State an advantage of using CSS sprites in a website

Reduced bandwidth Reduced the # of http request by the browser Quick display of individual images in the sprite

Jozef Goetz, 2012

31Three Column Page Layout

Often a web page layout will consist of a header across (logo) the top of the page with three columns below:

navigation - left column => float:left sidebar – right column => float:right and content – center column => occupies the room after

the left and right columns float If you are thinking about this layout as a series of boxes —you’re

thinking along the right lines for configuring pages using CSS!

HOP 7.4

Jozef Goetz, 2012

32

32

Three Column Layout

container sets default background color, text color, and an minimum width

Left column navigation float: left; width:150px;

Right column content float: right; width:200px;

Center column – uses the remaining screen room available room after the floating columns display

margin: 0 200px 0 160px; Footer – clears the float

clear:both;

Jozef Goetz, 2012

33Three Column Page Layout - edition5

HOP 7.3in wildflowers3 folder

=>no bullets

=>no underlines

=>same background color

Jozef Goetz, 2012



.navBar{ list-style-type:none; margin-top:20px;}.navBar a {text-decoration:none; font-size:1.2em;

}.navBar a.:link {color:#006600; background-color:#eeeeee;}.navBar a.:visited {color:#003300; background-color:#e003300;}.navBar a:focus { color: #000000; background-color:#ffffff;}

.navBar a.:hover {color:#cc66cc; background-color:#cc66cc;}.navBar a:active { color: #000000; }

.sideimages {margin:30px;}

p { margin:20px;}

h3 {color:#cc66cc; background-color:#ffffff;}

#floatright {margin:10px; float:right;}

h4 {padding-bottom: 2px; border-bottom:1px solid #000000; margin:10px; color:#cc66cc; background-color:#eeeeee;}

.newsitem {font-size:.9em; margin:10px;}

</style>

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD HTML/XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/HTML/XHTML1/DTD/HTML/XHTML1-transitional.dtd"><html xmlns="http://www.w3.org/1999/HTML/XHTML"><head><title>Door County Wildflowers</title>

<style type="text/css">body {margin:0; background-color:#ffffff;}

#container { min-width:700px; font-family:Verdana, Arial, sans-serif; background-color:#eeeeee; color:#006600;}

#logo{ color: #cc66cc; background-color:#eeeeee; font-size:2.5em; border-bottom: 2px solid #000000; height:100px; background-image:url(showybg.jpg); padding-left:20px;}

h1 {margin-top:0; font-size:3em; }#left { float:left; width:150px;}

#right{float:right; width:200px; }

#center {margin:0 200px 0 150px; padding: 1px 10px 20px 10px; background-color:#ffffff; color:#006600;}.footer { font-size:.70em; text-align:center; clear:both; background-color:#ffffff; color:#006600; padding-top:10px;

}

=>no bullets

=>no underlines


Jozef Goetz, 2012



=>no bullets

=>no underlines


Jozef Goetz, 2012



Jozef Goetz, 2012

37CSS Styling for Print

Create an external style sheet with the configurations for browser display.

Create a second external style sheet with the configurations for printing.

Connect both of the external style sheets to the web page using two <link> tags.

<link rel="stylesheet" href="wildflower.css" type="text/css" media="screen" /><link rel="stylesheet" href="wildflowerprint.css" type="text/css" media="print" />

Jozef Goetz, 2012


starters: page1.html, wildflower.css output: wildflower.css, wildflowerprint.css and page1.html

HOP 7.5

/* remove nav*/

/*added */

wildflowerprint.css

wildflower.css

/*added */

/* remove #header a */

Jozef Goetz, 2012


#contentlogo { background-color:#e8b9e8;font-size:larger;padding:10px;color:#000000;

}#imagelogo { float:right;

margin:0px 0px 5px 5px;border:solid;

}.nav { padding:5px;

background-color:#e8b9e8;color:#000066;text-decoration:none;font-family:Verdana, Arial,

sans-serif;text-align:center;

}.content { font-family:Verdana,Arial,sans-serif;

margin:10px;}.footer { font-size:xx-small; text-align:center;}


HOP 7.5

/* remove nav*/

/*added */

wildflowerprint.css

wildflower.css

/*added */

Jozef Goetz, 2012

40Print Preview using CSS – removed nav.

#contentlogo { background-color:#e8b9e8;font-size:larger;padding:10px;color:#000000;

}#imagelogo { float:right;

margin:0px 0px 5px 5px;border:solid;

}.nav { padding:5px;

background-color:#e8b9e8;color:#000066;text-decoration:none;font-family:Verdana, Arial,

sans-serif;text-align:center;

}.content { font-family:Verdana,Arial,sans-serif;

margin:10px;}.footer { font-size:xx-small; text-align:center;}


HOP 7.5

/* remove nav*/

/*added */

wildflowerprint.css

wildflower.css

/*added */

Jozef Goetz, 2012

41Print Styling Best Practices

Hide non-essential contentExample:

#nav { display: none; }

Configure font size and color for printingUse pt font sizes, use dark text color e.g. #000000

Control page breaks p.600page-break-before or page-break-after:Example: .newpage { page-break-before: always; }

Print URLs for hyperlinks Property content alone with the :after and :before pseudo elements to generate contentExample: #sidebar a:after { content: " (" attr(href) ") "; } /*attr(x) returns the value of the HTML attribute */ 41

Jozef Goetz, 2012

42

CSS Styling for the Mobile Web eMarketer.com predicts 134.3 million mobile

Internet users by 2013 Three Approaches to Mobile Web:

1. Develop a new mobile site with a .mobi TLD. Visit http://jcp.com to see in practice

2. Create a separate Web site hosted within your current domain targeted for mobile users. e.g. see next page www.m.whitehouse.gov

3. Use CSS to create a style sheet to configure your current Web site for display on mobile devices and desktop display

<link href="mobile.css" rel="stylesheet" type="text/css" media="handheld" />

- the attribute handheld is not well supported

Jozef Goetz, 2012

43

Mobile Web Limitations Small Screen Size

Low bandwidth, slow connection Large images are not displayed

Limited fonts

Limited color

Awkward controls single column Mostly text displayed Hyperlinks displayed under the header

Lack of Flash support

Limited processor and memory

Cost per kilobyte

Jozef Goetz, 2012

44Design Best Practice for Mobile Web p.297-9

One column design

Avoid floats, tables, frames

Descriptive page title

Descriptive heading tags

Optimize images

Descriptive alt text for images

Eliminate unneeded images

Navigation in lists

Provide “Skip to Content” hyperlink

Provide “Back to Top” hyperlink

Notice the overlap between between these techniques and designing to provide for accessibility?

Resolution: from 320x240 BlackBerry Pearl to 480x800 Android HTC Desire, Windows HTC Pro, to 640x690 iPhone4

Jozef Goetz, 2012

45Viewport Meta Tag Default action for most mobile

devices is to zoom out and scale the web page

Viewport Meta Tag Created as an Apple extension to

configure display on mobile devices

Configures width and initial scale of browser viewport p.300

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 45

Jozef Goetz, 2012

46

CSS3 Media Queries

Media Query Determines the capability of the mobile

device, such as screen resolution

Directs the browser to styles configured specifically for those capabilities

Example:<link href="lighthousemobile.css" rel="stylesheet"

media="only screen and (max-device-width: 480px)">

46

Jozef Goetz, 2012

47HOP 7.6

lighthousemobile.css

Jozef Goetz, 2012

48HOP 7.6

lighthousemobile.css

Jozef Goetz, 2012

49Checkpoint

1. Describe a design consideration when configuring a web page for mobile display.

2. True of False. The media="handheld" attribute reliably targets mobile devices.

CSS media queries are used instead.

49

Jozef Goetz, 2012

50

50

Summary

This chapter introduced you to a variety of topics related to hyperlinks, lists, layout and designing for the mobile web.

Midterm

Jozef Goetz, 2012

51Pr. Ch7 Prime Properties – Configure the website to display on mobile devices

Jozef Goetz, 2012

52CSS Pseudo-classes

An addition to conventional style classes, the CSS2 standard defines pseudo-classes, which allow you to define the display style for certain tag states.

Pseudo-classes are like regular classes, with 2 notable differences:

they are attached to the tag name with a colon instead of a period, and

they have predefined names, not arbitrary ones you may give them.

<style type=”text/css>a:link {color:#FF0000 }a:hover {text-decoration:none; color:#000066 }</style>

Jozef Goetz, 2012

53CSS “buttons”

ed4<style type="text/css">.button { border: 2px inset

#cccccc; width: 100px; padding: 3px 15px; color: #ffffff; background-color: #006600; font-family: Arial, Helvetica, sans-

serif; font-size: 1.2em; font-weight: bold; text-align: center; text-decoration:none;}a.button:link { color : #FFFFFF;}a.button:visited { color : #cccccc;}a.button:hover { color : #66cc33; border:2px outset #cccccc;}

a. button:active {color:#DDA0DD; border:2px outset #000000;}

</style>

<div align="center"><h2>CSS Buttons!</h2><a href="index.htm" class="button">Home</a><a href="products.htm" class="button">Products</a><a href="sevices.htm" class="button">Services</a><a href="contact.htm" class="button">Contact</a><a href="about.htm" class="button">About</a><div>

+’s: save the bandwidth used by graphics

=>attributes p.613slide 32

using an anchor tag selector with the button class and pseudo-classes

HOP – 7.2b (link2.htm) uses embedded CSS to configure the

1. link2. visited3. hover

pseudo-classes for anchor tag.

=>attributes p.613

=>attributes p.617

Configuration of the pseudo-classes for use with class button

This example produces a button look.

Jozef Goetz, 2012

54CSS “buttons”

ed4<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD

HTML/XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/HTML/XHTML1/DTD/HTML/XHTML1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/HTML/XHTML">

<head><title>CSS Pseudo-class Example 3</title><style type="text/css">.button { border: 2px inset #cccccc; padding: 3px 15px; width: 100px; color: #FFFFFF; background-color: #006600; font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold; text-align: center; text-decoration:none;}

a.button:link { color : #FFFFFF; }a.button:visited { color : #CCCCCC; }a.button:hover { color : #66CC33; border:2px outset #cccccc;} </style></head>

<body><div align="center"> <h2>CSS Buttons!</h2> <a href="index.htm" class="button">Home</a> <a href="products.htm" class="button">Products</a> <a href="sevices.htm" class="button">Services</a> <a href="contact.htm" class="button">Contact</a> <a href="about.htm" class="button">About</a><p>Visit <a href="http://yahoo.com">Yahoo!</a>.</p></div></body></html>

Full implementation

HOP – 7.2b (link2.htm)

Remember no space between a.Button: and link

Jozef Goetz, 2012

55CSS “buttons”

ed5<style type="text/css">#button a { border: 2px inset

#cccccc; width: 100px; padding: 3px 15px; color: #ffffff; background-color: #006600; font-family: Arial, Helvetica, sans-

serif; font-size: 1.2em; font-weight: bold; text-align: center; text-decoration:none;}#button a :link { color : #FFFFFF;}#button a :visited { color : #cccccc;}#button a :hover { color : #66cc33; border:2px outset #cccccc;}

#button a :active {color:#DDA0DD; border:2px outset #000000;}

</style><h2>CSS Buttons!</h2><div id=" button"><a href="index.htm“>Home</a><a href="products.htm“>Products</a><a href="sevices.htm">Services</a><a href="contact.htm”>Contact</a><a href="about.htm”>About</a><div>

+’s: save the bandwidth used by graphics

=>attributes p.613slide 32

using an anchor tag selector with the button class and pseudo-classes

HOP – 7.2b (link2.htm) uses embedded CSS to configure the



=>attributes p.613

=>attributes p.617

Configuration of the pseudo-classes for use with class button

This example produces a button look.

Jozef Goetz, 2012

56HOP – 7.2c CSS “buttons” ed4

Yahoo link retains the default browserappearance and behavior – b/c no CSS is applied

HOP – 7.2c (link3.htm) usesthe default browser for Yahoo

Jozef Goetz, 2012

57HOP – 7.2c CSS “buttons” ed5

Yahoo link retains the default browserappearance and behavior – b/c no CSS is applied

HOP – 7.2c (link3.htm) usesthe default browser for Yahoo

Jozef Goetz, 2012

58CSS Pseudo-classes

Pseudo-classes (predifined names) uses a colon (:) to apply the pseudo class for the anchor tag

need to be in the following order (the mnemonic is lovehate): Link – default state for a link (anchor tag) Visited – a hyperlink that has been visited focus – triggered when the hyperlink has focus Hover – triggered when the mouse is

currently over the hyperlink Active – triggered when the hyperlink is being

clicked

<style type=”text/css>a:link {color:#FF0000 }a:hover {text-decoration:none; color:#000066 }</style>

Jozef Goetz, 2012

59HOP – 7.2a Embedded CSS

HOP – 7.2a (link1.htm) uses embedded CSS to configure the



Pseudo-classes to create interactive hyperlinks

Jozef Goetz, 2012

60CSS border-Styling CSS “buttons”

{border: border-width, border-style, border-color;…}

CSS border-style values

look at

=>attributes p.654

Jozef Goetz, 2012

61Navigation Layout Using Lists

Navigation link areas are actually semantically “lists" of links

Some web design gurus argue that Navigation links should be configured using HTML/XHTML list elements

Use the list-style-image property to configure the “bullet" list-style-image:url(arrow.gif).

Jozef Goetz, 2012

62

62

CSS & HTML/XHTML Navigation List

CSS:.navBar { text-decoration:none; list-style-image:url(arrow.gif);

HTML/XHTML:<ul class="navBar">

<li><a class="navBar" href="home.html">Home</a></li>

<li><a class="navBar" href="spring.html">Spring</a></li>

<li><a class="navBar" href="summer.html">Summer</a></li>

<li><a class="navBar" href="fall.html">Fall</a></li><li><a class="navBar"

href="winter.html">Winter</a></li></ul>

twocolumn1.html

Jozef Goetz, 2012

63CSS & HTML/XHTML Vertical Navigation by List ed4

gurus say: better fit without paragraphs and display:block property

!!! gurus say: better fit without paragraphs and display:block property.

It is semantically correct the menu using an unordered list

it is trend among Web developers

Jozef Goetz, 2012

64CSS & HTML/XHTML Vertical Navigation by List ed5

gurus say: better fit without paragraphs and display:block property

!!! gurus say: better fit

without both paragraphs or using display:block property on anchor tags

It is semantically correct the menu using an unordered list

it is trend among Web developers

Jozef Goetz, 2012

65CSS & HTML/XHTML Navigation List

CSS:.nav { padding: 5px; background-color:#cc66cc; color:#000066;

font-family:Verdana, Arial, sans-serif; text-align:center; } .nav li { display:inline; list-style-type:none; } /* none to

remove bullets, <li> within

the nav class */a.nav { text-decoration:none; } /* no underlined and

the anchor “a” uses the nav class */

HTML/XHTML:<ul class="nav">

<li><a class="nav" href="home0.html">Home</a></li>

<li><a class="nav" href="spring.html">Spring</a></li>

<li><a class="nav" href="summer.html">Summer</a></li>

<li><a class="nav" href="fall.html">Fall</a></li><li><a class="nav"

href="winter.html">Winter</a></li></ul>

home0.html

Jozef Goetz, 2012

66CSS & HTML/XHTML Horizontal Navigation using List

#splashlogo {background-color:#cc66cc; color: #000000; padding:5px; position:absolute; z-index:4; top:210px; left:100px; border: 1px solid #000000;}#contentlogo{background-color:#cc66cc; color: #000000; font-size:larger; padding:10px;

}

#imagelogo {float:right; margin: 0px 0px 5px 5px;

border: solid;}

#trillium {position:absolute; z-index:3; left:220px; top:80px;}#pls {position:absolute; z-index:2; left:420px; top:130px;}#yls {position:absolute; z-index:3; left:260px; top:255px;}#enter {position:absolute; left:500px; top:350px; font-family:Verdana,sans-serif;}

.nav li {padding: 5px; background-color:#cc66cc; color:#000066; text-decoration:none; font-family:Verdana, Arial, sans-serif; width:90px; text-align:center; display:inline; list-style-type:none;}a.nav {text-decoration:none;}

a.nav:link {color:#000066; background-color:#cc66cc;}a.nav:visited {color:#000000; background-color:#cc66cc;}a.nav:hover {color:#ffffff; background-color:#cc66cc;}.content {font-family:Verdana,Arial, sans-serif; margin:10px;}.floatleft {float:left;}.contentlink{ display:block; text-decoration:none;}.content1 {height:150px; text-align:center;}

.footer {font-size:xx-small; text-align:center;}

=>no bullets

home0.htm wildflower0.css

=>for the li element

Jozef Goetz, 2012

67CSS & HTML/XHTML Horizontal Navigation using List

=>no bullets

home0.htm wildflower0.css

Jozef Goetz, 2012

68

This “cascade” applies the styles in order from outermost (Browser Defaults) to innermost (actual HTML/XHTML coded on the page). This way site-wide styles can be configured

but overridden when needed by more granular (or page specific) styles.

The Cascade

Jozef Goetz, 2012

69

About Cascading When more than one style

approach is used there is a precedence for which style gets used external styles are applied

first

embedded styles are applied next and override previously defined styles where applicable

inline styles are applied last and override previously defined styles where applicable

The style rules themselves follow rules of precedence

The most local style take precedence over other style

Jozef Goetz, 2012

70

About Cascading

create site.css

HOP 7.5

Create mypage1.html.css

Jozef Goetz, 2012

71

71

Checkpoint 7.3

1. State an advantage of using CSS to style for print.

2. Describe how to choose whether to configure an HTML/XHTML tag, create a class, or create an id when working with CSS.

Jozef Goetz, 2012

72Checkpoint 7.33. List the following terms in the order that the

properties and attributes are applied when using CSS.• External styles• Embedded styles• Inline styles• HTML/XHTML attributes

4. You are using an external style sheet to configure all the pages on a web site. Describe your strategy when you encounter a web page that needs slightly different styling from the other pages.

How could you use external, embedded, or inline

styles in this situation?

You may consider configuring special classes for use and add to the external style sheet or use embedded style on the page