Previous Message
Next Message

Beginners Guide to CSS

Sent by Dave G on 19 November 2003 05:05


I thought this might be a helpful and realistic guide for people
who are new to CSS. Enjoy!
	<Before you take this as a serious rant, just keep in mind that
it's tongue in cheek, and may remind some people about what the struggle
to learn CSS looks like from the start. I've included references just
because I wanted to feel like I wasn't alone.>

	Step One:
	Have fully functional table based design. Have an entire clique
of web designers tell you that it's not "future compatible", or that
table based layouts are bloated, or that using non layout elements like
<br> tags to space things is a crime against design.
	(http://www.hotdesign.com/seybold/index.html)

	Step Two:
	Look around the web at sites of CSS evangelists who swear up and
down that not only can CSS do everything that tables can, it does it
cleaner, easier and better.
	(From HTMLDog.com: "With a combination of positioning, floating,
margins, padding and borders, you should be able to represent ANY web
design and there is nothing that can be done in tables that can not be
done with CSS.")

	Step Three:
	Become convinced that this is the wave of the future and resolve
to convert your own sites to CSS. Look around the net and try and find
introductions and explanations of CSS that aren't confusing.

	Step Four:
	Discover that most web sites that attempt to define "floats" and
"clears" are far from clear and leave you floating in uncertainty. They
are written by people who have long forgotten what it's like to be a
beginner. They will either be too simplistic or too complicated. Or that
most of the CSS pages that have layouts you'd like to emulate have very
little explanation of how and why it's laid out that way, because you're
supposed to just understand by looking at the code.
	(http://scott.sauyet.name/CSS/Demo/FooterDemo1.html - Thanks to
the person who put this web site up, as something is better than
nothing. Don't mean to be unappreciative, it's just that I could not get
this examples effect to work and I had no idea what it's doing)

	Step Five:
	Resolve to learn CSS the way you learned HTML. Look at someone's
source code, download it, tweak it, and find out what CSS does and how
it works by experimentation. Spend weeks on this step, because it is
very important to discover that any minor tweak to personalize or
customize your code will make the CSS go completely screwy in all sorts
of ways that will have you spending hours just getting back to where you
started without having learned much in the process.

	Step Six:
	Convert your web sites to a form of confused beginner's CSS,
resolving that first you'll get all your content in and then you'll make
it better and better. Look for help on mailing lists or similar forums
where people will assume you are just lazy because your code is chaos.
Remember, being told "RTFM" is supposed to be a "hackers" way of being
helpful. At this point you can choose to take this advice and go back to
Step Four, or proceed to Step Seven.
	(Quote from response on CSS-D "...First of all this page is a
mess... If you want help, you need to clean this up as much as possible
before asking people to look at it...".)

	Step Seven:
	Start to compromise. If you are lucky, at this point you have
some web pages where the CSS looks something like the table based design
you started out with. But you've long ago given up on having a "footer"
that will stick to the bottom when there is little content, and get
pushed below the fold when there is a lot of content (Silly you - you
thought "bottom: 0px" actually meant that your DIV would be at the
bottom of the page!).
	Although you assumed it would be easy in CSS because it was easy
with tables, and you've seen sites where it has happened, the CSS code
to create this is mind blowingly complicated
(http://www.tanfa.co.uk/css/layouts/css-3-column-layout-v2.asp). Any
attempt to download and use such code will be an exercise in masochism.
It looks nothing like the CSS the sites for beginners told you that you
were going to use.
	(From
http://pomtiedom.com/log/archives/2003/02/the_elusive_css_footer.asp :
"The Elusive CSS Footer. It is a real pain in the ass. I know because I
ran into the same problem for a project I am working on.")

	Step Eight.
	Just when you think you're settling down into a slow and steady
learning curve, this is about when you start getting emails from
everyone who uses your site describing all kinds of variations on your
layout as it has been interpreted by their varying browsers and
platforms. This stage is the most important of all, the one where you
realize that CSS support is far, far more random than any HTML
workarounds that you've been dealing with for the (insert personal
experience here) years you've been making web pages.
	(Excerpt from an email from a user of one of my sites: "the new
color and stuff on the homepage looks good, except on my computor [sic]
some of the pages are cut off at the bottom and have big gaps in them")

	Step Nine:
	If you were smart, you made backups before step one. If not,
this step is spent putting your web sites back into table layout format.
	(I actually haven't done this yet. I'm still stubborn/stupid
enough to keep trying to make my web sites work with CSS)

	Step Ten:
	Wait for CSS to achieve the browser support and abundance of
learning resources it needs in order to live up to its promise. When
calculating how long this will take, remember that the time estimates of
evangelists (of any technology) must be converted to metric (double, and
add thirty) in order to be anything believable. So consider "Meyerizing"
your web sites around 2007.
	(http://www.meyerweb.com/eric/css/edge/)

-- 
Cheers!
Dave G
[EMAIL-REMOVED]

______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message

Message thread:

Possibly related: