 |
Introduction to Styles
|
|
|
 |
This lesson: Overview | Advantages | Disadvantages
| Types of Styles | Inline Style Example | Embedded
Style Example | Linked Style Example | Using Styles | References |
Other lessons: Style Syntax | Order of
Precedence | Style Properties |
Other Style Information
Intro. to Styles | Inline Styles | Embedded Style Sheets |
Linked Style Sheets
Note: The information
presented for styles is intended as a very broad overview.
Styles, also referred to as style sheets, are used to control the formatting of text or other web page elements
(such as the background). Styles may be
applied to:
- specific elements within
the web page
- Example: Apply a style to a specific word or paragraph so that
it is formatted with a certain font size. (The paragraph
containing the menu links at the
top of this page is formatted with a font size of 10 points.)
- similar elements within the web page or the entire web site
- Example: Apply a style to specific paragraphs so that they are formatted
with a certain font, size, and color.
(The H3 headings on this web page are formatted with the Curlz or Comic
Sans font, a font size of 20 points, and the color of red.)
The term, Cascading Style Sheets (CSS), means that:
- more than one type of style sheet may be used with a web page
- there is a specific order of precedence on how multiple style sheets are
applied to a web page
- Assign multiple formatting properties (i.e. boldfacing, indent, font
color, etc.) to an element
- Saves time
- Easy to change
- Provides consistency
- Most browsers don't fully support the official standard for styles.
As a result, pages that use styles may look different from one browser to
the next. Or, some style definitions may not be supported at all.
- Styles have a unique syntax.
There are three ways of adding style information to web pages. You may
use:
- inline styles
- embedded
(internal) style sheets
- linked (external) style sheets
The style information for an inline style is inserted within the HTML tag.
- Example 1 - The style information is placed within a HTML tag which is located in the BODY section of the web page.
<H4 style="font-size: 16pt; color: navy">
- Example 2 - This web page uses an inline style to format the menu
links. Use your browser to view the HTML.
The style information for an embedded style sheet
is contained within the STYLE tags of a web
page.
- Example 1 - The style information is placed in the HEAD
section of the web page.
-
<STYLE>
<!--
H4 { font-size: 16pt; color: navy }
-->
</STYLE>
- Example 2 - This web page uses an embedded style sheet to format
the body text and headings. Use your browser to view the HTML.
The style information for a linked style sheet is placed in a separate file. A link is
established between the web page and the file containing the style
information.
-
Example 1 - This is the link that is placed in the HEAD section of the web
page:
-
<LINK rel="stylesheet" type="text/css"
src="mystyles.css">
This is the style information that
is contained in the file, mystyles.css:
H4 { font-size: 16pt; color: navy }
A web page editor, a style editor, or a text editor may be used to create the style
information. Some things to keep in mind:
- The style information must be typed in the proper location. The
location depends upon the type of style used.
- If you use a linked style sheet, this file must be transferred to the web
server.
- View your web page in several browsers to see how the styles are (or are
not) supported in each browser. WebReview.com has a master
compatibility chart which lists style properties and values and whether
or not they are supported in Netscape, Internet Explorer, or Opera.
- You may want to use the Opera
browser (which can be downloaded for free) to test your web pages that
use styles.
Penn State Behrend Home
| Computer Center Home
This page is maintained by Carolyn Dudas
Updated May 21, 2002