home about/faq features tutorials resources members search

Wise Women List Archive File

Advantages and Disadvantages of CSS


hi WW,

I feel like I am asking a ton of CSS questions, but I'm really torn about whether to jump into them for a site I have to start implementing (tomorrow). Is everybody using CSS for professional sites(is it considered unprofessional to not use them)? I gather that I still have to designate text and headers, just with CSS instead of HTML and the time saving comes in when the client says that they want all headers to be bigger and then decides that they really liked them how they were and I just change the one CSS page that the hundreds of pages are linked to? What are some of the advantages of using CSS, what are the pitfalls? Do you create the CSS page before you start the site, or do you create one page and base the style sheet from that? Is the learning curve something I should budget time for, or is it as simple as it sounds?

Thanks for helping me make this decision!

Here is what I have been doing with CSS, and it solves my problems fairly well. I'm still getting hits from older browsers and machines (though I suspect some are spiders) so I have a sort of compromise attitude.

I use it exclusively for formatting text. It works well in the newer browsers and degrades well enough to the defaults in the older browsers to be acceptable. I have tried to eliminate font tags from all my sites, although some of the older sites are a challenge to clean up. I also use it for links, background colors, lists and classes to create various text effects. This saves tons of time and reduces the filesize of the page considerably.

What I find less reliable is CSS for positioning. If you are starting a brand new site and can plan your content to make sense in an older browser when the positioning falls apart, it would make using it acceptable. But I still use tables (sigh) most of the time.

I appreciate the insight. Thanks!

Jumping in to the site tonight...

I don't think the learning curve is too bad, for what you get out of it. It's more than just being able to make changes when people change their mind (although that's great). It's also just saying in one place that all of your bullet lists will have orange text, and then not having to define the text color for the individual bullet lists!

I believe separate style sheets don't read very well into Netscape, and so putting a <style></style> area in the html header was still the best way to go.

I personally really like doing it this way because if I use Dreamweaver, the style part of my page can be in the template file, and I can change the color of every header in a site in half a minute, and I know for sure I haven't forgotten any headers.

Even coding by hand I think it's pretty easy to just copy the style area and paste it into all the pages.

But the font sizes are delineated differently - so if someone is giving you directions (like make the text size "2", translation is involved).


Webmonkey - Mulder's Stylesheets Tutorial (this one talks about the benefits of style sheets vs. inline styles!)

W3C Style Sheet info page:

University of Miami CSS guide:

I hope that helped!

> What are some of the advantages of using CSS,

As you said; you only have to change one rule to alter the whole page. Also, you separate structure from presentation. HTML is not created to make visual presentation, CSS is. You can do so much more, so much easier. It will reduce your download time, because you don't have to fill your HTML with ugly tags like <font>. It will dramatically clean up your mark-up, and it will make HTML so much easier to deal with.

In my own website I use XHTML strict and CSS, and whenever I want to change the design, I just replace the stylesheet, no need to change to HTML code. (I dont use tables anymore, I use CSS position. Browsers without CSS support gets just a clean HTML page).

> what are the pitfalls?

It's the browser support. Actually - it's Netscape 4.*. It has problems with some part of CSS, specially with margins. I use a 'hack' to solve this problem. Netscape 4.* doesn't understand id="" in the external stylesheet link, so it just ignores it. I use two stylesheets, one for Netscape and one for other browsers.

<link rel="stylesheet" href="style.css" type="text/css">
<link rel="stylesheet" href="styletwo.css" type="text/css" id="all">

Remember that other browsers will read both stylesheet, so you have to overrule the first one in the second one.

As for seperate stylesheet and Netscape - thats only a problem if the stylesheet and the HTML files are in different folders. This is because Netscape 4.* reads the url for background-image as relative to the html-document, insted of relative to the stylesheet.

> Do you create the CSS page before you start the site,
> or do you create one page and base the style sheet from that?

I always implement the text first, put all elements where they're supposed to be, and then start the design. I put classes on the elements while I'm implementing the text, so everything is marked up correctly. Then I start with all the general rules, like font-family, background-color aso. After that I go through page by page and include whatever is necessary for the specific pages.

> Is the learning curve something I should budget time for,
> or is it as simple as it sounds?

It's is as simple as it sounds, but it also have a lot more... It's very easy to start with, and you can just learn whatever you need as you go on. One thing to remember is the inherit part. Elements will inherit rules from each other, so be careful with font-size and tables, or you might end up with very small text in some browsers!

Designing with HTML is the past - CSS is the present _and_ the future. The sooner you learn this the better. It's a fantastic designing tool!

Thanks- looking forward to the possibilities this will allow.




Recommendations and Reviews for web professionals.

List Archives

Project WW Archive: how you can help us to build up a treasure trove of useful information.

List of available archives

Alphabet Soup

Essential terminology for the serious web professional.


Printable version of this page

Link to us

Join the discussion lists

passionate about the web