Business Sites     

 Web Applications      Web Site Hosting      Search Engine     
CompanyWeb.net: Web Hosting, Internet Programming, Search Engine Optimization

 

 


   

CompanyWeb Articles

Book Reviews
Columns

Web-Source Topics...

Horse's Mouth
ProBizTips

CompanyWeb Search


 
Web Design Master Series Article

Web Design Master Series Article is syndicated from Web-Source.net.

Syndicated articles are written by independent authors and the contents represent the author's views. The content of the article does not necessarily represent the views of Company Web staff and management.

Master Series

Cascading Style Sheets (CSS); Learning More

By William Bontrager

In the "Cascading Style Sheets (CSS) -- Getting Started" article, the first in this series, you learned how to use an external style sheet. You simply include one line of code on your pages to affect the entire page with the style specified in that external style sheet.

This article will show you how to embed a style sheet directly into your web page. It will also show you how to define custom styles, styles not associated with any particular HTML tags.

There are four ways a style can be applied to a web page: 
     1. Styles are specified through the use of an external 
        file, a method called "external style sheet" or 
        "linked style sheet." There is one file on your 
        site that specifies the styles. Then, one line in 
        each of your web pages links to that file. To change 
        the style on all your web pages, simply change the 
        external file. This is the method you learned in 
        the first article in this series.

     2. Styles are specified in the HEAD area of each page 
        the style is applied to. This method is called 
        "embedded style sheet" and is the method you'll 
        learn in this article.

     3. A style is specified in the actual HTML tag where 
        the style is applied. This is called an "inline 
        style." This will be addresses in a future article.

     4. A combination of embedded and external style sheets. 
        For this, each page has an embedded style sheet. 
        Within the embedded style sheet are certain codes 
        that import one or more external style sheets. This 
        method is called "imported style sheet." This will 
        be addresses in a future article.

Using an Embedded Style Sheet

To use an embedded style sheet, create a test page and insert these seven lines into the HEAD area:

<STYLE TYPE="text/css">
<!--
BODY, TD, P, LI, BLOCKQUOTE { 
   font-family: sans-serif;
   }
-->
</STYLE>

There is no need to upload the test page to your server. It can be tested right from your hard drive.

That's all there is to it. The text on your test page is "magically" converted to a sans-serif font according to the style you've defined.

Note: If you have FONT tags specified in the source code of your test page, those will need to be removed so the CSS style can do its job.

You can specify exact font names instead of the generic sans-serif, serif, or monospace. If the font name is available on the user's computer then it will be used. Arial and Helvetica are common sans-serif fonts for PC and Mac desktop computers. To control the exact font name to be used, with backups in case the one you specify isn't available on the user's computer, list the font names in order of preference, separated with a comma.

You've undoubtedly noticed that the method of defining a style is exactly the same whether you're using the embedded style sheet presented in this article or the external style sheet presented in "Cascading Style Sheets (CSS) -- Getting Started"

If you used the CSS definitions presented in that previous article and made them into an embedded style sheet, this would be the result:

<STYLE TYPE="text/css">
<!--
BODY, TD, P, LI, BLOCKQUOTE { 
   font-family: arial,helvetica,sans-serif;
   font-size: 14px;
   color: #000000;
   }

H1 {
   font-size: 36px;
   font-weight: bold;
   text-align: center;
   color: red;
   background: blue;
   }

A:link {
   color: yellow;
   background: red;
   font-weight: bold;
   }

A:active {
   text-decoration: underline;
   }

A:visited {
   color: red;
   background: yellow;
   font-style: italic;
   text-decoration: line-through;
   }

A:hover {
   text-decoration: none;
   color: purple;
   background: pink;
   font-size: 22px;
   font-weight: bold;
   }
-->
</STYLE>

The method of specifying styles is the same whether you embed the style sheet or use an external file.

Using an external style sheet, all the style definitions are contained in one file. Using an embedded style sheet, each page has it's own definitions. With the former, you can change the style of many web pages by changing only the one file containing the style definitions. With the latter, you can change the style of individual pages with no effect on others.

Defining and Using Custom Styles

Regardless of what type of style sheet you use, you can define your own custom styles.

When you create a custom style, the name you give the style must not match any HTML tags. When you define the style, the name must begin with a period, but when you use the style then don't type the period.

Here is an example of a basic style for common text tags and a custom style:

<STYLE TYPE="text/css">
<!--
BODY, TD, P, LI, BLOCKQUOTE { 
   font-family: arial,helvetica,sans-serif;
   font-size: 14px;
   color: #000000;
   }

.reallybad {
   font-size: 24px;
   font-weight: bold;
   font-style: italic;
   text-decoration: underline;
   color: #CCCCCC;
   background: #333333;
   }
-->
</STYLE>

Custom styles are used within HTML tags to change the style of the entire tag -- DIV, SPAN, P, TD, etc. A custom style, once defined, is called a "class." Thus, to use a certain style, you use the "class" attribute and the class name as the value. When you specify a style in an HTML tag, it overrides whatever style, if any, that was previously defined for that tag. Here are a couple examples:

<p class="reallybad">Hello everyone!</p>
<p>Hello <span class="reallybad">everyone!</span></p>

In the first example line, the entire paragraph is printed with style "reallybad". In the second line, only the word "everyone!" is printed with that style ("Hello" being printed with whatever style is defined for the P tag).

You can define and use as many different custom styles as you please.

Some of the styles demonstrated in the examples cause dramatic effects. They serve to demonstrate possibilities. Your actual implementation will probably be more pleasant to the eyes.

Will Bontrager

About the Author:

Copyright 2003 Bontrager Connection, LLC
William Bontrager Programmer/Publisher, "WillMaster Possibilities" ezine mailto:[email protected]

Are you looking for top quality scripts? Visit Willmaster and check out his highly acclaimed Master Series scripts. Some free, some for a fee.
More Master Series Articles...

 

 

Frontpage, NT are Trademarks of Microsoft Corporation. CompanyWeb Site Copyright (c) 1998 - 2003, CompanyWeb.net Site Development Service Group.