Download ppt - Ddpz2613 topic8 css

HTMLConcepts and Techniques

Fifth Edition

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• Change the body margins and background using an

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

style sheet


Chapter Objectives

• Change the font family and size for all paragraphs using an external style sheet.

• Change table styles using an external style sheet.• 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.


Plan Ahead – General Project Guidelines

1. Plan the Web site – if using CSS is appropriate.

2. Analyze the need or content to include on the Web page.

3. Choose the content for the Web page

4. Determine the type of style sheets to use for the pages and their precedence.

5. Create the style sheets.

6. Test all Web pages within the Web site.


Using Style Sheets

• A style is a rule that defines the appearance of an element on a Web page.

• A style sheet is a series of rules that defines the style for a Web page or an entire Web site.

• With a style sheet, you can alter the appearance of a Web page or pages by changing characteristics such as font family, font size, margins and link specifications.

• Style sheets adhere to a common language with a standard and rules. This language called Cascading Style Sheets or CSS.

• CSS allows a Web developer to write code statements that control the style of elements on a Web page.


Style Sheets Precedence

• CSS provides for three types of style sheets:– Inline style sheet

– Embedded style sheet

– External style sheets

• Table 8-1 Style Sheet Precedence


Style Statement Format

• Example code for inline style sheet:– <p style=“font-style: italic; font size: 8pt”>

• Example code for embedded style sheet:– <style type=“text/css”>– <!—– p {text-indent: 8pt}– -->– </style>

• Example code for external style sheet: • Save the text file with a.css extension

– a {text-decoration: none; color: blue}– p {font-family: Verdana, Garamond; font-size: 11pt}

• Link must be inserted for external style sheet:– <link rel=“stylesheet” type=“text/css” href=style1.css” />

Table 8-3 Files Used for Chapter8

File Name Purpose and Display Specifics

Changes Made in Chapter 8

index.html • Frame definition file• Define layout of frame on the Web page

• None

menu.html • Provide links to all other web pages• Displayed in left frame

• Add an embedded style sheet

style1.css • External style sheet that is linked to next four pages

• Create as external style sheet• Save as a .css file

welcome.html • Provides welcome to Web site• Displayed in right frame

• Add link to external style sheet• Add inline style sheet

contact.html • Lists contact information• Displayed in right frame

• Add link to external style sheet

meetings.html • List meeting dates / topic available• Displayed in right frame


questions.html • Displays form for questions• Displayed in right frame




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

• Navigate to the G:\Chapter08\ChapterFile folder. If necessary, click the Files of type list arrow and then click All Files to display the menu.html file

• Double-click menu.html in the list of files to open the file


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 shown on the left side of the index.html Web page

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 code



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 G:\Chapter08\ChapterFiles folder. Click the Save button in the Save As dialog box to save the file as styles1.css

• Click the File menu, click Print on the File menu, and then click the Print button in the Print dialog box


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 dialog box• Highlight the text, , in line 10• 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 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 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 folder. Click the meetings.html file

• Click the Open button in the Open dialog box

• Highlight the text,  on line 10


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 page• One at a time, open the HTML files questions.html and

welcome.html, and repeat bullets 5 through 8 to replace the placeholder text with the link tag, then save and validate the code


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

• Click File on the menu bar and then click Save• Validate the Web page


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 then click the Print

button• One at a time, click the links, Contact, Meetings, and

Questions, and repeat bullets 3 through 5


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• Click View Source on the shortcut menu• After the file welcome.html is opened in Notepad, click

the File menu, then click Print. Click the Print button in the Print dialog box


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 link, and then repeat bullets 2 through 4


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• Change the body margins and background using an

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

style sheet


Chapter Summary

• Change the font family and size for all paragraphs using an external style sheet

• Change table styles using an external style sheet• 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

HTMLConcepts and Techniques

Fifth Edition

Chapter 8 Complete

Creating Style Sheets