2. Jozef Goetz, 2012 1 © 2011-13 Pearson Education Copyright (c) 2009 Prentice-Hall. All rights reserved. expanded by J. Goetz, 2012

3. 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

4. Jozef Goetz, 2012 3 3 Creating Links Opening Tag Closing Tag Text that will be highlighted URL

5. Jozef Goetz, 2012 4 4 HTML/XHTML tag The anchor tag Used to specify a hypertext reference (href) to a web page you want to display. The text between the and is displayed on the web page href Attribute used to indicate the document to link to Syntax: text Absolute link Yahoo indicates the protocol http:// being used Relative link Home

6. Jozef Goetz, 2012 5 5 5 Copyright (c) 2006 Prentice-Hall. All rights reserved. Effects of, href, and title Tool tip generated by title="Home Page Link" Displayed text generated by text between the tag and the tag Click here to go to our home page! Mouse pointer changes when hovered over the link When user clicks, the page opened will be based on href="home.htm"

7. 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

8. 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 protocoldirectory and filename host name

9. 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: Contact Collars //now from the collars.htm level Home Dog Bathing <= Relative links from the home page: index.htm

10. 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”

11. Jozef Goetz, 2012 10 Linking Local Pages Using Relative and Absolute Pathnames 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 ”

12. Jozef Goetz, 2012 11 Linking Local Pages Using Relative and Absolute Pathnames 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

13. Jozef Goetz, 2012 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 site http://the.url.com/of/the/remote/page.html

14. Jozef Goetz, 2012 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. Yahoo! HOP 7.2

15. Jozef Goetz, 2012 14 Linking 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.html Blackberries Blackberries grow on canes Blueberries Blueberries grow on bushes in colder climates Strawberries Strawberries are an herbaceous plant Softfruits.html

16. Jozef Goetz, 2012 15 Copyright (c) 2006 Prentice-Hall. All rights reserved. This line has Back To Top Clicking here takes you to the top of the page (no need for an anchor named "top" HTML Linking to Fragment Identifiers

17. Jozef Goetz, 2012 16 HTML/XHTML Internal Links using the 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. Or: “a” can be h1 or 2. Reference target - anchor tag ( pointer) : links to the bookmark or named fragment of a web page. This uses the href attribute Back to Top Or: Skip to content

18. Jozef Goetz, 2012 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 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

19. Jozef Goetz, 2012 18 Copyright (c) 2006 Prentice-Hall. All rights reserved. Effects of Within-Page Linking This line has Can a duck fly if it's wet? This line has Can a duck fly if it’s wet? Clicking here takes you to the "duck" line

20. Jozef Goetz, 2012 19 Creating and Linking to Within-Page Targets 1. The tag's name attribute Creates a target at the location of the anchor tag Commonly used on longer Web pages Syntax: link text Example anchors Education Dinner 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 : link text

21. Jozef Goetz, 2012 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 What’s for dinner? 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 Education 3. Linking to anchors on another website by appending a hash mark (#) and name value What’s for dinner?

22. Jozef Goetz, 2012 21 HOP 7.1 start: starter1.html output: favorites.html

23. Jozef Goetz, 2012 22 Remainder: Email Links using the tag An e-mail link will automatically launch the default mail program configured for the browser: me@hotmail.com

24. Jozef Goetz, 2012 23 Copyright (c) 2006 Prentice-Hall. All rights reserved. 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: Web Design at About In HTML/XHTML 2.0, any tag can include an href attribute Example, to make a header with a link: Web Design at About No anchor tag necessary

25. Jozef Goetz, 2012 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

26. Jozef Goetz, 2012 25 HTML5 Block Anchor Configure block display elements (e.g. h1, div or paragraph) within a hyperlink HTML5 Reference Bookmark this site for a handy HTML5 reference. 25

27. Jozef Goetz, 2012 26 Telephone & Text Message Hyperlinks Telephone Scheme Call 888-555-5555 Many mobile browsers will initiate a phone call when the hyperlink is clicked. SMS Scheme Text 888-555-5555 Many mobile browsers will initiate a text message to the phone number when the hyperlink is clicked. 26

28. Jozef Goetz, 2012 27 CSS 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

29. Jozef Goetz, 2012 28 CSS Sprites HOP 7.3 28

30. Jozef Goetz, 2012 29 Checkpoint 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

31. Jozef Goetz, 2012 30 Checkpoint 7.1 visit p.619 2. 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

32. Jozef Goetz, 2012 31 Three 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

33. Jozef Goetz, 2012 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;

34. Jozef Goetz, 2012 33 Three Column Page Layout - edition5 HOP 7.3 in wildflowers3 folder =>no bullets =>no underlines =>same background color

35. Jozef Goetz, 2012 34 Three Column Page Layout - edition5 HOP 7.4 in wildflowers3 folder.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; } <!DOCTYPE html PUBLIC "-//W3C//DTD HTML/XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/HTML/XHTML1/DTD/HTML/XHTML 1-transitional.dtd"> Door County Wildflowers 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 =>same background color

36. Jozef Goetz, 2012 35 Three Column Page Layout - edition6 HOP 7.3 in wildflowers3 folder =>no bullets =>no underlines =>same background color

37. Jozef Goetz, 2012 36 Three Column Page Layout - edition6 HOP 7.4 in wildflowers3 folder

38. Jozef Goetz, 2012 37 CSS 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 tags.

39. Jozef Goetz, 2012 38 CSS Styling for Print 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 */

40. Jozef Goetz, 2012 39 CSS Styling for Print #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;} starters: page1.html, wildflower.css output: wildflower.css, wildflowerprint.css and page1.html HOP 7.5 /* remove nav*/ /*added */ wildflowerprint.css wildflower.css /*added */

41. Jozef Goetz, 2012 40 Print 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;} starters: page1.html, wildflower.css output: wildflower.css, wildflowerprint.css and page1.html HOP 7.5 /* remove nav*/ /*added */ wildflowerprint.css wildflower.css /*added */

42. Jozef Goetz, 2012 41 Print Styling Best Practices Hide non-essential content Example: #nav { display: none; } Configure font size and color for printing Use pt font sizes, use dark text color e.g. #000000 Control page breaks p.600 page-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 content Example: #sidebar a:after { content: " (" attr(href) ") "; } /*attr(x) returns the value of the HTML attribute */ 41

43. 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 http://jcp.com 2.Create a separate Web site hosted within your current domain targeted for mobile users. e.g. see next page www.m.whitehouse.govwww.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 - the attribute handheld is not well supported

44. 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

45. Jozef Goetz, 2012 44 Design 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

46. Jozef Goetz, 2012 45 Viewport 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 45

47. 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: 46

48. Jozef Goetz, 2012 47 HOP 7.6 lighthousemobile.css

49. Jozef Goetz, 2012 48 HOP 7.6 lighthousemobile.css

50. Jozef Goetz, 2012 49 Checkpoint 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

51. Jozef Goetz, 2012 50 Summary This chapter introduced you to a variety of topics related to hyperlinks, lists, layout and designing for the mobile web. Midterm

52. Jozef Goetz, 2012 51 Pr. Ch7 Prime Properties – Configure the website to display on mobile devices

53. Jozef Goetz, 2012 52 CSS 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. a:link {color:#FF0000 } a:hover {text-decoration:none; color:#000066 }

54. Jozef Goetz, 2012 53 CSS “buttons” ed4.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;} CSS Buttons! Home Products Services Contact About +’s: save the bandwidth used by graphics =>attributes p.613 slide 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.link 2.visited 3.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.

55. Jozef Goetz, 2012 54 CSS “buttons” ed4 CSS Pseudo-class Example 3.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; } CSS Buttons! Home Products Services Contact About Visit Yahoo!. Full implementation HOP – 7.2b (link2.htm) Remember no space between a.Button: and link

56. Jozef Goetz, 2012 55 CSS “buttons” ed5 #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;} CSS Buttons! Home Products Services Contact About +’s: save the bandwidth used by graphics =>attributes p.613 slide 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.link 2.visited 3.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.

57. Jozef Goetz, 2012 56 HOP – 7.2c CSS “buttons” ed4 Yahoo link retains the default browser appearance and behavior – b/c no CSS is applied HOP – 7.2c (link3.htm) uses the default browser for Yahoo

58. Jozef Goetz, 2012 57 HOP – 7.2c CSS “buttons” ed5 Yahoo link retains the default browser appearance and behavior – b/c no CSS is applied HOP – 7.2c (link3.htm) uses the default browser for Yahoo

59. Jozef Goetz, 2012 58 CSS 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 a:link {color:#FF0000 } a:hover {text-decoration:none; color:#000066 }

60. Jozef Goetz, 2012 59 HOP – 7.2a Embedded CSS HOP – 7.2a (link1.htm) uses embedded CSS to configure the 1.link 2.visited 3.hover pseudo-classes for anchor tag. Pseudo-classes to create interactive hyperlinks

61. Jozef Goetz, 2012 60 CSS border-Styling CSS “buttons” {border: border-width, border-style, border-color;…} CSS border-style values  look at =>attributes p.654

62. Jozef Goetz, 2012 61 Navigation 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).

63. Jozef Goetz, 2012 62 CSS & HTML/XHTML Navigation List CSS:.navBar { text-decoration:none; list-style-image:url(arrow.gif); HTML/XHTML: Home Spring Summer Fall Winter twocolumn1.html

64. Jozef Goetz, 2012 63 CSS & 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

65. Jozef Goetz, 2012 64 CSS & 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

66. Jozef Goetz, 2012 65 CSS & 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, within the nav class */ a.nav { text-decoration:none; } /* no underlined and the anchor “a” uses the nav class */ HTML/XHTML: Home Spring Summer Fall Winter home0.html

67. Jozef Goetz, 2012 66 CSS & 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

68. Jozef Goetz, 2012 67 CSS & HTML/XHTML Horizontal Navigation using List =>no bullets home0.htm wildflower0.css

69. 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

70. 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

71. Jozef Goetz, 2012 70 About Cascading create site.css HOP 7.5 Create mypage1.html.css

72. Jozef Goetz, 2012 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.

73. Jozef Goetz, 2012 72 Checkpoint 7.3 3. 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