Inline Styles

	Inline Styles

Overview

Use an inline style when you want to apply a formatting style to single element within a web page.

Syntax

The style information is inserted within the HTML tag. (The HTML tags are located in the BODY section of the web page.)
Use quotation marks to enclose the style definition (or declaration).
Syntax:

Example:

<P STYLE="font-size: 10pt; color: green">Example of an Inline Style</P>

Example

Click here to view an example of a web page that uses inline styles. Below is the code for the inline styles for that web page.
- Note: JunkFont1 is a fictitious font name. As a result, if the web page visitor doesn't have the specific font you have chosen, the browser will then display the text using one of the alternative fonts, either Arial or some other sans-serif font.

<body style="font-family: JunkFont1, Arial, sans-serif">

<h1 style="font-size: 20pt; font-weight: bold; color: #FF0000; text-align: center">This web page uses inline styles.</h1>

<h2 style="background-color: #CCCCFF; text-align: center">Generic Font Families</h2>

<blockquote style="color: green">Serif...Fixedsys</blockquote>

Exercise: Create Inline Styles

Method 1 - Using a Text Editor

Type the code below.

You may use a text or web page editor.

If you use FrontPage, use the HTML view to type the code that appears boldfaced (and in red).

Or, if you wish, open the file, exercise-inline-text-1.txt. Copy the needed text and paste it into the appropriate areas.

<html>
<head>
<title>Exercise: Using Inline Styles</title>
</head>
<body style="font-size: 18pt">
<h1 style="font-family: Impact, Cooper Black, sans-serif; text-align: center; background-color: yellow">Exercise: Using Inline Styles</h1>
<p>The inline style formats the body text as 18 points. It also formats a heading 1 paragraph so that it uses the Impact or Cooper Black Font. If those fonts are not available, then a sans-serif font is used. Heading 1 is also formatted with a center text alignment and a yellow background.</p>
</body>
</html>

Save the file with the name of: exercise-inline.htm .
View the web page in a browser.

Method 2 - Using FrontPage

Only certain formatting features in FrontPage can be applied as styles when using the FrontPage Style menu.

Open a blank page in FrontPage.
Change the title that appears in the browser's title bar to: Exercise: Using Inline Styles.
Type the text below.
OR
Open the file, exercise-inline-text-2.txt. Copy the text and paste it as a Normal paragraph into the blank page (in Normal view). To paste as Normal, select Edit/Paste Special from the menu. At the Convert Text dialog window, click on the option for Normal Paragraphs.

Exercise: Using Inline Styles

An inline style centers the first paragraph. Another inline style creates a first line indent for the second paragraph as well as double-spacing the paragraph.

Center Paragraph

Right-click in the first paragraph. From the pop-up menu, click on Paragraph.
At the Paragraph dialog window, click the drop-down arrow next to Alignment. Click on Center.
Click OK.

Indent First Line and Double-space Paragraph

Right-click in the second paragraph. From the pop-up menu, click on Paragraph.
At the Paragraph dialog window, type the number 20 in the Indent First Line box.
Click the drop-down arrow next to Line Spacing and click on Double.
Click OK.
Save the file with the name of: exercise-inline-fp.htm .
View the HTML tags by clicking on the HTML tab.

Penn State Behrend Home | Computer Center Home

This page is maintained by Carolyn Dudas
Updated May 21, 2002