Search
Recommended Products
Related Links


 
 

 

 

Informative Articles

Avoid Graphical Overload
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 ...

CSS and the End of Tables
In the bad old days of the web, the only way to create even slightly complex layouts was to use tables. Some sites featured silly numbers of tables, one inside the other, to create relatively simple-looking effects. With CSS, though, tables...

Design vs. SEO: Can My Site Look Good And Rank Well?
Do you have to sacrifice all of the creative and artistic elements of your web site to rank in the search engines? Later in this article I'll show you a real case scenario and the design and SEO approach used. Thanks to the birth of...

Effective Website Design
One of the most commonly overlooked elements of an effective E-Business is the very thing that is essential to your success. Something as simple as the design of your website can make or break your business. Each consumer has their own set...

Goofy Mistakes that Hurt Your Search Engine Rankings
One thing is for sure, you don't want to spend hours, perhaps days, months, or years on a website to have some stupid little mistake get your site dropped or never even listed in the search engines. There are a lot of rules that search engines have...

Nvu Review
Ongoing growth in the availability of strong open source applications encourage keeping an eye out for Open Source alternatives to commercial applications. With the release of Nvu there is a potential alternative to FrontPage, GoLive and...

Online comparison shopping at Christmas
Credit can often be the first thing we think of at Christmas, whether it's taking out a personal loan, credit card or simply the extension of an overdraft. However, saving money at Christmas isn't just a matter of searching for the best personal...

Score BIG With The Search Engines - Maximising Your Site's Potential
I often get asked, "How do I improve my site's performance in the search engine's." or "I have a small budget, how can I compete with the larger sites." It can seem daunting when you type in your key search term and you see Google returning...

The Secret Benefit Of Search Engine Optimisation: Increased Usability
A higher search ranking is what many website owners dream of. What they don't realise is that by optimising their site for the search engines, if done correctly, they can also optimise it for their site visitors. Ultimately this means more...

Webmaster Secrets for Top 10 Search Results in Google, Yahoo and MSN.
In the following article a very simple 3 step process will reveal just how simple search engine optimisation can be once you know how. There are multitudes of websites that will theorise you to death about engine algorithms, page rank formulas,...

 
 
 
CSS: The Basics - ID's and Classes ... Correct

Css

Cascading Style Sheets

Two types of style sheets: Internal and External

Internal - You insert your style code right into your html code.
These stylesheets should only be used if you are intending to
create a specific page with a specific style. If you want to be
able to make global changes to your website using only one style
sheet, you have to use....

External Stylesheets - Instead of putting all the style code into
your html code, you can create a single document with your css
code and link to it within your webpages code. It would look
something like this

{head}
{title}Webpage title{ itle}
{link rel="stylesheet" type="text/css"
href="http://www.yourdomain.com/css"}
{/head}

If you decide to use an internal stylesheet, you have to put your
css style wihin the following tags:

{style type="text/css"}
{/style}

All css or links to the external stylesheets have to go in
between the {head} tags

Now about Css Classes vs. ID's

The one major difference between a class and an id is that
classes can be used multiple times within the same page while an
Id can only be used once per page.

Example:

ID - The global navigation of your site, or a navigation bar. A
footer, header, etc. Only items that appear in only one place
per page.

Class - Anything that you would use multiple times in your page,
such as titles, subtitles, headlines, and the like.

Creating ID 's

To create an Id in your css, you would start with the number sign
(#) and then your label of the id. Here's an example

#navigation {
float:left;
}

To insert the id in your html, you would do something like this

{div id="navigation"}
{/div}

You can also insert an id within another one like this

{div id="navigation"}
{div id="left}

{/div}
{/div}

Remember to close the id's in order.

Now, onto css classes.

Creating Classes

To create a class

 


in your css, use this

.subtitle {
color: #000000;
}

To insert the class into your html, do this

{p class="subtitle"}
{/p}

Now, you can use the same class repeatedly in the same page
unlike Id's.

I also want to tell you something about link attributes. You
should always keep them in this order:

a {
color: #006699;
text-decoration: none;
font-size: 100%;
}

a:link {
color: #006699;
text-decoration: none;
}

a:visited {
color: #006699;
text-decoration: none;
}

a:hover {
color: #0000FF;
text-decoration: underline;
}

a:active {
color: #FF0000
}

Of course, you can change the colors and text-decorations. This
is just something I cut out of my code!

Okay, these are the basics. What I highly recommend is to go and
download Topstyle Lite by going here:

http://www.bradsoft.com opstyle slite/index.asp

It's free and is a very helpful css editor. It not only color
codes and organizes your code, but it provides you with tons of
attributes that you can add to your class and id elements with
just a click. They also provide a screen at the bottom to view your
css code as you create it. Very useful for a free edition and
I'm looking to buy the pro version soon.

Now, this was just a very very brief explanation of the vital
elements needed when structuring your css. I have a good feeling
that when you download top style lite, you will learn how to use
the hundreds of attributes in your classes and id's

Good Luck in Your Web Designing Efforts!

P.S Change { and } to < and >

About the Author

Eric McArdle is the publisher of the TrafficaZine Online
Marketing Newsletter which is a publication designed to
assist the online marketing and/or web designing
entrepreneur with the basic tools and resources that will
greatly assist them in taking further steps into bettering
their online business. http://www.trafficazine.com