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/)
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.
