|
|
|
Bluetooth - Description
Buletooth is a telecommunications technology that allows computers, mobile phones, PDAs, and other enabled devices to connect wirelessly over short distances, and exchange digital information. Bluetooth connections take place over a 2.4 GHz...
Browser Compatibility
Internet Explorer, created by microsoft has been the most popular web browser for many years. But the gap is shrinking with the release of Mozilla Firefox, by an open source community. At the last count it is said that there are 64 million firefox...
Search Engine Friendly Web Design Advice
Online marketers understand the importance of getting top search engine rankings in major search engines. Therefore, they spend many time in optimizing website content, seeking inbound links, and optimizing title and Meta Tags. However, many of...
The Best Web Design Programs
Who doesn’t own a webpage nowadays? If you’re thinking about spicing up your webpage or (heaven forbid) move your webpage off that blogging host, consider some of these web design programs that will make mastering the art of html a breeze (well, not...
Web Design and Development: The Right Tools for the Right Job
Web Design and Development: The Right Tools for the Right
Job
As any webmaster knows, designing and developing a website can
be a daunting proposition. There are millions of websites out
there to compete with, and whether your site's...
|
|
| |
|
|
|
|
CSS – Site Design Basics Part One
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
|
|
|
|
|
|