HCI 201 Fall 1999:Types of Style Sheets

HCI 201 Multimedia and the World Wide Web

Inline styles
- Adding the STYLE attribute in the HTML tag itself
- Best to use to override higher level rules.
- Example: <P STYLE="color: maroon; font-size: 16pt"> [see it]
Embedded style sheet
- A style block defined with the <STYLE> </STYLE> tag in the header of an HTML document
- May be necessary to surround the contents of the style block with comment tags
- Include the attribute: TYPE="text/css"
- Example [see it]
External style sheet
- A separate file named with the extension ".css" containing the style sheet information.
- A simple text document containing style sheet rules. It may not contain HTML tags.
- The same style sheet can be used for multiple pages.
- Two ways to refer to external style sheets.
  - Linking -- Using a <LINK> stand-alone tag in the HTML document header
    - Example: <HEAD><LINK REL="stylesheet" HREF="pathname/stylesheet.css" TYPE="text/css"></HEAD>
    - Example: [see it]
  - Importing -- Using the @IMPORT function in an embedded <STYLE> block
    - Only works in Explorer 4.0
    - Example: <STYLE> @IMPORT url(http://pathname/stylesheet.css); </STYLE>