 |
Embedded Style Sheets
|
|
|
 |
This lesson: Overview | Syntax
| Example
| Exericses
Other lessons: Style Syntax | Order of
Precedence | Style Properties |
Other Style Information
Intro. to Styles | Inline Styles | Embedded Style Sheets |
Linked Style Sheets
- The style sheet information is embedded within the web page.
- Use an embedded style sheet when you want to apply formatting styles to
elements within a single web page.
- Use a linked (external) style sheet if you want to apply formatting styles
to elements in more than one web page.
- The STYLE tags, i.e. <STYLE> and </STYLE>,
must be located between the opening and closing HEAD tags, i.e. <HEAD> and </HEAD>.
(The HEAD tags are located in the
upper portion of a web page.)
- The style information is located between the opening and closing STYLE tags,
<STYLE> and </STYLE>.
- Place the comment tags,
<!-- and -->, around the block of style definitions.
The comment tags prevent older browsers (that don't support styles) from
displaying the style information as text on a web page.
- Syntax:
Tag { property: value; property: value }
Tag, Tag, Tag { property: value; property: value }
Tag.class { property: value; property: value }
H1, H2, H3 { font-size: 20pt; color: red }
H4 { font-size: 16pt; color: navy }
H5.Indent { font-size: 12pt; margin-left: 50pt }
<STYLE>
<!--
H4 { font-size: 16pt; color: navy }
-->
</STYLE>
- Click here to view an example of a
web page that uses an embedded style sheet. Use your browser to view the HTML.
- Below is the code for
the embedded style sheet for that web page.
- Note: JunkFont1 is a fictitious font name. As a result,
since the web page visitor doesn't have this specific font, the
browser will display the text using one of the alternative fonts,
either Arial or some other sans-serif font.
<HEAD>
<STYLE>
<!--
/* This is an embedded style sheet */
body { font-family: JunkFont1, Arial, sans-serif }
h1 { font-size: 20pt; font-weight: bold;
color: #FF0000; text-align: center }
h2 { background-color: #CCCCFF; text-align: center }
blockquote { color: green }
address { font-size: 10pt; text-align: center }
-->
</STYLE>
</HEAD>
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-embedded-text.txt.
Copy the needed text and paste it into the appropriate areas. To paste
as Normal, select Edit/Paste Special from the menu.
At the Convert Text dialog window, click on the option for Normal Paragraphs.
<html>
<head>
<title>Exercise: Using Embedded Style Sheets</title>
<style>
<!--
body { font-size: 18pt }
h1 { font-family: Impact, Cooper Black, sans-serif;
text-align: center;
background-color: yellow }
-->
</style>
</head>
<body>
<h1>Exercise: Using Embedded Style Sheets</h1>
<p>This embedded style sheet 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-embedded.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.
- Type the text below.
OR
Open the file, exercise-embedded-text.txt.
Copy the text and paste it into the blank page (in Normal view).
Exercise: Using Embedded Style Sheets
This embedded style sheet 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 alignment and a yellow background.
- Click in the first paragraph. From the Style drop-down
menu, select Heading 1.
- Change the title that appears in the browser's title bar to:
Exercise: Using Embedded Style Sheets.
- Save the file with the name of: exercise-embedded-fp.htm
.
- From the FrontPage menu, select Format/Style.
Format Body Text
- At the Styles dialog window, click on the body
tag which is listed in the Styles box. Then click the Modify button.
- At the Modify Style dialog window, click the Format button.
Then click on Font from the pop-up menu.
- At the Font dialog window, select 18pt
from the Size box. Then click OK until you return to the Style dialog window.
Format Heading 1
- Click the drop-down arrow next to the List box and select All
HTML Tags.
- In the Styles box, scroll down and click on the h1
tag. Then click the Modify button.
- At the Modify Style dialog window, click the Format button.
Then click on Font from the pop-up menu.
- At the Font dialog window, select Impact
from the Font box. Then click OK until you return to the Modify Style dialog
window.
- At the Modify Style dialog window, click the Format button.
Then click on Paragraph from the pop-up menu.
- At the Paragraph dialog window, select Center from the Alignment
drop-down menu. Then click OK until you return to the Modify Style dialog
window.
- At the Modify Style dialog window, click the Format button.
Then click on Border from the pop-up menu.
- At the Borders dialog window, click on the Shading tab. From the
Background Color drop-down menu, click on the yellow color. Then click OK until you
exit from the Style dialog window.
- Save the file.
- View the HTML tags by clicking on the HTML tab. Your style
definitions will look similar to the code shown in Method 1.
- FrontPage doesn't give you the capability to specify multiple fonts for
the font family. You will need to go to the HTML view to type the
style information for the alternative fonts.
Penn State Behrend Home
| Computer Center Home
This page is maintained by Carolyn Dudas
Updated May 21, 2002