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 link colors are decided, the font attributes can be associated to the header and left menu. After the .head and .leftmenu, add a space then, “{font-family: Arial, Helvetica, sans-serif; font-size: 11pt; font-weight: normal; text-transform: capitalize;}”. To explain, we are specifying any area of text with the .head style will use one font (font-family), be a uniform size (font-size), have a uniform weight (font-weight), and regardless of typing be transformed to capitals (text-transform). A modified version should be added to the left menu.

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:



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

If it was decided to upload the sheet and call upon the file on each page, add, “”. Once again, this should be placed between the and 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:







etc…

Home

Next link

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

Home

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

The entire paragraph of text is affected

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

Outsourcing CSS - What To Look For

Most web publishers and companies are beginning to realize that cascading style sheets (CSS) is a good idea. CSS allows for individuals to make changes to all of their web pages that link to the CSS file at one time, by simply changing the style sheet. Th

The Continuing Development of CSS as a Web Standard

Cascading style sheets were formally introduced by the W3C in 1997 and in the nine years since have made gradual progress to becoming a web standard. Although the W3C mandates style sheets instead of HTML formatting for internal styles, many web designers

Hacked Off With CSS?

Many webmasters/designers are now using CSS for layout purposes on their sites to ensure web current web standards are met. But with current trends it can be hard to predict the exact look of a site across the complete range of browsers.

Why Your Website CRAVES to Have a Little CSS

If you’re a small business owner who wants a website (or already has one and wants a few tips), I’d like to give you a little advice if I may. When you’re looking for a website designer, ask her if she uses CSS. In fact, you could go one better and ask he

CSS Benefits in Search Engine Optimization (SEO)

1. File size - Always be reminded that web pages of a particular website should be light in terms of file size. It would be hard for search engine spiders to categorize an overly heavy web page filled with HTML ""junk text"".