=================================================================
** SiteBuilderNews - 2/06/2002 Issue
** Helping You Build A Better Website
=================================================================

In This Issue of SiteBuilderNews:

=> 1. Editor's Note
=> 2. Article: Introduction To Cascading Style Sheets
=> 3. Site Builder Tip
=> 4. Sites for Site Builders
=> 5. Site Builder News

=================================================================
SPONSOR AD:
=================================================================

Your-Site: Superior, Affordable Web Hosting!

* 50 MB Disk Space
* 25 POP3 E-Mail Accounts
* 6 Gigs Transfer
* Your own cgi-bin
* 24/7 FTP Access
* 99.9% Guaranteed Uptime
* Plus Much More!

ONLY $5 PER MONTH! http://www.sitebuildernews.com/yoursite.php

=================================================================
1. Editor's Note
=================================================================

"Cascading Style Sheets" can sound like something intimidating,
while they really aren't. Implementing CSS in your website can be
very useful in controlling the look of your website, maintaining
consistency and minimizing update time.

This week's article introduces you to writing basic CSS code.

--
Dan Grossman, Editor
edi-@sitebuildernews.com

=================================================================
=================================================================

Upgrade to receive HTML version of SiteBuilderNews! Subscribe
for free at mailto:sitebuildernews-@topica.com

=================================================================
2. Feature Article:
=================================================================

Introduction To Cascading Style Sheets
by 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
the power and flexibility of the style sheet. In this article,
I’m going to describe what cascading style sheets are, their
benefits, and two ways to implement them.

---------------------------------------
Cascading whats?
---------------------------------------

Cascading Style Sheets...that’s what! They’re what paint is to
canvas, what topping is to ice cream... they complement HTML
and allow us to define the style (look and feel) for our entire
site in just one file!

Cascading style sheets were introduced to the web development
world way back in 1996. They get their name from the fact that
each different style declaration can be "cascaded" under the
one above it, forming a parent-child relationship between the
styles.

They were quickly standardized, and both Internet Explorer and
Netscape built their latest browser releases to match the CSS
standard (or, to match it as closely as they could).

So, you’re still asking what a style sheet exactly is? A style
sheet is a free-flowing document that can either be referenced
by, or included into a HTML document. Style sheets use blocks
of formatted code to define styles for existing HTML elements,
or new styles, called classes.

Style sheets can be used to change the height of some text, to
change the background color of a page, to set the default border
color of a table...the list goes on and on. Put simply though,
style sheets are used to set the formatting, color scheme and
style of an HTML page.

Style sheets should be used instead of the standard <font>, <b>,
<i> and <u> tags because:

- One style sheet can be referenced from many pages, meaning
that each file is kept to a minimum size and only requires
only extra line to load the external style sheet file

- If you ever need to change any part of your sites look/feel,
it can be done quickly and only needs to be done in one
place: the style sheet.

- With cascading style sheets, there are many, many page
attributes that simply cannot be set without them:
individual tags can have different background colors,
borders, indents, shadows, etc.

Style sheets can either be inline (included as part of a HTML
document), or, referenced externally (Contained in a separate
file and referenced from the HTML document). Inline style sheets
are contained wholly within a HTML document and will only
change the look and layout of that HTML file.

Open your favorite text editor and enter the following code.
Save the file as stylesheet.html and open it in your browser:

<html>
<head>
<title> Cascading Style Sheet Example </title>
<style>
h1
{
color: #636594;
font-family: Verdana;
size: 18pt;
}
</style>
</head>
<body>
<h1>This is one big H1 tag!</h1>
</body>
</html>

When you fire up your browser, you should see the text "This is
one big H1 tag!" in a large, blue Verdana font face.

Let’s step through the style code step by step. Firstly, we have
a pretty standard HTML header. The page starts with the <html>
tag followed by the <head> tag. Next, we use a standard <title>
tag to set the title of the page we are working with.

Notice, though, that before the <head> tag is closed, we have
our <style> tag, its contents, and then the closing </style> tag.

<style>
h1
{
color: #636594;
font-family: Verdana;
size: 18pt;
}
</style>

When you add the style sheet code inline (as part of the HTML
document), it must be bound by <style> and </style> tags
respectively. Our example is working with the <h1> tag. We are
changing three attributes of the <h1>’s style: the text color
(color), the font that any <h1> tags on the page will be
displayed in (font-family), and lastly, the size of the font
(size).

The code between the { and } are known as the attributes. Our
sample code has three. Try changing the hexadecimal value of
the color attribute to #A00808 and then save and refresh the
page. You should see the same text, just coloured red instead
of blue.

---------------------------------------
An example of an external style sheet
---------------------------------------

External style sheets are similar to internal style sheets,
however, they are stripped of the <style> and </style> tags,
and need to be referenced from another HTML file to be used.

Create a new file called "mystyle.css" and enter the following
code into it:

h1
{
color: #a00808;
font-family: Verdana;
size: 18pt
}

Next, create a HTML file and name it external.html. Enter the
following code into external.html:

<html>
<head>
<title> External Style Sheet Reference Example </title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is one big H1 tag!</h1>
</body>
</html>

As mentioned above, you can see that the actual code in
mystyle.css is exactly the same as it was in the inline example.
In our HTML file, we simply place a <link> tag in the <head>
section of our page. The rel="stylesheet" attribute tells the
browser that the link to the external file is a style sheet.
The type="text/css" attribute tells the browser that mystyle.css
is a text file containing css (cascading style sheet)
declarations. Lastly, the href="mystyle.css" attribute tells
the browser that the actual file we want to load is mystyle.css.

---------------------------------------
Conclusion
---------------------------------------

Well, there you have it, a quick look at style sheets and how
to implement both an inline and external version. Checkout the
links below if you’ve never worked with cascading style sheets
before. You will be surprised at some of the things you can do
with them!

- http://www.devarticles.com/art/1/7
- http://hotwired.lycos.com/webmonkey/98/15/index0a.html
- http://www.webreview.com/style/index.shtml
- http://jigsaw.w3.org/css-validator/

-----------------------------------------------------------------
Mitchell is the founder and senior editor of
http://www.devarticles.com. DevArticles provides its readers
with top quality ASP, PHP and .NET articles, interviews and
product reviews. If you're looking for insider tips and tricks,
you'll also find them at DevArticles. You can visit DevArticles
by clicking on this link: http://www.devarticles.com M

=================================================================

Reach thousands of subscribers! For ad details and prices, email:
mailto:edi-@sitebuildernews.com?subject=ad_inquiry

=================================================================
3. Site Builder Tip
=================================================================

This Week's Tip: Email Overload - HELP!

A while back I was swamped.
I wasn't sure if I was going to see the light of day.
Was I ever going to spend time with my family?

Does this sound like you?

Here's a simple, but very important tip - Don't let that email
pile up!

Oh, you may only be getting 25 emails a day right now, but just
wait. As you take off in your internet business, you will be
getting more. Try 500 emails per day.

Here are some tips:

1. Set up filters in your email program
2. Deal with the email as it arrives, as much as possible. (You
will also impress the sender.)
3. Do not "save it 'til later" unless you absolutely have to.

4. By all means, keep this in mind -- "Work Smarter, Not Harder"

-----------------------------------------------------------------
Deborah Anderson, of AndersonCreations.com, teaches web design
and internet marketing in addition to publishing Webmaster Tips
Weekly. Subscribe free by sending a blank email to
mailto:subsc-@webmaster-tips-weekly.com
http://webmaster-tips-weekly.com/webtips

=================================================================
4. Sites for Site Builders
=================================================================

Google Programming Contest

With many of our subscribers being web developers, you may have
the skills it takes to enter the Google Programming Contest.
You're given 900,000 pre-processed and raw webpages to work with,
your task being to come up with a program that does something
both interesting and scalable with this information.

Check it out at... http://www.google.com/programming-contest/

=================================================================
5. Site Builder News
=================================================================

SUN, BEA and Microsoft work on Web Services standards
http://c.moreover.com/click/here.pl?p31707225

IT giants back web services standards
http://c.moreover.com/click/here.pl?p31695327

EDS Nets $15 Million Contract for Web Hosting, Managed Storage
http://c.moreover.com/click/here.pl?p31680105

Pulse tool adds audio to Web sites
http://c.moreover.com/click/here.pl?p31676584

Professional Website Marketing Strategies
http://c.moreover.com/click/here.pl?p31673686

XAO Delivers Web System Development Tools
http://c.moreover.com/click/here.pl?p31649584

Web site tracking tool now available from Nedstat
http://c.moreover.com/click/here.pl?p31645221

=================================================================
=================================================================

Do you know someone who has a website or would like to create
one? Forward them a copy of this eZine and urge them to
subscribe!

To subscribe send a blank email to:
mailto:sitebuilderne-@topica.com

=================================================================
=================================================================

Send suggestions and comments to: edi-@SiteBuilderNews.com

Reach thousands of subscribers! For ad details and prices, visit
our media kit at http://www.sitebuildernews.com/advertise.php

SiteBuilderNews is © 2000-2001 Dan Grossman. All Rights Reserved.
No part of this newsletter may be reproduced in whole or in part
without written permission. All guest articles are copyright
their respective owners and are reproduced with permission.

© 2000-2004 SiteBuilderNews.com. A division of Awio Web Services LLC. · Advertising · Contact