Web Hosting Tips for Webmasters -
The 10 Best Resources for CSS
Article printed from SiteProNews: http://www.sitepronews.com
HTML version available at: http://www.sitepronews.com/archives.html
The 10 Best Resources for CSS
By Mark Daoust (c) 2005
If you have been paying attention, you certainly have noticed an
increasing number of websites that are employing CSS and an
increasing number of resources talking about how great CSS is.
If you have not yet jumped on the CSS bandwagon, you may want
to consider doing so immediately.
CSS has many different benefits for website owners. The most
obvious is the pure, raw design capabilities CSS brings to
websites. CSS can control everything from the size of your font
to the very layout of your page. A site designed with proper
HTML and CSS can avoid incorporating almost any design elements
into the actual HTML. This means a website owner can change the
entire look of their whole site without changing a single HTML
page. For owners of sites with dynamic content or sites that
have a lot of content (blogs, forums, stores, etc), this becomes
a huge time saver.
CSS also allows a website owner to build their HTML in a nice,
logical order. Often when using tables to layout a website, the
HTML that powers the website is not laid out in a logical order
(this is referred to as the 'code flow'). This can hurt website
owners in two ways. The first, and more important way, is to
recognize that not everyone who uses the Internet is viewing
your website through a visual browser such as Internet Explorer
or Firefox. There are a whole group of people who are viewing
websites using web readers and other tools which rely on
well-organized code. Secondly, a well-organized website can
actually help your search engine rankings. When a spider
discovers a page that is well organized and not filled with a
lot of extra HTML code, it can determine more accurately and
quickly what that page is really about. Let's face it, we all
want to help the spiders, right?
It is in the spirit of CSS that this article is written. There
are hundreds of websites offering CSS tutorials, CSS examples,
competitions, and showcases. There may be some that we are not
aware of which are not displayed here, and if so, we encourage
you to let us know in the Site Reference Forums
(http://forums.site-reference.com/).
With that said, we must offer a word of warning before going to
any of these websites. These sites can become very addicting if
you enjoy web design in the slightest way. Some of these sites
link to literally hundreds of other sites which will catch your
interest.
Now that the warning has been issued, we present to you a list
of our favorite CSS websites.
CSSZenGarden (http://www.csszengarden.com)
If you have any doubts over how powerful CSS really is, then you
need to visit CSS Zen Garden. CSS Zen Garden is a display of the
power and beauty of CSS. The concept is simple: see how many
ways designers can take the exact same HTML code and produce
completely different looking pages. As you browse through the
various designs, you will find that the only thing changing the
way each page looks is the CSS file. The HTML is exactly the
same.
CSS Zen Garden is a great showcase of creativity and technical
expertise. It is also important to point out that CSS Zen Garden
does not use any tables for their layout. Everything is done in
pure, simple HTML and CSS.
The Web Developer's Network (http://www.alvit.de/handbook/)
Any of the sites that make our favorites list are certainly
listed on this extensive resource page. Be warned, this page has
so many resources listed it is easy to get lost for hours
exploring them. Some of the resources are just fun to explore
while others offer some very practical advice on practical
matters.
The page is not limited to CSS resources, but also delves into
areas of good website design and creativity, along with anything
else you could possibly want for your design needs. Our only
criticism of this site is that it might be too extensive to find
a specific tutorial or help guide.
Official Cascading Style Sheets Level 2 Specification
(http://www.w3.org/TR/REC-CSS2/) This is the place where it all
starts if you want to learn CSS. Here you will find the official
documentation on how to use CSS and what CSS is used for. Many
novice website owners are scared away from this site because it
is written in very technical language and they fear that they
will not be able to understand it. If you feel this way, be
careful not to sell yourself short. The specifications are
actually much easier if you know how to read them.
When going over this document, keep in mind a few things. First,
CSS was built for more than just the Internet. CSS can be used
in print media and broadcast media as well. So when you are
reading some of the instructions in the official manual you may
find some aspects that do not apply to what you are doing.
Secondly, do not worry if you do not understand a certain
chapter or bit of information. The trick to learning CSS is to
get a basic understanding of it first, then practice, then go
back and re-read what you have already read (things will make a
bit more sense this time around), then practice, then go back
and re-read again, and so on. Every time you practice what you
learned and go back to re-read some of the specifications, it
will make more and more sense to you.
As a point of reference, if you want to just go over the most
important chapters in the manual, be sure to read these
chapters: Chapters 8-12, 14-18, and 4-6.
CSS from the Ground Up
(http://www.wpdfd.com/editorial/basics/index.html)
Ok, so you have tried the official manual and it is just too
difficult to understand. That is fine. There is a lot of
information included in the manual, and they certainly do not
work at entertaining you with the manual. If you want a bare
bones tutorial on CSS, the people from Web Page Design for
Designers have put together a pretty good basic tutorial which
should get you started on your first CSS pages.
Listamatic (http://css.maxdesign.com.au/listamatic/)
One thing you will learn as you begin to work with CSS powered
layouts is that lists are extremely powerful tools. Lists are a
vital part of building a website with good code flow. Getting
lists to appear correctly in different browsers, or to appear in
new, original ways, however, can be quite challenging.
Listamatic offers several examples of lists that use simple CSS.
The examples cover nearly everything that you could possibly
hope to achieve from an HTML list. Of course, if you are working
with a nested list, they have examples of those as well
(http://css.maxdesign.com.au/listamatic2/).
CSSVault (http://www.cssvault.com)
This site offers a little bit of everything. They offer a great
gallery for you to stop by and gawk at, as well as a number
of resources on everything from lists to building layouts that
do not use tables. Definitely a good overall resource on CSS.
CSS Layout Techniques (http://glish.com/css/home.asp)
No CSS guide would be complete if we did not address the issue
of building a layout that does not use tables. This is certainly
the most challenging aspect of CSS, learning how to build a nice
layout. The people over at Glish.com have put together examples
of several different types of layouts. They may not offer every
layout you could possibly use, but looking over their guides
will certainly help you learn different techniques to learning
how to layout your page.
Ruthsarian Layouts
(http://webhost.bridgew.edu/etribou/layouts/index.html)
There really cannot be enough resources on how to work with
layouts using CSS. Ruthsarian Layouts offers several very good
examples of popular layouts.
PositionIsEverything (http://www.positioniseverything.net/)
And yet again, we offer another site dedicated to learning
layouts and the little quirks that each browser brings into your
CSS design. This site may just have the most information on
position with CSS than any other site.
StyleGala (http://www.stylegala.com/)
This is another site that goes a bit beyond CSS and into some
other aspects of design, but still offers so much to learn from
that it is highly worth putting in your favorites file. Included
in this site is an impressive gallery, some forums, a collection
of bullets that you can use on your site (where has this been
for the past several years?), and a great collection of
resources.
Using These Resources to Learn
Whether you are a code junkie or are a person who relies on
FrontPage to do all of your design, moving in the direction of
CSS and properly formatted HTML is the future of the Internet.
For many, beginning the process of learning CSS may seem like a
useless and overly-difficult venture. However, if you are
responsible for the look and feel of your website you should
begin to explore this technology which is being used more and
more.
The best way to learn CSS is to start using it. Experiment with
different parts of CSS. Try and accomplish different tricks that
you have never done before. If you have never created a page
without tables, try and do so today. If you have never worked
with a list to format it in a completely different manner,
experiment with that. Browse through some of the sites in the
many different galleries offered to us and get inspired. Use
these sites and these resources to imagine what your website
could look like.
Your website is your sales pitch to your visitors. When they
arrive at your website, it should be your goal to present to
them the best looking page you can possibly provide. A well
designed page will provide your users with the comfort that you
are invested in your business, and you will be invested in them
as a customer and visitor.
The Internet is a rapidly changing environment, with new
technology and new tools being made available to enhance your
site every day, and thus enhance your visitor's experience. It
is your responsibility to make sure that your website sells, and
that requires using the modern and powerful technologies that
are available to us.
================================================================
Mark Daoust is the owner of Site Reference
(http://www.site-reference.com/) and TowerSearch
(http://www.towersearch.com/). You are free to use this article
on your website as long as you make all the links active and
include this resource box.
================================================================
| 
