HTML
Concepts 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...
Chapter 8: Creating Style Sheets 3
Chapter Objectives
• Change the font family and size for all paragraphs using
an extern...
Chapter 8: Creating Style Sheets 4
Plan Ahead – General Project Guidelines
1. Plan the Web site – if using CSS is appropri...
Chapter 8: Creating Style Sheets 5
Using Style Sheets
• A style is a rule that defines the appearance of an
element on a W...
Chapter 8: Creating Style Sheets 6
Style Sheets Precedence
• CSS provides for three types of style sheets:
– Inline style ...
Chapter 8: Creating Style Sheets 7
Style Statement Format
• Example code for inline style sheet:
– <p style=“font-style: i...
Table 8-3 Files Used for Chapter8
File Name Purpose and Display
Specifics
Changes Made in
Chapter 8
index.html • Frame def...
Chapter 8: Creating Style Sheets 9
Starting Notepad
and Opening an HTML File
• With the USB drive plugged into your comput...
Chapter 8: Creating Style Sheets 10
Starting Notepad
and Opening an HTML File
Chapter 8: Creating Style Sheets 11
Adding an Embedded Style Sheet
• Highlight the comment <!-- Insert embedded style
shee...
Chapter 8: Creating Style Sheets 12
Adding an Embedded Style Sheet
Chapter 8: Creating Style Sheets 13
Saving, Validating, and Viewing an HTML File
• With the USB drive plugged into your co...
Saving, Validating, and Viewing an HTML File
Chapter 8: Creating Style Sheets 14
Printing an HTML File
and Web Page
• Print the Web page from the browser
• Click the menu.html - Notepad button on the tas...
Chapter 8: Creating Style Sheets 16
Printing an HTML File
and Web Page
Chapter 8: Creating Style Sheets 17
Creating an External Style Sheet
• If necessary, click the menu.html – Notepad button ...
Chapter 8: Creating Style Sheets 18
Creating an External Style Sheet
Chapter 8: Creating Style Sheets 19
Linking to an External Style Sheet
• If necessary, click the styles1.css – Notepad but...
Chapter 8: Creating Style Sheets 20
Linking to an External Style Sheet
• Click File on the menu bar and then click Save on...
Chapter 8: Creating Style Sheets 21
Linking to an External Style Sheet
Chapter 8: Creating Style Sheets 22
Linking the Remaining HTML Files to an
External Style Sheet
• If necessary, click the ...
Chapter 8: Creating Style Sheets 23
Linking the Remaining HTML Files to an
External Style Sheet
• Type <link rel=”styleshe...
Chapter 8: Creating Style Sheets 24
Adding an Inline Style Sheet
• If necessary, click the welcome.html - Notepad button
o...
Chapter 8: Creating Style Sheets 25
Adding an Inline Style Sheet
Chapter 8: Creating Style Sheets 26
Viewing and Printing
Framed Web Pages
• Click the browser button on the taskbar
• Open...
Chapter 8: Creating Style Sheets 27
Viewing and Printing
Framed Web Pages
Chapter 8: Creating Style Sheets 28
Viewing and Printing HTML Files
• If necessary, click the Karen Stofcich Financials
br...
Chapter 8: Creating Style Sheets 29
Viewing and Printing HTML Files
• Click the browser button on the taskbar, click the
C...
Chapter 8: Creating Style Sheets 30
Quitting Notepad and a Browser
• Close all open browser windows
• Click the Close butt...
Chapter 8: Creating Style Sheets 31
Chapter Summary
• Describe the three different types of Cascading Style
Sheets
• Add a...
Chapter 8: Creating Style Sheets 32
Chapter Summary
• Change the font family and size for all paragraphs
using an external...
HTML
Concepts and Techniques
Fifth Edition
Chapter 8 Complete
Creating Style Sheets
Upcoming SlideShare
Loading in...5
×

Ddpz2613 topic8 css

931

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
931
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Ddpz2613 topic8 css

  1. 1. HTML Concepts and Techniques Fifth Edition Chapter 8 Creating Style Sheets
  2. 2. 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
  3. 3. Chapter 8: Creating Style Sheets 3 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.
  4. 4. Chapter 8: Creating Style Sheets 4 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.
  5. 5. Chapter 8: Creating Style Sheets 5 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.
  6. 6. Chapter 8: Creating Style Sheets 6 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
  7. 7. Chapter 8: Creating Style Sheets 7 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” />
  8. 8. 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 • Add link to external style sheet questions.html • Displays form for questions • Displayed in right frame • Add link to external style sheet Chapter 8: Creating Style Sheets 8
  9. 9. Chapter 8: Creating Style Sheets 9 Starting Notepad and Opening an HTML File • With the USB drive plugged into your computer, start the Web browser and enter G:Chapter08 ChapterFilesindex.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:Chapter08ChapterFile 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
  10. 10. Chapter 8: Creating Style Sheets 10 Starting Notepad and Opening an HTML File
  11. 11. Chapter 8: Creating Style Sheets 11 Adding an Embedded Style Sheet • Highlight the comment <!-- Insert embedded style sheet here -->, on line 10 and then press the DELETE key • Enter the CSS code shown in Table 8–4
  12. 12. Chapter 8: Creating Style Sheets 12 Adding an Embedded Style Sheet
  13. 13. Chapter 8: Creating Style Sheets 13 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
  14. 14. Saving, Validating, and Viewing an HTML File Chapter 8: Creating Style Sheets 14
  15. 15. 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 Chapter 8: Creating Style Sheets 15
  16. 16. Chapter 8: Creating Style Sheets 16 Printing an HTML File and Web Page
  17. 17. Chapter 8: Creating Style Sheets 17 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:Chapter08ChapterFiles 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
  18. 18. Chapter 8: Creating Style Sheets 18 Creating an External Style Sheet
  19. 19. Chapter 8: Creating Style Sheets 19 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:Chapter08ChapterFiles folder. Click the Files of type box arrow, and then click All Files to show all files in the Chapter08ChapterFiles folder. Click the contact.html file • Click the Open button in the Open dialog box • Highlight the text, <!--Insert link statement here -->, in line 10 • Type <link rel=”stylesheet” type=”text/css” href=”styles1.css” /> to enter the link to the external style sheet
  20. 20. Chapter 8: Creating Style Sheets 20 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
  21. 21. Chapter 8: Creating Style Sheets 21 Linking to an External Style Sheet
  22. 22. Chapter 8: Creating Style Sheets 22 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:Chapter08ChapterFiles folder. Click the Files of type box arrow, and then click All Files to show all files in the Chapter08ChapterFiles folder. Click the meetings.html file • Click the Open button in the Open dialog box • Highlight the text, <!--Insert link statement here --> on line 10
  23. 23. Chapter 8: Creating Style Sheets 23 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
  24. 24. Chapter 8: Creating Style Sheets 24 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
  25. 25. Chapter 8: Creating Style Sheets 25 Adding an Inline Style Sheet
  26. 26. Chapter 8: Creating Style Sheets 26 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
  27. 27. Chapter 8: Creating Style Sheets 27 Viewing and Printing Framed Web Pages
  28. 28. Chapter 8: Creating Style Sheets 28 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
  29. 29. Chapter 8: Creating Style Sheets 29 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
  30. 30. Chapter 8: Creating Style Sheets 30 Quitting Notepad and a Browser • Close all open browser windows • Click the Close button on the Notepad window title bar
  31. 31. Chapter 8: Creating Style Sheets 31 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
  32. 32. Chapter 8: Creating Style Sheets 32 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
  33. 33. HTML Concepts and Techniques Fifth Edition Chapter 8 Complete Creating Style Sheets
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×