Presentation is loading. Please wait.

Presentation is loading. Please wait.

Project 8 Creating Style Sheets.

Published byBranden Horn Modified over 6 years ago

Similar presentations

Presentation on theme: "Project 8 Creating Style Sheets."— Presentation transcript:

1 Project 8 Creating Style Sheets

2 Project 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 Project 8: Creating Style Sheets

3 Project 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 sheet Change table styles using an external style sheet Project 8: Creating Style Sheets

4 Project 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 Understand how to define style classes Project 8: Creating Style Sheets

5 Style Sheet Precedence
Project 8: Creating Style Sheets

6 Starting Notepad and Opening an HTML File
Start Notepad and, if necessary, maximize the window With the USB drive plugged into your computer, click File on the menu bar and then click Open on the File menu. If necessary, click UDISK (G:) in the Look in list. Click the Project08 folder and then click the ProjectFiles folder in the list of available folders If necessary, click the Files of type list arrow and then click All Files Double-click menu.htm in the list of files Project 8: Creating Style Sheets

7 Starting Notepad and Opening an HTML File
Project 8: Creating Style Sheets

8 Adding an Embedded Style Sheet
Highlight the comment, <!-- Insert embedded style sheet here -->, on line 9 and then press the DELETE key Enter the CSS code as shown on the following slide Project 8: Creating Style Sheets

9 Adding an Embedded Style Sheet
Project 8: Creating Style Sheets

10 Saving an HTML File With the USB drive plugged into your computer click File on the menu bar and then click Save As. If necessary, type menu.htm in the File name text box If necessary, click UDISK (G:) in the Save in list. Click the Project08 folder, and then click the ProjectFiles folder in the list of available folders Click the Save button in the Save As dialog box. If a Save As dialog box is displayed, click Yes to continue saving Project 8: Creating Style Sheets

11 Viewing an HTML File Using a Browser
Start your browser Click the Address bar. Type G:\Project08\ProjectFiles\ index.htm in the Address text box and then press the ENTER key Project 8: Creating Style Sheets

12 Viewing an HTML File Using a Browser
Project 8: Creating Style Sheets

13 Printing an HTML File Click the 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 Project 8: Creating Style Sheets

14 Printing an HTML File Project 8: Creating Style Sheets

15 Creating an External Style Sheet
If necessary, click the 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 HTM 349 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, click UDISK (G:) in the Save in list. Click the Project08 folder and then click the ProjectFiles folder in the list of available folders. Click the Save button in the Save As dialog box Click the File menu and then click Print on the File menu Project 8: Creating Style Sheets

16 Creating an External Style Sheet
Project 8: Creating Style Sheets

17 Linking to an External Style Sheet
If necessary, click the 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 Type contact.htm in the File name text box. If necessary, click UDISK (G:) in the Look in list, click the Project08 folder, and then click the ProjectFiles folder in the list of available folders Click the Open button in the Open dialog box Project 8: Creating Style Sheets

18 Linking to an External Style Sheet
Highlight the text, <!--Insert link statement here -->, in line 9 and then press the DELETE key Type <link rel="stylesheet“ type="text/css" href="styles1.css" /> as the tag Click File on the menu bar and then click Save on the File menu Project 8: Creating Style Sheets

19 Linking to an External Style Sheet
Project 8: Creating Style Sheets

20 Linking the Remaining HTML Files to an External Style Sheet
With the USB drive plugged into your computer, click File on the menu bar and then click Open on the File menu Type products.htm in the File name text box. If necessary, click UDISK (G:) in the Look in list, click the Project08 folder, and then click the ProjectFiles folder in the list of available folders Click the Open button in the Open dialog box Highlight the text, <!--Insert link statement here -->, and press the DELETE key Project 8: Creating Style Sheets

21 Linking the Remaining HTML Files to an External Style Sheet
Type <link rel="stylesheet“ type="text/css" href="styles1.css" /> as the tag Click File on the menu bar and then click Save on the File menu One at a time, open the remaining HTML files, questions.htm and products.htm, and repeat the previous three steps Project 8: Creating Style Sheets

22 Adding an Inline Style Sheet
If necessary, click the Notepad button on the taskbar to display the file, welcome.htm Click immediately to the right of the p in the <p> tag on line 31. Press the SPACEBAR and then type style="font-style: italic; font-size: 8pt" as the code Click File on the menu bar and then click Save Project 8: Creating Style Sheets

23 Adding an Inline Style Sheet
Project 8: Creating Style Sheets

24 Viewing and Printing Framed Web Pages
Click the browser button on the taskbar Click the Blue Cell, Inc. logo in the upper-left corner of the Web page Click File on the menu bar and then click Print on the File menu Project 8: Creating Style Sheets

25 Viewing and Printing Framed Web Pages
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 remaining links, Contact, Products, and Questions, and repeat the previous three steps Project 8: Creating Style Sheets

26 Viewing and Printing HTML Files
If necessary, click the browser button on the taskbar. If necessary, click the Home link in the menu frame to display the Welcome Web page (welcome.htm) in the right frame Right-click anywhere on the Welcome page except on a link Click View Source on the shortcut menu After the file welcome.htm is opened in Notepad, click File on the menu bar and then click Print on the File menu. Click the Print button on the Print dialog box Project 8: Creating Style Sheets

27 Viewing and Printing HTML Files
Click the browser button on the taskbar, click the Contact link, and then repeat the previous three steps Click the browser button on the taskbar, click the Products link, and then repeat the last three steps on the previous slide Click the browser button on the taskbar, click the Questions link, and then repeat the last three steps on the previous slide Project 8: Creating Style Sheets

28 Quitting Notepad and a Browser
Click the Close button on the browser title bar Click the Close button on the Notepad window title bar Project 8: Creating Style Sheets

29 Project 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 Project 8: Creating Style Sheets

30 Project 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 sheet Change table styles using an external style sheet Project 8: Creating Style Sheets

31 Project 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 Understand how to define style classes Project 8: Creating Style Sheets

32 Project 8 Complete Creating Style Sheets

Download ppt "Project 8 Creating Style Sheets."

Similar presentations

Microsoft Office 2007 Excel Chapter 1 Creating a Worksheet and an Embedded Chart.

Microsoft Office 2007 Excel Chapter 1 Creating a Worksheet and an Embedded Chart.
Project 8 Creating Style Sheets.

Project 8 Creating Style Sheets.
Creating and Editing a Web Page Using Inline Styles

Creating and Editing a Web Page Using Inline Styles
Using Advanced Cascading Style Sheets

Using Advanced Cascading Style Sheets
Chapter 8 Creating Style Sheets.

Chapter 8 Creating Style Sheets.
Chapter 5 Creating an Image Map

Chapter 5 Creating an Image Map
Microsoft Office 2007 Excel Web Feature Creating Web Pages Using Excel.

Microsoft Office 2007 Excel Web Feature Creating Web Pages Using Excel.
Microsoft Office 2007 Excel Web Feature Creating Web Pages Using Excel.

Microsoft Office 2007 Excel Web Feature Creating Web Pages Using Excel.
Creating and Editing a Web Page

Creating and Editing a Web Page
Creating a Form on a Web Page

Creating a Form on a Web Page
Microsoft Office 2007 Word Web Feature Creating Web Pages Using Word.

Microsoft Office 2007 Word Web Feature Creating Web Pages Using Word.
Starting BBEdit (Notepad) and Opening an HTML File Open the Public Folder Start Notepad or BBEdit Click File on the menu bar, and then click Open In the.

Starting BBEdit (Notepad) and Opening an HTML File Open the Public Folder Start Notepad or BBEdit Click File on the menu bar, and then click Open In the.
Microsoft Office 2007 PowerPoint Web Feature Creating Web Pages Using PowerPoint.

Microsoft Office 2007 PowerPoint Web Feature Creating Web Pages Using PowerPoint.
Chapter 7 Using Advanced Cascading Style Sheets HTML5 & CSS 7 th Edition.

Chapter 7 Using Advanced Cascading Style Sheets HTML5 & CSS 7 th Edition.
XP New Perspectives on Microsoft Office FrontPage 2003 Tutorial 9 1 Microsoft Office FrontPage 2003 Tutorial 9 – Using Layout Tables, Styles, and Office.

XP New Perspectives on Microsoft Office FrontPage 2003 Tutorial 9 1 Microsoft Office FrontPage 2003 Tutorial 9 – Using Layout Tables, Styles, and Office.
Office 2003 Introductory Concepts and Techniques M i c r o s o f t Word Web Feature Creating Web Pages Using Word.

Office 2003 Introductory Concepts and Techniques M i c r o s o f t Word Web Feature Creating Web Pages Using Word.
Creating Tables in a Web Site Using an External Style Sheet HTML5 & CSS 7 th Edition.

Creating Tables in a Web Site Using an External Style Sheet HTML5 & CSS 7 th Edition.
Using Frames in a Web Site

Using Frames in a Web Site
Creating Tables in a Web Site.  Define table elements  Describe the steps used to plan, design, and code a table  Create a borderless table to organize.

Creating Tables in a Web Site.  Define table elements  Describe the steps used to plan, design, and code a table  Create a borderless table to organize.
Microsoft Office 2007 Word Integration Feature Linking an Excel Worksheet and Chart to a Word Document.

Microsoft Office 2007 Word Integration Feature Linking an Excel Worksheet and Chart to a Word Document.

Similar presentations

Ads by Google