 |
| Your resource center for web design
tips, css tutorials and many more! |
|
|
|
 |
| WEB
DESIGN - Whats Inside:
Basic Rules on Web Design
[ More
] |
|
 |
| HTML
- Whats Inside: Should You Bother
Learning HTML to Build Webpages? [
More ] |
|
|
| CSS
- Whats Inside: CSS Web Site
Design Basics [
More
] |
|
|
|
|
 |
|
CSS Tutorials - Site Design Basics
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 |
|
|
|
|