When it comes to designing a Website, there are several modern programming techniques that can make the designer’s task much easier. Once the content and focus of the Website is decided, layout should become the focus of development. What fonts will be used for the various links and text? Which color will be used to make certain links more prominent than others? Most importantly, how will the designer ensure the entire Website has an isometric appearance? If used properly, CSS can accomplish those tasks, while reducing bandwidth and increasing page-load timeframes.

WHAT IS CSS AND HOW CAN IT BE USED?

CSS is an abbreviation for Cascading Style Sheet. It can consist of several lines of text to control content appearance within a Webpage, or multiple pages within a Website. There are two common ways that a Style Sheet can be used. First, it can be added to the, “head,” of each individual Webpage. A more efficient way to implement a Style Sheet, is to up-load the file into a Directory on a Website, and utilize an include tag.

Posting the style sheet within the head of each page will increase the amount of bandwidth used and slightly affect the download speed of pages. This is dependent on the size of a particular site and the number of styles included on the CSS. If a change-of-style is decided upon in the future, each individual Webpage will require editing, to affect the entire Website. For example, if a designer wished to apply a holiday theme around Christmas, he or she would need to edit the CSS on every page for the change to take affect.

In contrast, a CSS file can be uploaded onto a Host. Once uploaded, a designer can use a simple include tag, to call upon the style sheet. This method-of-use can reduce the amount of bandwidth used and increase speed times, as some visitors will have the CSS stored on their computers following the first page load. Additionally, it will make style changes much easier as only one file needs to be changes to affect all relevant pages within a given Website.

DEVELOPING A STYLE SHEET

Open any text editor with a blank page. Save the page as, something.css”. If it was decided to upload the file for use, this will be the actual file uploaded. Additionally, a designer can copy and paste from this file, if it is to be included within the head of each Webpage.

Before beginning to add actual tags, consider how links should apppear and the various sections of the Website or Webpages. If a Style Sheet becomes sloppy, it will make the designer’s job difficult. Therefore, start simple and keep the CSS clean. The Style Sheet should begin with simple grouping. For example, all pages may be utilizing an identical header and left menu. If the text styles are going to be different, this could be are first two simple groups, along with link formats.

MANAGING HYPERLINKS WITH CSS

With our first two groups we can add five lines to the style sheet. These are (alphabetized) A:LINK, A:HOVER, A:VISITED, .head, and .leftmenu. With these five lines, we can control the appearance of links, visited links, mouse-overs on links, the header of all pages, and the left menu.

Now we are going to add some basic variations to the text. After, A:LINK and A:VISITED,” add a space then, “{color: #004080}”. Notice that no font attributes have been added. This is because we are going to utilize different fonts within the other tags. The only thing being changed on linked text is the color. Change the color to reflect the desired appearance. Note, this can be adjusted to personal preference.

ADDING THE HEADER AND MENU TEXT TO THE STYLE SHEET

Once the desired

Around The Jazz Internet: Feb. 3, 2012
A new crowdfunded festival in Philadelphia, plus Jamal, James and Junebug.

Vanguard Jazz Orchestra: Live At The Village Vanguard
There's a tradition in many New York City jazz clubs: Monday nights are reserved for big bands. The Village Vanguard, the most storied of clubs, has observed this practice since 1966. Watch a live concert webcast at 9 p.m. ET on Monday, Feb. 13.

Clark Terry On Piano Jazz
Legendary trumpeter and educator Clark Terry got his jazz education playing with the Basie Band and Duke Ellington's orchestra. Commanding a wide range of styles and a dazzling technique, Terry went on to become one of the most influential jazz horn players of his generation. In this 1994 session, he joins host Marian McPartland for Ellington's "Come Sunday" and Terry's most famous tune, "Mumbles."

Here is how the CSS should currently appear:

A:link {color: #004080}
A:visited {color: #004080}
A:hover{color:ff3300}
.head “{font-family: Arial, Helvetica, sans-serif; font-size: 11pt;
font-weight: normal; text-transform: capitalize;}
.leftmenu “{font-family: Arial, Helvetica, sans-serif; font-size: 11pt; font-weight: normal; text-transform: capitalize;}

IMPLEMENTING THE STYLE SHEET

If it was decided to past the style sheet onto each page, add:

<STYLE TYPE="text/css"><!—
A:link {color: #004080}
A:visited {color: #004080}
A:hover{color:ff3300}
.head {font-family: Arial, Helvetica, sans-serif; font-size: 11pt;
font-weight: normal; text-transform: capitalize;}
.leftmenu {font-family: Arial, Helvetica, sans-serif; font-size: 11pt;
font-weight: normal; text-transform: capitalize;}
--></STYLE>

- to each page of the site that will utilize the Style Sheet. The style sheet should be placed between the <head> and </head> tags of the document.

If it was decided to upload the sheet and call upon the file on each page, add, “<LINK href="http://links.mjmls.com/ name of the file" type=text/css rel=stylesheet>”. Once again, this should be placed between the <head> and </head> tags. Change the link location to where the style sheet is located on the Web Host.

CALLING THE STYLE SHEET ON WEBPAGES

There are a variety of ways to call upon the different text attributes. This depends widely on site layout. If the site is designed using tables, we can simply specify the style for each cell, rather than each word. For example, the table code could appear as:

<table width=”100%”>
<tr>
<td CLASS=”HEAD”><a href=”http://links.mjmls.com”>Home</a></td>
<td CLASS=”HEAD”>Next link</td> etc…
</tr>
</table>

As a stand-alone link, within the given Webpage, we can add the class tag to the Hyperlink:

<a href=”http://links.mjmls.com” class=”head”>Home</a>

To modify an entire group of stand-alone text, the CSS tag could be added to the paragraph tag:

<p class=”head”>The entire paragraph of text is affected</p>

It could be suggested that calling the style tags are experimented with, prior to modifying an entire Website. By adding class=”head” or class=”leftmenu” to various tags, a new designer will learn how the style tags can work, reduce the size of a Webpage, save bandwidth, and provide a uniform appearance throughout a Website.

In part two, we will demonstrate some other attributes that could be added to different tags and applying CSS to tables.

About The Author

Michael J Medeiros is the owner and founder of www.mjmls.com

Mjmls provides various advertising venues for businesses and individuals including a new Website Directory http://links.mjmls.com