This thread is on the issue of why we are abandoning the HTML style tags and attributes with all that only being done via CSS.

I feel that CSS is great, and is very handy for creating a streamline look to the web site, but there are a lot of times when one wants something that is unique to a particular table, dev, or other area in the web page.

Whilst the ID and Class things enable CSS to do what I want here, my concerns are,

++This takes so much more bytes.
++CSS alone uses more bytes for the same keyword, 'background-color v bgcolor'

++The time to do it, and how complex it is to do a specific area with its own style with CSS, rather than just doing a font color tag before and after the area in question.


******* Why should we retain the HTML styling tags.
++ As stated above, it helps when an area you know you want to have a unique color, one that you know nothing else in the page shall require, or you want to have different to the rest of the page

++Sometimes, one knows certain format requirements of certain elemnts, and it would be much easier to just use HTML styling tags rather than CSS for them like,

-- The word 'WARNING THIS IS BAD'. Should be shown in red, or orange. There is no issue of standardising this color into the style of the whole page as you need to do with the general content of the page.

++This takes so much more bytes.

This I completely disagree with. I've just gone through and converted a site which was designed using all HTML and very little CSS to one that uses CSS to it's full potential. The amount of redundant HTML I removed was phenomenal, and file sizes reduced dramatically.
A lot of this was due to the fact that most of the style information is now contained in a single CSS file shared by all the HTML files. Origionally, all the style information was within the HTML itself, and had to be repeated many many times.

++CSS alone uses more bytes for the same keyword, 'background-color v bgcolor'

9 bytes is nothing when compared to the amount of space you save using a single, shared stylesheet, and DIVs as oppsed to tables.

++The time to do it, and how complex it is to do a specific area with its own style with CSS, rather than just doing a font color tag before and after the area in question.

The initial time may be marginally increased, but what about when you want to change something? Changing loads and loads of font tags can be VERY time consuming and error prone. Whereas changing some attributes in a single CSS selector that has an effect on the entire site is incredibly quick.
What I usually do is write out the bare HTML first in it's logical structure, then write the stylesheet after.

but there are a lot of times when one wants something that is unique to a particular table, dev, or other area in the web page.

This is what the # selector in CSS is for, it selects elements based on their unique ID. Remember that that uniquness is only within that particular page, so you could have say, a DIV with an ID of "Menu" that would be the same across multiple pages. If you style that DIV in a shared stylesheet, the style information is only specified once. Do it in the HTML, and that style information is repeated for every page in question.

Also, later on down the line, you might decide that that style information should no longer be unique - instead of re-writing the font tags, attributes, etc. for the new element, you could just chnge the ID to a class and then apply that class to the new element.

I could probably answer this, but it's bound to be a question that will continue being asked.

So the short of it is, did you ever considered what CSS provides to other users other than visual browsers?

That alone, simiply makes what the Web is all about.

Cheers,

MC

As it was already stated the concept of your consumption of more space for CSS is wrong. As proof of this concept in numbers. Stop Design did a presentation at SWxSW (I think that's what it was) and he provided an article in which he tells you the facts about a well known site and some of the deconstruction he did. He also provides you with numbers to prove that CSS is all around better. Read Throwing Tables Out the Window at Stop Design.

I think its a balance.

1. If you create a bad site that makes lots of money then whats the problem?
2. If you make a standards compliant site that makes nothing.........

Of course these days standards are the rage and its good practice follow standards in any field you work in however when you consider 1 and 2 above it gets intersting.

Who cares if your site does not hold up to much and is buggy and everything else that we all say avoid doing if it makes you lots of money.

Of course if your a developer you probably want it to be as good as it can be.

At days end its about the people using your site, not some far off office complex where standards are drafted etc, are they going to come and spend money on your site?

Give the users what they want and the rest comes in after.

And yes I follow standards (but if #1 above was the case then if it aint broke dont fix)

Ibbo

CSS is:

-Up to date + "correct"
-Easier to make site-wide alterations such as font size or color
-Quicker to load - The CSS file only needs to be loaded once when the index page loads, then all the other pages are quicker
-Neater
-Saves time when altering the website in the future
-Has lots of neat styling tricks you can't do with tables and inline html styles
-Allows more flexibility with alternate stylesheets
-Better for semantics - Having font set to red means less than a style set to "danger"
-Helps bridge the gap between web and print design. Print also has stylesheets.

Minaki pretty much made the case for css.

Jim I suspect that the issue here is not wanting to take the time to learn css. Your assumptions really are off with html using less bytes. You're looking at one very specific case where it seems that the html produces the lighter code and ignoring the whole.

With css you're going to get much, much lighter code through your site. Just like Minaki, I've gone into sites coded completely in html and recoded them using css and reduced the file size and the overall download times for the pages considerably.

How often will you be setting a single element on a single page of your site with a background color that's completely unique from every other background color on your site. If you even use that same background color twice it can probably be done with less bytes in css than with html alone.

++CSS alone uses more bytes for the same keyword, 'background-color v bgcolor'

I'll chime in with one more point related to this -- it's called SHORTHAND. I never use "background-color", "background: #666666;" will suffiice. When defining borders for a box, you don't need to define every single side you use 1 line, like this: border: 1px solid red; . If you want different color borders on the same box then you can define them separately. There are many, many other 'shorthand' rules you can use, once you learn CSS.

I also agree with Van Gogh.

I use frontpage, and it fills the html with a bunch of trash that I don't need.

Css does help with page downloads and it is way lighter than html.

You won't be sorry with css

Thanks to all above for your postings.


*** Points I wish to add to this is,


--- I am keen to retain browser support for HTML style tags.

--- I do have one web site under construction, www.internetdatabase.com.au

--I do have CSS and JS files of which are shared over many web pages.

--CSS is used for many of the common things in the body of each page, like the color of the buttons, the style of the dl tags, and other things.

......Yes, under these cases, the CSS is far better for streamlining the site, and for byte saving. There is just 9 bytes in 'class="a"', and not even that when all of a tag share the same style.

..... However, there are some cases where, like the tables that show the link buttons, I like them to have their own unique color. They are best suited to having the word BGCOLOR within the respective table tag.

--I am going to move away from the seperate CSS and JS files that are shared by many of the pages, to having the CSS and JS to be inside each respective page. This is made very easy thanks to my GWBASIC scripting in my old 486, which all I need to do is, tell it what I want as its links, then it goes away and forms the whole page, with the right bits of CSS for that page.

Sorry Jim, but tables aren't better suited to using bgcolor= instead of css. I think you're trying to save a couple bytes of space where it's not very meaningful. In truth the better option would probably be to not use the tables in the first place. I'm guessing since you mentioned links that you're using tables for a menu. I could be wrong, but if that's the case you could use a list instead. It will not only save bytes, but will also load faster than the table will at the exact same number of bytes.

Another thing is if you ever want to change that color then you'll need to make the change on every page where the bgcolor is. With css you make the change once and you're done.

I just took a look at your site and see you use tables for the layout. If saving even just a few bites is that important then you could code the whole page without the tables.

It's up to you how you code the page, but it really is more that you're failing to see what css can do than it is that using html attributes is better.

Why the obsession over a few bytes here and there ?? The old 35kb per page "rule" from 10 years ago simply doesn't apply any more. Yes, there are still people on dial-up that you must be mindful of, but these people understand that they must wait for EVERYTHING when on the web.

Tables, nested tables, tons of old <font> tags and other old deprecated code will do nothing but INCREASE the page weight, not decrease it.

You might want to read this article:
Why tables for layout is stupid: problems defined, solutions offered

Then you should head over to css Zen Garden: The Beauty in CSS Design and look at those designs. ALL CSS, no tables, and the are all very lightweight, despite the amount of CSS.

I am keen to retain browser support for HTML style tags.

That is practically an oxymoron these days. All of the so-called 'html style tags' are deprecated. Your pages will be lighter if you take OUT the old html 'styles' and just leave pure HTML in your code, leave the styling to CSS.

Mate its a loosing battle. I stuck with HTML back in 1999 when everyone told me to switch, i was like NO! I love HTML.

I got a THE CSS ANTHOLOGY for christmas in 2005, my friend bought it me in an effort to make me switch. I read it, and it all made sence. I will NEVER! NEVER! use HTML and dirty tables to layout or design my sites ... NEVER

Switch mate, cos even W3 are making Styling in HTML tags OBSOLETE! In a few years it will not be possible to layout with tables.

XML and CSS will rule.

It gets me angry reading this.

Stupid people who use Photoshop to design there sites by slicing up images, think they can create amazing looking sites.

Forget it! True CSS sites are stunning, they feel alot different and you can tell its a well made design.

PLEASE STOP USING HTML! I was once like you, for 6 years i refused it, if i would have listened in the first place i might have been a pro designer by now.

Originally Posted by Jack-Harris

Stupid people who use Photoshop to design there sites by slicing up images, think they can create amazing looking sites.

Forget it! True CSS sites are stunning, they feel alot different and you can tell its a well made design.

Find the Photoshop layout in the following sites.

Search Engine Friendly Layouts - SEO Standards-Compliant Layouts
Kastle Fireplace: Fireplaces, Fireplace Designs, Stoves, Inserts, Mantels, Outdoor Products, Accessories and More!
Lighten Up 2006: This year, let's use less electricity!
Toronto Regional Green Building Festival
Sustainable Enterprise Resource Centre

Post your answer here, and then I'll reveal it.

Weird...the links got the titles added to them from the last post. How did that happen? I didn't type them.

Someone probably said this but, most browsers cache the style sheet and so it only needs to be loaded 1 time per visit. Cool yes?

Adam to me none of those sites qualify as a true Photshopped layout since they don't use tables and images for everything. You obviously did your own coding on all of them.

My guess though is the Ligthen Up site, because of the image map. I'm thinking you did let Image Ready help you out with that part. If I'm right do I win a prize?

I know there's been an upgrade of the vBulletin softare behind the scenes recently. Maybe the new version picks up on the page title when you simply add a url. If it does that's pretty cool.

PLEASE STOP USING HTML!

Uhh.. you have to use Html . HTML for the content and STRUCTURE as it was meant to be, you still need it. What you do NOT need is the presentational code and the separation of presentation from structure is what CSS is all about.

Stupid people who use Photoshop to design there sites by slicing up images, think they can create amazing looking sites.

I think I understand your INTENT with that statement, but really, I design ALL my sites with Photoshop. However, I do NOT use ImageReady or PS to slice up the graphics and output the code - and I believe that's what you meant by your comment. In THAT context I tend to agree with you, ImageReady spits out really, really bad code.

Adam, I noticed the new way links are showing up too, rather cool I'd say

Okay, so we've got one vote for Lighten Up!

And since LadyNRed jumped my shark somewhat, I'll reveal my answer.

The answer is: all of them. Every one of those layouts was created in Photoshop. And I did use ImageReady (mostly because I have PS7 and not CS2) to slice the images. However, the coding was all me, all hand, and all original.

The point was that you can't always tell. vangogh couldn't. I suspect most people looking can't as well.

Having said that, LNR is totally right...ImageReady code is just bleh.