Intigrating Styles to Web page

Linking to an External Style Sheet

An external style sheet may be linked to an HTML document through HTML's LINK element

<LINK REL=StyleSheet href="aural.css" TYPE="text/css">

Embedding a Style Sheet

A style sheet may be embedded in a document with the STYLE element

<STYLE TYPE="text/css">
        BODY { background: url(foo.gif) red; color: black } 
        P EM { background: yellow; color: black }
        .note { margin-left: 5em; margin-right: 5em }
</STYLE> 

Importing a Style Sheet

A style sheet may be imported with CSS's @import statement. This statement may be used in a CSS file or inside the STYLE element:

<STYLE TYPE="text/css" MEDIA="screen, projection">
      @import url(http://www.htmlhelp.com/style.css);
      @import url(/stylesheets/punk.css);
       DT { background: yellow; color: black }
</STYLE>

Inlining Style

Style may be inlined using the STYLE attribute. The STYLE attribute may be applied to any BODY element (including BODY itself) except for BASEFONT, PARAM, and SCRIPT. The attribute takes as its value any number of CSS declarations, where each declaration is separated by a semicolon. An example follows:

<P STYLE="color: red; font-family: 'New Century Schoolbook', serif">
This paragraph is styled in red with the New Century Schoolbook font, if available.
</P>

The CLASS Attribute

The CLASS attribute is used to specify the style class to which the element belongs. For example, the style sheet may have created the punk and warning classes:

.punk { color: lime; background: #ff80c0 }

These classes could be referenced in HTML with the CLASS attribute:

<H1 CLASS=punk>Proprietary Extensions</H1>

The ID Attribute

The ID attribute is used to define a unique style for an element. A CSS rule such as

#wdg97 { font-size: larger }

may be applied in HTML through the ID attribute:

<P ID=wdg97>Welcome to the Web Design Group!</P>