Site Name
 

 

Your Link 1
 

Your Link 2
 

Your Link 3
 

Your Link 4
 

Your Link 5

 

 

 
 

2000 Web Site Templates Like this at Webmasters Profit Pak

Using Web Templates for Web Design: Tips and Best Practices--Style Sheets

Linking Styles to Documents

There are four ways to link styles to elements in HTML documents:
  • Inline Styles - apply a style sheet statement to an individual element (tag) using the STYLE= attribute with most HTML tags.
  • Internal Style Sheet - use the HTML <STYLE></STYLE> container to enclose one or more style statements; this is included in the <HEAD> section of the HTML file.
  • External/Linked Style Sheet - Link an external style sheet to the document using the <LINK> element. This method allows you to maintain a single style sheet and apply it easily to multiple HTML pages.
  • Imported Style Sheet - Import a style sheet using the CSS @import notation. This method is used to automatically import and merge an external style sheet with the current style sheet.

The STYLE= Attribute - Inline Styles

Wherever you previously used a formatting attribute (e.g., ALIGN=, TYPE=, BGCOLOR=, etc.) or a separate character formatting tag (e.g., <FONT>, <B>, <I>, etc.), you can now replace it with a "style property." This is done by using STYLE= attribute within individual container tags. However, for the value of the attribute, use only the "declaration" portion of the style syntax (separating each style declaration with a semicolon ; ). See example below:

STYLE="text-align: justify; font-family: arial, 
  helvetica, sans-serif;"

The example below uses two properties: background-color and font-family within the <SPAN></SPAN> container.

This coding: 
<SPAN STYLE="background-color: #ffcccc; 
font-family: arial, helvetica, sans-serif;">
This paragraph is in bold and italics</SPAN>
Produces this effect:

This text is on a pink background and in a different font.

The <SPAN> tag is new in HTML 4.01 and is specifically for adding inline style information to a "span" of text. Use the <SPAN> tag for small areas of text, within a paragraph, that you wish to apply style information to.

When you want to apply inline style information to an entire paragraph, it is better to use the STYLE= attribute with the <P></P> container tag. In addition, the STYLE= attribute can be used with most other HTML tags to apply inline style information. The only tags that cannot use the STYLE= attribute are: BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE, and TITLE. See more inline style examples below:

    <H1 style="color: red">Cascading Style Sheets</H1>
    <P style="text-indent: 5em">Styles may be used to:
    <UL style="list-style: square">
      <LI>change the appearance of text
      <LI>set margins and justification
      <LI>indent the first line of a paragraph
    </UL></P>

Finally, for applying inline style information to large amounts of text (containing other markup) it is best to use the <DIV></DIV> container with the STYLE= attribute. See the example coding below:

<DIV STYLE="background: #ffffcc; 
    font-family: arial, helvetica, sans-serif;">

  <A HREF="http://www.loc.gov/poetry/">Poetry 
    in America: A Library of Congress Bicentennial Celebration</A>
<BR> 
    Poet Laureate Robert Pinsky and other renowned poets and 
individuals will read their favorite poems and participate in a 
symposium, <CITE>"Poetry and the American People,"</CITE> 
at the Library on April 3 and 4. The event will be cybercast live.

  </DIV>

Inline styles work well when applying a style, one time, to an individual tag. However, if you want to use the same style many times in the same document (or in a series of documents) it is much better to create a single style sheet, then apply the styles as needed throughout the document.

The <STYLE> Tag - Internal Style Sheets

The simplest way to apply a style sheet (with multiple statements) to a single HTML document is by enclosing it in the <STYLE> tag. The <STYLE> tag is an HTML container (both the opening and closing tags are required). It is also an "invisible" HTML element -- its contents do not display in the Web browser window. The <STYLE> tag goes in the <HEAD> section of an HTML document (see example below).

<HTML>
<HEAD>
  <TITLE>Test page for CSS</TITLE>
  <STYLE TYPE="text/css">
H1, H2, H3, H4, H5, H6 { color: red; background: transparent; }
  </STYLE>
</HEAD>
<BODY>
    <H1>Cascading Style Sheets</H1>
    <P>Styles may be used to:
    <UL>
      <LI>change the appearance of text
      <LI>set margins and jusitification
      <LI>indent the first line of a paragraph
    </UL>
</BODY>
</HTML>

Note - Some early versions of browsers (such as Netscape 1 and Internet Explorer 2) do not recognize the <STYLE></STYLE> container tag. As a result, they not only don't apply the styles to the document, but also will display the actual style statements in the browser window (which is not desirable). Therefore, it is a good idea to enclose the "style sheet" statements in an HTML comment tag in order to prevent this behavior (see example below).

<HTML>
<HEAD>
  <TITLE>Test page for CSS</TITLE>
  <STYLE TYPE="text/css">
  <!--
    H1, H2, H3, H4, H5, H6 { color: red; background: transparent; }
  -->
  </STYLE>
</HEAD>

In both examples, all of the header container tags (<H1></H1>, etc.) have been set to display in red, with a transparent background (always set the background to "transparent" when you want the main background color to bleed through). This means that all items tagged as <H1> in the document will display in red. No further coding is needed.