|
|
|
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
|
|
|
|
|
|