homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

CSS versus straight html coding

 6:11 pm on Apr 12, 2004 (gmt 0)

What is pro/con for both CSS and straight html coding?



 6:26 pm on Apr 12, 2004 (gmt 0)

LinuxGold, I think most people would tell you it is not one or the other-- HTML and CSS each have a distinctive purpose, and they work together.

HTML (ideally) sets the structure of the document-- headings, paragraphs, objects, tables, and so forth.

CSS designates the manner in which those structural elements will be displayed on various platforms.

Browsers do have defaults for how certain HTML tags will be rendered, but unless you are targeting text browsers, the default settings are rather plain or require a great deal more markup to achieve the same visual effect as opposed to using HTML+CSS.

While no browser supports CSS 100%, particularly for questions of positioning and layout, almost every browser since IE 3.0 can handle CSS for simple text formatting and visual effects. I would definitely say HTML+CSS is the way you should go.


 6:34 pm on Apr 12, 2004 (gmt 0)

Code bloat
<h1><font color="#00000" face="arial,verdana,sanserif" size="3">My header text</h1>

<h1 class="header">My header text</h1>

Now apply that to all the tags that you'd have to manually attribute parameters too, and you would have alot of extra lines of code. Over time you'd use a lot of bandwidth and if you ever needed to change the font of a tag you'd have to open ever file and change it instead of just tweeking one line in css.


 6:57 pm on Apr 12, 2004 (gmt 0)

Ok, but the problem is when you do straight html coding, it works best in most browsers whereas in CSS you have to do various hacks for various browsers which made it harder to learn. And I always question myself "Is IE doing it right, or FireFox is right? or......"

On various web pages concerning CSS, there are different ways to create things using CSS which I became lost.

I can understand that CSS can control the style of multipages from single file, using minimial html tags and all that, but I find it easier to do straight html than to use CSS. Is there any better document or books else than that famous Eric Meyer that can help me to establish transition from straight html to CSS with ease?


 7:13 pm on Apr 12, 2004 (gmt 0)

but I find it easier to do straight html than to use CSS.

That's definitely true for very small sites -- ones with just a few pages.

But plan ahead for a larger site. You go dozens (at least) of pages all with font tags and other visual mark-up in every h1 and p and td.

Then you decide to change the look.

Imagine finding and changing all the correct font tags. Then repeat ten times to see what looks best. Then revert to the 6th variant as it looked the best.

Now imagine doing the same thing with a single entry in a CSS file that affects every page at once.

It's worth learning CSS for that alone.


 7:26 pm on Apr 12, 2004 (gmt 0)


there are generally no crossbrowser problems with CSS when it's used to apply colors/backgrounds/font family etc.. (in fact css gives you more power of suggestion as to font family for example..)

the "problems" arise when you delve into CSS-P (CSS Positioning), but don't let that put you off.. IMHO you should learn CSS in it's simplest form for all the reasons stated above.. and I would strongly recommend removing all coloring/font-family rules to CSS if nothing else. It will serve as a good base to understanding how CSS works



 11:12 am on Apr 13, 2004 (gmt 0)

Hmm... I would prioritize CSS focus into fonts, coloring and etc as a starting point to learn how CSS works. Meanwhile is there any good resource to learn CSS-P? I'm currently subscribed to css-discuss mailing list.

Purple Martin

 11:32 pm on Apr 13, 2004 (gmt 0)

Code bloat
<h1><font color="#00000" face="arial,verdana,sanserif" size="3">My header text</h1>
<h1 class="header">My header text</h1>

Even better use of CSS to style your HTML:
<h1>My header text</h1>

You don't need to define a class for your h1 tag, just style h1 in your CSS! As you'll only have one h1 tag per page (because that's the semantically correct way to use h1) there's no need to have any h1 classes.

In fact, I find that by using only native HTML tags with no classes defined (and by using those tags in a semantically correct manner), and then styling the plain tags in my external CSS, I get great-looking pages with hardly any code. My web page is HTML only, and there's a link to an external style sheet, and that's it. Only on rare occasions do I need to define a class (for example if I have two different varieties of data tables, or if I want some illustrative images to be floated and bordered).

Kicking Designs

 6:58 pm on Apr 14, 2004 (gmt 0)

After a lot of contemplating I converted my personal site to a xhtml 1.0 transitional css-p layout last month and haven't noticed any major issues. The site does not look pretty in 4.x browsers or lower, but functionality of the site is not lost. With out css the page will appear as an unstyled well-structured document (if coded right).

That's what makes css so powerful - when used properly the design will degrade gracefully in older browsers. Using css and getting rid of the "bloat" in your code can also play a part in making your site more accessible and standards compliant - which, in turn can make it possible for more devices to access your site.

If you're not ready for css-p you can always use the hybrid xhtml table based layout that uses minimal tables for positioning and css for margins, padding, colors, and font styling. It's a good alternative that plays nice with older browsers.

Like others have stated here font styling is the best place to start and go from there.

Here are a few resouces helped me out a great deal with learning css:

A List Apart
The book "Designing With Web Standards" by Jeffrey Zeldman

My 2 cents....


 8:08 pm on Apr 14, 2004 (gmt 0)

The book "Designing With Web Standards" by Jeffrey Zeldman

Even if you don't like "Z" this book is a must, it's title is slightly misleading (or possibly a deliberate headline?) The standard he actually refers to are not just the W3 "recommendations" but THE standard as applied to where browsers are at the time of writing.. it's very enlightening for everyone even considering CSS, you can take what you want from it.. it's not a set of laid down rules.

my 2p, it's THE best WEB (note not just CSS) book I've read in ages.. It's not a cover to cover read as it can be overpowering but it is worth it



 8:50 pm on Apr 14, 2004 (gmt 0)

Kicking Designs, welcome to Webmaster World.

You can hide CSS rules from NN4 by a variety of hacks - I'm sure you know them, and there are plenty of references in this forum anyway.

I use them to hide everything except colours, centering of headings and the suchlike, so that NN4 users, such as they are, get a minimally-styled page.

There's actually an advantage to doing this, since it makes NN4 a diagnostic tool. You can use it to check that the basic CSS is working fine before looking for the problem in the more complex stuff.

As far as the thread title is concerned, surely it should be "CSS and straight html coding versus deprecated html for layout"?

[added]Oh, and Suzy, thanks for the book reference (meant to say that originally, not really an afterthought)[/added]

Kicking Designs

 11:14 pm on Apr 14, 2004 (gmt 0)

Thanks Doc, yes I incorporated a simple style sheet into my site which can be read by Netscape 4.x specifically for all the font stuff and a few other things.

It feels good to actually converse in a forum. I've been lurking behind the shadows on various forums for 5 years now but never posting. I'd like to think I've attained enough knowledge now to begin to help others (at least when I find the time!) - particularly with css and html.

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