Transcript PowerPoint Presentation - Adding an Inline Style Sheet

Adding an Inline Style Sheet
Page without Inline Style Sheet
Page with Inline Style Sheet
Adding an Inline Style Sheet
• If necessary, click the Notepad button on
the taskbar or BBEdit on the dock to
display the file, welcome.htm
• Click immediately to the right of the P in
the <P> tag on line 24. Press the
SPACEBAR and then type
STYLE=“font-style: italic;
font-size: 8pt” as the code
Adding an Inline Style Sheet
• Click File on the menu bar and then click
Save As. Type welcome.htm in the File
name text box. Click the Save button in
the Save As dialog box
Viewing and Printing
Framed Web Pages
• Click the browser button on the taskbar
• Click the Community Hospital logo in the
upper-left corner of the Web page
• Click File on the menu bar and then click
Print
• When the Print dialog box displays, click
As laid out on the screen and then click
the OK button
Viewing and Printing
Framed Web Pages
• One at a time, click the remaining links,
Services, Calendar, Staff, and Contact,
and repeat the last two steps
Viewing and Printing HTML
Files
• If necessary, click the browser button on
the taskbar. Click the Home link in the
menu frame to display the 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
Viewing and Printing HTML
Files
• Once the file, welcome.htm, is opened in
Notepad, click File on the menu bar and
then click Print
• Click the remaining links (Services,
Calendar, Staff, and Contact) and repeat
the last three steps
Closing Notepad and
Closing Your Browser
• Click the Close button on the Notepad title
bar
• Click the Close button on the browser title
bar
Working with Classes
in Style Sheets
• Using classes, you can selectively apply
styles to HTML tags within a page
• You can only define classes in embedded
or external style sheets
• Defining styles is a two-step process
 Mark the elements in your HTML code that
belong to the class by adding the tag,
CLASS=classname
 Define a specific style for that class
Working with Classes
in Style Sheets
HTML Code with Classes
Defined
Resulting Web Page
Summary
• Describe the three different types of
cascading style sheets
• Add an embedded style sheet to a Web
page that changes the link styles
• Add an external style sheet that changes
the background, link styles, paragraph
text, and table styles
Summary
• Use the <LINK> tag to insert a link to an
external style sheet
• Add an inline style sheet to a Web page
that changes the text style
• Understand how to define style classes
What You Should Know
Project 7 Complete
Please go to
scsite.com/html2e/exs.htm
to prepare for the exam on
Projects 6 & 7