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 8: Creating Style Sheets 3
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 8: Creating Style Sheets 4
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
Chapter 8: Creating Style Sheets 5
Style Sheet Precedence
Chapter 8: Creating Style Sheets 6
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
Chapter 8: Creating Style Sheets 7
Starting Notepad and Opening an HTML File
Chapter 8: Creating Style Sheets 8
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
Chapter 8: Creating Style Sheets 9
Adding an Embedded Style Sheet
Chapter 8: Creating Style Sheets 10
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
Chapter 8: Creating Style Sheets 11
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
Chapter 8: Creating Style Sheets 12
Chapter 8: Creating Style Sheets 13
Printing an HTML File and Web Page
Chapter 8: Creating Style Sheets 14
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
Chapter 8: Creating Style Sheets 15
Creating an External Style Sheet
Chapter 8: Creating Style Sheets 16
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
Chapter 8: Creating Style Sheets 17
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
Chapter 8: Creating Style Sheets 18
Linking to an External Style Sheet
Chapter 8: Creating Style Sheets 19
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
Chapter 8: Creating Style Sheets 20
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
Chapter 8: Creating Style Sheets 21
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
Chapter 8: Creating Style Sheets 22
Adding an Inline Style Sheet
Chapter 8: Creating Style Sheets 23
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
Chapter 8: Creating Style Sheets 24
Viewing and Printing Framed Web Pages
Chapter 8: Creating Style Sheets 25
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
Chapter 8: Creating Style Sheets 26
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
Chapter 8: Creating Style Sheets 27
Quitting Notepad and a Browser• Close all open browser windows• Click the Close button on the
Notepad window title bar
Chapter 8: Creating Style Sheets 28
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 8: Creating Style Sheets 29
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 8: Creating Style Sheets 30
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