DESIGNING WITH STYLE

 One important aspect of good design is to give your site a
theme and coherence. A great deal of this can be done using
a stylesheet.

Using stylesheets is not difficult. In fact it makes the
task of designing a website that much easier. However many
new designers don't use them.

But before dispelling some of the confusion, let us look at
the advantages of using CSS - cascading style sheets.

ADVANTAGES

1) You can use an external stylesheet to control the look
and appearance of your whole website, such as the font
size, style, and color, the background image, the
background color, etc... by changing a single file. You
don't need to edit every page.

2) Linking to a stylesheet reduces the size of your web
pages and gives you much cleaner HTML code because you
don't need to specify the font, color, or "style" of every
element on your page.

3) Web pages are displayed differently on different
browsers and platforms. For example a 10pt font looks fine
on a PC but becomes too small on a Mac. You can use a
browser-detection script in the header of your pages which
will link to a different stylesheet depending on which
browser is being used.

The rest of this article assumes you have a basic
understanding of HTML tags, the code behind your web pages.
If not you can get our simple HTML tutorial at -
http://www.thewebseye.com/HTML.htm.

Now using stylesheets is actually easier than HTML. The
main cause of confusion is that you can either link your
web pages to an external stylesheet, or you can include the
style sheet in the header of individual web pages inside
STYLE tags. Web design software does not always make this
clear unless you read the HELP pages in detail. Forget your
web design software for a moment, because it is easier to
understand stylesheets if you take a look under the
surface.

An external style sheet can be as simple and powerful as
this:

BODY { background-image: url(images/mybackground.gif);
background-color: #FFFFFF; }

P { FONT-FAMILY: Verdana, Helvetica, sans-serif; FONT-SIZE:
12pt; COLOR: navy }

You copy and paste the above in Notepad, Wordpad or other
text or HTML editor, and save it as "mystyle.css". Put this
stylesheet in the same directory as your HTML files. Note
the ".css" extension is important. Then you link your web
pages to this stylesheet by putting the following code in
the HEAD area of your pages.

< link rel="STYLESHEET" type="text/css" href="mystyle.css" >

It is now easy to change the background image or color of
your site by simply changing the variables in the
stylesheet. You can also change how the text in your in
your website looks Anything in "P" tags on your web pages
takes on the "P" attributes specified in the stylesheet.
The above will make your pages display Verdana text (and
you give the option of Helvetica and sans-serif in case
your visitor's computer does not support the first choice)
which is 12 pt and navy.

The next source of confusion is the use of the CLASS
attribute. But this is also real easy and very powerful. It
is best explained by adding another style to our stylesheet
explained above.

P.redtext { FONT-FAMILY: Verdana, Helvetica, sans-serif;
FONT-SIZE: 12pt; COLOR: red }

Now what this allows you to do is make certain blocks of
text red. In your web pages, instead of a simple "P"
tag around your text, you would add
class="redtext" to the "P" tag and the text inside the tags would be
red.

You can have any number of classes and assign classes not
only to P tags, but also to your table data TD, your
links "A" and any tag contained in the "BODY" of your web
pages. And by simply changing the stylesheet you can change
the look of your whole site. Are you beginning to see the
power of using style?

It is however important to realize Netscape and Internet
Explorer deal with stylesheets differently and Netscape
does not support them as fully as IE. Netscape basically
takes the inheritance a step too far. The only way to find
out what goes and what doesn't is by trial and error,
however there are a couple of resources which will help you
a long way with understanding more about stylesheets. We
have listed links to these resources at
http://www.thewebseye.com/stylesheets.htm.

With simple stylesheets you should have no problem and they
will really help to make sure your site keeps a certain
amount of uniformity and cohesion.

About the Author

Richard Igoe - http://www.TheWebsEYE.com. Get his latest Free Website
Success Course by sending a blank email to
mailto:wsc@quicktell.net and find out whether you have the
6 essentials of a successful site!

 Richard Igoe

More Articles 

Cross Browser Compatibility - Warren Baker
There are literally hundreds of web browsers in use around the world. All of them implement the W3C document standards a little differently. Web designers must wrestle with these differences to make a web site work. This article discusses the...

Introduction To Cascading Style Sheets - Mitchell Harper
CSS (Cascading Style Sheets) have been around for a while now, and act as a complement to plain old HTML files. Style sheets allow a developer to separate HTML code from formatting rules and styles. It seems like many HTML beginners’ under-estimate...

Why do you want a good web design & hosting on a good server..? - Sachin
The answer is very simple for this question. Because a good web design attracts user and some time visitor loves the design and bookmark the same site for future visits or for future reference or might be interested in making the same web design...

HTML email greeting? - Florie Lyn Masarate
For those who want to be among the throng who are rushing to send out their greeting cards via every possible types of mail service, then online greeting it is. Although this is a wise choice, it is important to note that there are some...

How To Design Your Web Site With CSS - Herman Drost
Cascading Style Sheets (CSS) allows you to create fast loading pages, increase your search engine rankings, and modify your whole site with one style sheet. So why don’t more people use them? This is because they got so used to html design and are...

Benefits Of Making Your Website Accessible To Disabled Users – Part 2: The Business Case - Trenton Moss
The Disability Discrimination Act states that service providers must not discriminate against disabled people. A website is regarded as a service and therefore comes under this law. Some organisations are changing to their websites, but many are...

Why Doing It Yourself is Best - Lee Asher
There are two ways that most people who create web pages do it: either they hire a professional web designer, or they use some visual HTML editing software. You could say that hiring a designer is like getting someone to make furniture for you...

Dreamweaver: Your Professional Touch - Lee Asher
Dreamweaver is sometimes seen as FrontPage's main competitor but, really, there's not even a comparison to be made. Dreamweaver might be expensive, sure, but there are serious web designers out there using it and getting work done - I...

The Smaller, the Better: Avoiding Graphical Overload - Lee Asher
When you're designing your website, it's easy to start loading it up with graphics, creating images that you think look good and piecing them together to make a design. While it's a tempting way to do things, you have to try to avoid it as...

Avoid Graphical Overload - Ron King
When designing a website, it's easy to start loading it up with graphics. While tempting, you have to resist -- otherwise, you'll end up with graphical overload. Why is that a bad thing? Here's why. It Takes Too Long to Download ...

Codes and Scripts at your Fingertips - Tom Takihi
Creating beautiful websites is no longer the monopoly of techies. Now, with web designing codes made available through the Internet, anyone can dabble into the exciting world of web development and web design. During the early...

Understanding Computer Graphics Formats - David Manson
Computer graphics can add life to any project but using the wrong format can mean that you could end up with a poor quality image or large file. Computer store images in different ways, as a bitmap where image information are stored in pixels or...