homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Mapping the beginning journey toward using CSS

 10:42 pm on Mar 17, 2002 (gmt 0)

Inspired by papabaer's comments in another thread:

>important to know what you can and cannot do with CSS.
>CSS, CSS, CSS... yep! Gotta luv it!

Having stayed reasonably close to HTML 3.2, which has been effective for its purpose, and individualizing a number of basic templates for certain sites that have proven themselves with the test of time, it's time to move on from what's outlived its usefulness.

Thoroughly convinced of the advantages of CSS, and tired of redundant code and having to reduce code bloat by hand, it's time to move into using CSS as the rule rather than the exception.

I've got the O'Reilly book which is excellent and very detailed and covers many more implementations than what I'll probably use. I'm using it in conjunction with the very clear basics as presented by Dr. Ian Graham (U. of Toronto). I've thought that I might use CSS for text formatting and stay with tables for layout, at least for the time being.

Based on "line upon line, precept upon precept," what would be a good way to approach making the changeover?

1. Which features should be begun with?
2. What would be the easiest ways to implement them, and
3. What would logically be the steps to follow to start and then build on the skill level in this particular area?

What I'm looking for basically is a syllabus to make the process logical and simple.



 11:24 pm on Mar 17, 2002 (gmt 0)

Marcia, ;)
What can I say except, I never back away from a good thread! lol!!

papabaer's first rule of CSS: "Why do less with more when you can do more with less?"

My experience (and scars - !) show that too often those first attempting CSS constructs use too many declarations. I think Tedster may have voiced a similar belief in an earlier thread. (Forgive me if I am wrong)

CSS does not have to be complex: you do not have to create styles (and variances for everything) - this might be a good place to list some of the good CSS references that we have scattered willy-nilly throughout Webmaster World.

The seed of this thread began with the problem some of our friends and neighbors (Howdy Neighbor!) are having with spiders grabbing the content from their navigation bars and displaying this in the SERPS. This is similar to the results we have all seen that return someting akin to "your browser does not support frames..." blah, blah, blah and so on; not exactly what we want to show potential visitors who are browsing search engine results.

We have talked about reasons for using CSS as a means to achieve Web Standards (especially when combined with XHTML), but now the question or discussion is, how can CSS help create pages that give more freedom and allow for greater creativity when considering SEO?

The tools and possibilities are out there, you can find them at W3C under CSS, but how do we use them? What are the pitfalls? Is there truly an advantage? Or is it all just more hype?

First, before you go too far, you need to know what CSS can, and cannot do... practically speaking.

Then and only then, as I predict, will there be a heavy migration to Web Standards and CSS not from an altruistic point of view, but from a SEO perspective.


 11:26 pm on Mar 17, 2002 (gmt 0)

Start small, stick with basics, test for exceptions.

Books are at least a year behind - the best answers and guides are found on the Web.


 4:36 am on Mar 18, 2002 (gmt 0)

> 1. Which features should be begun with?

My suggestion is first to make a project of eliminating every font tag from the HTML in one site. You know that the font tage is deprecated -- so it's got to go anyway. And if your font tags look like many I've seen, I'll bet you have this kind of structure somewhere:


Did you realize that's not valid code? Here's why:
1. A paragraph tag is a block level element.
2. A font tag is an inline element.
3. An inline element cannot contain a block level element.

So what you should have had was:


And I used to think that <p> and <br><br> were identical!

So get those <font> tags outta there and test your work cross-browser. You will enjoy the way your HTML cleans up. And you will also enjoy the new kinds of control you get with so little overhead.

Want your footers to always be a px or two smaller? Just create a special .footer class and it's done. Get fancy -- add line-height to increase readability, customize your margins and padding. All this starts to come much clearer in the doing of it.

And don't worry about the big challenges, like table-free layout and all that. Just target all your soon-to-be extinct <font> tags as a first project. Once you wade in, I'm betting you'll like it.

One hint if you're going for NN4.x compatibility. After a </table> Netscape 4 gets a bit senile and forgets styles it should remember. The standard work-around is to declare some redundant styles (like body, AND p, AND td, and maybe even a new class.)

I've recently found it very useful to wrap tables in their own div tags. Something about that makes NN4 remember what it's supposed to.


 6:02 am on Mar 18, 2002 (gmt 0)

I just want to back up what tedter,papbear, marcia are saying. We are only 10 weeks into our css crusade, but it is a humble one. We started with getting rid of font tags, and changing all our P's to <P></P> and getting rid of <BODY> tags. So we mainly use CSS tags only for colors, fonts and BODY declarations such as link colors and page margins. Already our pages look better and load much faster, and our multi-pages are much better and strictly "themed" in a design sense.

One thing we do like doing is introducing 'boxes' which is by using those nice thin lines around content, and getting rid of all our <table> specs like background colour, and padding attributes to be replaced by the CSS attributes. What a wonderful cleansing feel to see just <TABLE><TR><TD></TD></TR></TABLE> in our structure, knowing we can change the look of what we used to have inside all that across a subset or all pages with a simple tweaking of a css file later!

Our motto for now is for positioning use tables - for decoration use CSS! We gave up on CSS 3 years ago after some early experiments but it caused so many cross-browser probs we gave up on it, but now things are better and this is our second humble crusade.

Thought i would post this as the experience of people who have 1,000's of carefully (and usually individually) crafted HTML 2 and 3.2 pages built up over 6 years or so. It IS possible to move to CSS in an evolutionary manner.


 6:22 am on Mar 18, 2002 (gmt 0)

You'll have fun, Marcia, and will enjoy the power that CSS gives. I would stay start with just two or three rules - no more. Color and font-family rules are easy and reliable. Just set font-family and color on major elements (BODY H P STRONG EM), and then change them a couple times and watch the whole site change instantly. It's very exciting to see it happen the first time.

Forget tables and font-sizes right now. Start simple and check that the first simple rules are working as expected on all pages. The validator will tell you that whenever you say "color: green", for example, you also have to include "background: transparent" - every color statement must be accompanied by a background color. A simple first rule to test:

h1, h2, h3, h4, h5, h6 {
font-family: Verdana;
color: green
background: transparent; }


 6:30 am on Mar 18, 2002 (gmt 0)

I think what really might help is if someone would post an example of a style sheet using just the basics. That will give those who are new to CSS a general guideline to follow. Any takers? Papabaer?


 11:58 am on Mar 18, 2002 (gmt 0)

the most important thing IMO is don't start by trying to recreate your old designs with css...take a look at the possibilities and play a while...then use the strengths of css rather than try to emulate html 3

I found [w3.org...] a good place to start

(edited by: tedster at 1:22 pm (utc) on Mar. 18, 2002)


 1:27 pm on Mar 18, 2002 (gmt 0)

W3Schools has some nifty online tutorials at [w3schools.com...]

Even better, they have example pages where you can play with changing a style sheet, click a button, and see the results of your tinkering.

Index for their CSS Playground:


 2:09 pm on Mar 18, 2002 (gmt 0)

>move on from what's outlived its usefulness.

If it aint broke, don't fix it.

>advantages of CSS, and tired of redundant code

That is one of the very few advantages of CSS that I can see.

>1. Which features should be begun with?

As few as possible.

Remember when HTML design first came about, or back in the 80's when we first starte dt publishing? We all used too many fonts switches, too many type faces, and generally made for aweful looking pages? The same is twice as true for CSS and it's myriad of screen controls.

As you can see from the other messages about font sizes, colors, and general layout, CSS is a mine field of problems that most CSS authors don't appreciate.

> 2. What would be the easiest ways to implement them, and
> 3. What would logically be the steps to follow to start
> and then build on the skill level in this particular area?

Going css should be done in very slow baby steps. Make a small list of why you feel you need to switch to CSS and what it is going to accomplish. Change only what you need to get the job done.

Start with the W3C default set of core style sheets as a guide.

(note: that the sheets are browser dependent)

brotherhood of LAN

 2:12 pm on Mar 18, 2002 (gmt 0)

ok so im like part of the experiment, im on the journey to using CSS :)

Ive replaced all fonts with H tags BR breaks

Is there any need to have P tags?


 2:27 pm on Mar 18, 2002 (gmt 0)

Search engine algos can measure "prominence", or how early in a paragraph a keyword appears. No paragraphs = no prominence.


 3:02 pm on Mar 18, 2002 (gmt 0)

but you can now specify what happens inside that <p> tag...indent the start, decrease the line separation, place it in a coloured box, give it a different font, a different size or colour, right align it...and all that appears in the html is <p class="foo">...that is a huge improvement, especially with an external style sheet on a large site

better still you can make the mark up completely transparent so that a beginner can understand what you are doing (and make all those nigly little updates)...simply choose class names like "highlight" or "smallprint" that describe the function of the style...and suddenly the mark up is genuinely descriptive

brotherhood of LAN

 3:05 pm on Mar 18, 2002 (gmt 0)

ok. So ive just got rid of every P in my HTML! :) thank you for search and replace

ok, i use an include file at the top n bottom, n have a 5% space, 70% text cell 5% spacer 20% navigation cell layout

Would it be wise to put an H tag in both the 70 and 20 cells at the beginning and end of the cell, i.e. 2 big paragraphs?


 4:06 pm on Mar 18, 2002 (gmt 0)

One of the fun (Yeah right!) things about CSS is the testing - really! You can gather a workable set of rules that will let you know where you stand "browser-wise" (is that an oxy-moron?)

Anyhow, I have been building some CSS test pages that for general reference; I just uploaded one for lists (I will be expanding it) and I have another with margins, horizontal rules and nested divs - it is a learning experience to see what works rendered by a standards compliant browser and what is "forgiven inappropriately" by IE.

I will sticky mail the URLS to anyone who is interested.

The only way to see what sticks it to throw it up against the wall (just keep plenty of wipes handy, it can get messy!)

- papabaer ;)


 5:44 pm on Mar 18, 2002 (gmt 0)

I updated my profile to show the page with CSS list/styles - the examples are placed in a series of positioned divs -

IE is still too forgiving (temptingly so!) even in Standards Mode - so you should view the examples with various browsers to see what works and what does not.

The examples are targeted for standards compliant browsers - but obviously, that is a very loose term for some...

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved