Contact:
Email at:
Website Design Products
» DNS Management» Domain Registration Transfer Renewal» Cheap Website HostingWebsite Design Services
» Website Design
Website Design Articles
The Meta Tag Myth Some Useful Common Site Ideas Stopping All The Talk And Getting Readers To ReadWebsiteDays.com for ireland blarney
Click on your region below to contact a Websitedays.com designer, or Websitedays.com sales person for info about Online Website builder system.
You can also send an email to
and we can forward your enquiry to respective designers in your area.
» CSS – Site Design Basics Part One
Article submitted in category: Web Design And Development
Tags: | style | sheet | style sheet | css | website | text | each | tags | add | page | used | head | color | file
CSS – Site Design Basics Part One by: Michael J Medeiros
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:
<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
This article was posted on February 21, 2005
© Copyright All rights reserved WebsiteDays.com