chapter 8ikewebdesign.weebly.com/uploads/1/3/5/6/13567261/chapter_08.pdf · chapter08\chapterfiles...

$: Chapter 8ikewebdesign.weebly.com/uploads/1/3/5/6/13567261/chapter_08.pdf · Chapter08\ChapterFiles folder. Click the contact.html file • Click the Open button in the Open . Chapter$
Chapter 8

Creating Style Sheets

Chapter 8: Creating Style Sheets 2

Chapter Objectives

• Describe the three different types of Cascading Style Sheets

• Add an embedded style sheet to a Web page

• Change the margin and link styles using an embedded style sheet

• Create an external style sheet


Chapter Objectives

• Change the body margins and background using an external style sheet

• Change the link decoration and color using an external style sheet

• Change the font family and size for all paragraphs using an external style sheetCh t bl t l i


Chapter Objectives

• Use the <link /> tag to insert a link to an external style sheet

• Add an inline style sheet to a Web page

• Change the text style of a single paragraph using an inline style sheet


Style Sheet Precedence


Starting Notepad and Opening an HTML File• With the USB drive plugged into your

computer, start the Web browser and enter G:\Chapter08\ChapterFiles\index.html on the Address bar. Click the Contact, Meetings, Questions, and Home links to view the original Web pages provided in the Data Files for Students

• Start Notepad and, if necessary, maximize the window


Starting Notepad and Opening an HTML File

Adding an Embedded Style Sheet• Highlight the comment , on line 10 and then press the DELETE key

• Enter the CSS code shown in Table 8–4


Adding an Embedded Style Sheet


Saving, Validating, and Viewing an HTML File• With the USB drive plugged into

your computer click File on the menu bar and then click Save. If necessary, type menu.html in the File name text box

• Validate the Web page using the W3C validation service

• Open the index.html file in the Web browser to show the completed navigation menu as

Saving, Validating, and Viewing an HTML File


Printing an HTML File and Web Page• Print the Web page from the

browser• Click the menu.html - Notepad

button on the taskbar• Click File on the menu bar and

then click Print on the File menu

• Click the Print button in the Print dialog box to print the HTML d



Printing an HTML File and Web Page


Creating an External Style Sheet• If necessary, click the menu.html –

Notepad button on the taskbar. Click File on the menu bar and then click New

• Enter the CSS code as shown in Table 8–5 on page HTML 360

• With the USB drive plugged into your computer, click File on the menu bar and then click Save As. Type styles1.css in the File name text box. If necessary, navigate to the


Creating an External Style Sheet


Linking to an External Style Sheet• If necessary, click the styles1.css –

Notepad button on the taskbar• With the USB drive plugged into your

computer, click File on the menu bar and then click Open on the File menu

• If necessary, navigate to the G:\Chapter08\ChapterFiles folder. Click the Files of type box arrow, and then click All Files to show all files in the Chapter08\ChapterFiles folder. Click the contact.html file

• Click the Open button in the Open


Linking to an External Style Sheet• Click File on the menu bar and

then click Save on the File menu

• Validate the Web page using the W3C service

• Open the index.html file in the browser and click the Contact Link to see the change on the Web page


Linking to an External Style Sheet


Linking the Remaining HTML Files to an External Style Sheet• If necessary, click the contact.html

- Notepad button on the taskbar• With the USB drive plugged into

your computer, click File on the menu bar and then click Open on the File menu

• If necessary, navigate to the G:\Chapter08\ChapterFiles folder. Click the Files of type box arrow, and then click All Files to show all files in the Chapter08\ChapterFiles


Linking the Remaining HTML Files to an External Style Sheet• Type <link rel=”stylesheet”type=”text/css”href=”styles1.css” /> to enter the link to the external style sheet

• Click File on the menu bar and then click Save on the File menu

• Validate the Web pageO t ti th HTML


Adding an Inline Style Sheet• If necessary, click the

welcome.html - Notepad button on the taskbar so the file welcome.html is displayed

• Click immediately to the right of the p in the <p> tag on line 30. Press the SPACEBAR and then type style=”fontstyle: italic; font-size: 8pt” to insert the inline style sheet


Adding an Inline Style Sheet


Viewing and Printing Framed Web Pages• Click the browser button on the

taskbar• Open the index.html file in the

browser• Click the File menu, and then

click Print• When the Print dialog box is

displayed, click the Options tab• Click As laid out on screen and


Viewing and Printing Framed Web Pages


Viewing and Printing HTML Files• If necessary, click the Karen

Stofcich Financials browser button on the taskbar. If necessary, click the Home link in the menu frame so the Welcome Web page (welcome.html) is displayed in the right frame

• Right-click anywhere in the right frame except on a link


Viewing and Printing HTML Files• Click the browser button on the

taskbar, click the Contact link, and then repeat bullets 2 through 4

• Click the browser button on the taskbar, click the Meetings link, and then repeat bullets 2 through 4

• Click the browser button on the taskbar click the Questions


Quitting Notepad and a Browser• Close all open browser windows• Click the Close button on the

Notepad window title bar


Chapter Summary

• Describe the three different types of Cascading Style Sheets

• Add an embedded style sheet to a Web page

• Change the margin and link styles using an embedded style sheet

• Create an external style sheet


Chapter Summary

• Change the body margins and background using an external style sheet

• Change the link decoration and color using an external style sheet

• Change the font family and size for all paragraphs using an external style sheetCh t bl t l i


Chapter Summary

• Use the <link /> tag to insert a link to an external style sheet

• Add an inline style sheet to a Web page

• Change the text style of a single paragraph using an inline style sheet

Chapter 8 Quiz Notes• Setting the text-decoration property to overline places a line above the

text. • Setting the text-decoration property to underline places a line below

the text. • The link: hover property defines the way a link appears when a mouse

pointer points to it.• An external style sheet is a separate text file that contains the style

statements that define how the Web page elements will appear.• There are three ways to add the line-height value: by number, by

length unit, and by percentage.• To gain more control, you can define specific elements of an HTML file

as a category, or class. • An inline style sheet allows you to add a style to an individual HTML

tag, such as a heading or a paragraph.• Web pages are displayed in frames defined by the frame definition file

index.html.• An external style sheet is used to change the style of multiple pages

in a Web site. • A declaration includes at least one type of style, or property, to apply

to the selected element.

Chapter 8 Quiz NotesCont.• A(n) style is a rule that defines the appearance of an element on a Web

page. • With an inline style sheet, you add a style to an individual HTML tag. • External style sheets give you the most flexibility and are ideal to

apply formats to all Web pages in a Web site. • A(n) inline style sheet takes precedence over any other style sheet. • The part of the style statement that identifies the page elements is the

selector. • The part of the style statement that identifies how elements should

appear is called the declaration. • For each property, the declaration includes a related value, which

specifies the display parameters for that specific property. • To add an embedded style sheet to a Web page, you insert a start

<style> tag at the top of the Web page within the <head> tags that define the header section.

• To create an external style sheet, enter all of the style statements in a text file using Notepad or another text editor, and then save the text file with a .css extension.

• Setting the text-decoration property to the value of none will remove the underline from all links.

Chapter 8 Quiz NotesCont.• The font property has options of family, style, and variant that can be

controlled.• The margin property has options of length and percentage that can be

controlled. • An inline style sheet is used to define the style of an individual HTML

tag. • The embedded style sheet needs to be put within the start <head> and

end </head> tags. • Embedded style sheets have the second-highest level of precedence of

the three types of styles sheets. • The code for an embedded style sheet must be inserted between a

start <style> tag and an end </style> tag. • Setting the text-decoration property to blink causes the text to blink

on and off. • Setting the text-decoration property to line-through places a line

through the middle of the text. • The word-spacing property is a good way to add additional space

between words. • An external style sheet is a separate file that contains the style

statements that define how the Web page elements will appear.

Chapter 8 Complete

Creating Style Sheets

chapter 8ikewebdesign.weebly.com/uploads/1/3/5/6/13567261/chapter_08.pdf · chapter08\chapterfiles...

Documents