Benefits Of CSS

[Devious]

What are the main benefits of using CSS and why do people want to design without tables?

[warjockey]

to add style to your html documents and control the style of all your pages in 1 (or more files)

people want to design without tables because:

1. easier to maintain code
2. reduce file size of files
3. Be semanticaly correct (tables aren't made for design)

there's more reasons, these are just some "main" ones

[vgarcia]

What are the main benefits of using CSS and why do people want to design without tables?

CSS moves all presentational/formatting information out of the HTML document, leaving you with just content (i.e. links, paragraphs, lists, etc.). This helps reduce page weight and makes your pages load faster. Another benefit is that external CSS files are cached, so if you re-use the same stylesheet on multiple pages, each subsequent request for a page on your site after the first will load faster (no need to download that stylesheet again). Finally, having your site running off of one or a few CSS files helps cut down on maintenance. Want to make all of your links purple instead of red? Now you only have to change that in one place instead of every HTML document on your site.

That's a quick rundown. There are other benefits, but none of them are nearly as useful as the few I mentioned above.

[Devious]

any "secret" benefits ?

[esearing]

I find it extremely useful for layering background images in nested Divs that I can't do with Nested tables. Bugs are easier to find in nested Divs than nested tables too.

Once you figure out your column and/or sectional layouts you can get fairly complex with the design using only CSS. Content stays in tidy small included files.

The only problem I have not found a resolution for is CSS drop down menus appearing behind Flash objects in Firefox and NS. This is more of a browser issue than a CSS issue.

[warjockey]

The only problem I have not found a resolution for is CSS drop down menus appearing behind Flash objects in Firefox and NS. This is more of a browser issue than a CSS issue.

You're right it's not a css issue.

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/s...rsion=6,0,29,0" width="740" height="288">
						  <param name="movie" value="flash.swf" />
						  <param name="quality" value="high" />
		<param name="wmode" value="transparent">
						  <embed src="flash.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="740" height="288" wmode="transparent" ></embed>
	   </object>

you need wmode="transparent" as a param and as a <embed> attribute and it should be behind anything over it.

but doesn't work in Opera before version 8.

[Egor]

You basically get more control over your html. You can also do things not possible with html alone, like absolute positioning and hiding or removing elements.

When you get the hang of CSS, you also learn all the browser bugs.

[Goof]

It's also easier to apply presentation parameters to multiple elements without putting the parameters in every time that element appears. For instance, if I know I want all of my <H1> tags to be red and a font size of 24px, I can simply write:

  H1 { color: red; font-size: 24px; }

And I only have to do that once and not worry about it for any page that includes that style sheet, verses putting a <FONT> tag with every instance of the <H1> tag. It's just a nicer way of doing things.

As for the tables question, I myself am still working on that one, for the very reason that it feels like you have to "trick" CSS to get a flexible grid for page design (as unpopular as that may be to say). In one way tables and spacer gifs were semi-intuitive - once you figured them out you could take virtually any layout in Photoshop and recreate it to the pixel. Multiple columns and rows in CSS are trickier, and I'm hoping that page layout will be more elegantly delt with in future implementations of CSS.

But is the switch worth it? While some more work might have to be done up-front with CSS, I would still say YES! Editing page content is so much easier without all of that table code in there. It was getting to the point in table-layouts that I would have to use FIND functions in my editor to find what I wanted to change. HTML with a style sheet applied is much nicer on the eyes of the developer.

Hope that helps,
Nate