PDA

View Full Version : Why HTML will survive despite CSS


deveray
10-29-2007, 10:32 PM
I have been grudgingly picking up pieces of CSS while studying PHP for the last few months. In other words, not studying the technique, per se.

The site I took over is html, which leaves no immediate need to switch.

On the other hand, many of the lessons incorporate CSS, which makes acquiring a basic familiarity at least helpful.

And it DOES provide more precision here and there, which can be cool.

The problem: It is also more work, and oftentimes completely unnecessary.

Last night a friend tried to talk me through adding a background while eliminating the default margin on a page. She is learning, knows more than me, though still needing more.

We spent half an hour. Frustrated, I Googled "background in HTML, and had a solution that required ONE LINE of code in a few seconds.

The CSS version takes 3 times as much space (3 lines) in order to get the margins dropped. Okay, I know someone here will probably show how it can be done in 1 or 2 lines. But the point remains, HTML is easier, far easier, and works for the majority of the people out there.

Where it gets weird is that most of html has been deprecated, yet MILLIONS of websites run on html. Think those people are going to bother learning CSS when their sites work already? Doubt it.

Moreover, publishers as of at least a year ago were no longer offering books with basic html 3.0/4.0. It's all XML and CSS for the most part.

My prediction is we will again see a return to the old html instruction because there is a market. Browser designers don't dare write out html capability cuz half the web would no longer show up.

So,,, anyone believe me? :) Just pondering stuff.

Cary
10-29-2007, 11:26 PM
I believe amateur web designers of personal/hobby sites will continue with using html markup to layout their pages if that's what they learned, but professionals will continue to move toward css. It makes maintenance much nicer for one thing.

I'm wondering if what you used to handle the margins only works in IE?

deveray
10-29-2007, 11:31 PM
Maybe only works in IE. We were both using Explorer at the time and never thought to compare with Mozilla.

You are definitely correct, professionals will virtually all use CSS. But they are outnumbered by hobbyists probably 1,000 to 1.

Cary
10-29-2007, 11:47 PM
Frustrated, I Googled "background in HTML, and had a solution that required ONE LINE of code in a few seconds.

The CSS version takes 3 times as much space (3 lines) in order to get the margins dropped. Okay, I know someone here will probably show how it can be done in 1 or 2 lines. But the point remains, HTML is easier, far easier, and works for the majority of the people out there.

Yes, you can add a background image and adjust margins with just one line in css, but it's a longer line. However, using css for a background gives you control over how the background image repeats or doesn't as well as its positioning, and margin settings will work in more browsers.

deveray
10-30-2007, 01:55 AM
Okay, one line, a little longer. That helps a little.

Like mentioned, I shall continue passively absorbing the code while actively studying php. Could be I will end up a complete convert at some point even, if it ever becomes as easy to me as html is now.

Cary
10-30-2007, 03:32 AM
Well, for example, you might see something like this to get rid of margins and add a background to the body:

body {
background-image: url("picture.jpg");
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}Which is the same as this:

body {
background: url("picture.jpg");
margin: 0;
}Which is the same as this:

body {background: url("picture.jpg"); margin: 0;}

It's just makes for a longer line, and can be harder to read.

deveray
10-30-2007, 05:53 AM
Both the second and third of those examples are, while a little longer than html, completely reasonable given the enhanced positioning possible.

The language is still 30 percent more typing than html. But I can see that last night we were working even more than necessary. Thanks mucho for setting out the illustration. That helped.

d a v e
10-30-2007, 06:53 AM
but for even a small site of say 10 pages with the same background image oni every page means
10 x short html line

vs

1 slightly longer css line in an external stylesheet

- plus if you want to change the background image or it's position (say left instead of centred then you only need to change one and upload the new stylesheet rather than doing a global search and replace on a whole site and then having to upload all the html files

domedia
10-30-2007, 12:58 PM
By using CSS classes I've taken old HTML nested table websites and reduced the markup (HTML and CSS combined) by more than 75%.

CSS is a huge time saver, and has been so since we could drop support for NN4. The CSS support for NN4 was so sporadic that you had to create separate stylesheets for NN, plus the fact that NN4 came out with 11 versions , yikes!

Deveray, if you work more with CSS, you'll see that the great benefit comes when yuo can have one stylesheet linked to all your pages. There is no longer a need to edit the HTML structure of each page in order to present the data differently, you just edit the stylesheet. This has also something to do with what we call Web Standards. Think of a webpage as 3 layers; you have the data layer, which structures information, that is your HTML with Hn tags for headers, address tags for address etc. Then you have the style layer which is where the presentation of this data is set, and finally JS where you can manipulate both.

HTMl will of course survive CSS. It will survive it because they live together and they are not mutually exclusive. HTML structures the data, while CSS styles it. They are different and one does not replace the other.

The biggest reason HTML styling is still around (it was dropped from the HTML specs in 1997, yes I said 1997), is that wysiwyg editors, DW being one of the really bad boys, have kept creating webpages with this archaic approach until very recently.

I know new aspiring web designers that have no idea how to make a sliced table nested website. They used CSS for styling since day one.

My prediction is that people that do not have sufficient knowledge in CSS will eventually be left out in the cold. It's not rocket science, it's not programming.. it's a pathetically easy protocol to learn. ;-)

BTW: your example about using HTML to add a background is:
-restrictive. the attribute does not have attributes itself so you can't specify repeat-x 10% center #fff like in CSS.
-the attribute is deprecated, since before 2000. You can go ahead and use it, but it's more limited, time consuming and you can't guarantee client support.

deveray
10-30-2007, 07:42 PM
but for even a small site of say 10 pages with the same background image oni every page means
10 x short html line

vs

1 slightly longer css line in an external stylesheet

- plus if you want to change the background image or it's position (say left instead of centred then you only need to change one and upload the new stylesheet rather than doing a global search and replace on a whole site and then having to upload all the html files

Fair enough. I forgot to account for the ability in CSS to link external commands, in which case, yes, a considerable tradeoff for the extra keystrokes. Guessing that no such thing can be done with html then, huh?

Probably because I am working with php anyway, the idea of being able to include an html universal formatting page led me to discount the need for that advantage of CSS. On the other hand, many people are building sites without the database and php additions, and have no need for them. Even in my case, it might be convenient to use a stylesheet for a few non-php files.

domedia
10-31-2007, 12:48 PM
You might as well. How do you do a non-tiling background image in HTML that is starting centered horizontally and starts 20% from the top of the containing element?

deveray
10-31-2007, 03:04 PM
By using CSS classes I've taken old HTML nested table websites and reduced the markup (HTML and CSS combined) by more than 75%.

Yah, guessing you mean by external linking of a stylesheet, then eliminating all the table code on each page. The actual CSS would be longer still (meaning the server gets to read just as much and a little more with each page), yet after counting up the lack of needing it on so many pages, the file size of each page has become considerably smaller.



CSS is a huge time saver, and has been so since we could drop support for NN4. The CSS support for NN4 was so sporadic that you had to create separate stylesheets for NN, plus the fact that NN4 came out with 11 versions , yikes!

I better go look up what NN means.


Deveray, if you work more with CSS, you'll see that the great benefit comes when yuo can have one stylesheet linked to all your pages. There is no longer a need to edit the HTML structure of each page in order to present the data differently, you just edit the stylesheet.

Agreed, though unneeded with a php / database website.

Also, that is taking into account you want to make all pages look the same rather than merely a navbar transfer from page to page. It is considered "professional" for all pages to appear similar, as you alude to below. But I think it might actually pertain to laziness in the beginning and then following the herd later.

Rather than custom design each page, the programmer merely attaches a stylesheet, making them all look alike. Because it is commonplace, people end up thinking that must be professional.

My pages are all different because I like being able to know what page I am on even if glancing from across the room. Plus I like the creative contrast, a custom designed "feel" for each page. There should indeed be common elements, but fun with variations, kind of like the bedrooms of your kids. Each one does not look like the livingroom of the house.


HTMl will of course survive CSS. It will survive it because they live together and they are not mutually exclusive.

Yeah, but the books have stopped teaching the easier form of altering appearance with html.


HTML structures the data, while CSS styles it. They are different and one does not replace the other.

Maybe from your angle. One DOES replace the other in many categories according to my review, including the subject of this thread, background images, along with text color and so much more.


The biggest reason HTML styling is still around (it was dropped from the HTML specs in 1997, yes I said 1997), is that wysiwyg editors, DW being one of the really bad boys, have kept creating webpages with this archaic approach until very recently.

I still believe the archaic is better in many ways. CSS people should have kept much of the same syntax from html, making the transition easier.

Dreamweaver can probably afford to drop html. But they WILL lose some people as a result, though a small percentage. At the very least, they should (and probably do) continue supporting handwritten html.


I know new aspiring web designers that have no idea how to make a sliced table nested website. They used CSS for styling since day one.

At least partly due to the fact that no one is teaching html anymore.



My prediction is that people that do not have sufficient knowledge in CSS will eventually be left out in the cold. It's not rocket science, it's not programming.. it's a pathetically easy protocol to learn. ;-)

Well, they are already being left out in the cold in some ways, such as books for sale at Barnes and Noble. And it could get worse. Browsers, I figure, will continue interpreting html for at least 10 years though, possibly forever.

domedia
10-31-2007, 05:41 PM
The actual CSS would be longer still (meaning the server gets to read just as much and a little more with each page), yet after counting up the lack of needing it on so many pages, the file size of each page has become considerably smaller.
The CSS file gets stored in cache after the first load, so the visitor only loads it once. New HTML pages has to be loaded, while the CSS is in cache.

I better go look up what NN means. Sorry, my fault; Netscape Navigator.

I still believe the archaic is better in many ways. CSS people should have kept much of the same syntax from html, making the transition easier. You seem to think that these are two competing technologies, they're not :) They're both part of the web standards. CSS is not a markup language, it can't have a markup syntax, just like it's different from a scripting language like JS.

Dreamweaver can probably afford to drop html. How would you structure your information without HTML?
At the very least, they should (and probably do) continue supporting handwritten html. Agreed, but I don't think there's much of a chance Adobe dropping that :)

m1a2x3x7
10-31-2007, 10:33 PM
css and html are like peanut butter and jelly

deveray
11-01-2007, 02:43 AM
You seem to think that these are two competing technologies, they're not :) They're both part of the web standards. CSS is not a markup language, it can't have a markup syntax, just like it's different from a scripting language like JS.

Wouldn't this be considered markup?

Inline styles The styles that are defined in the tag itself. Example...
<span style="color:green;">I am green<span>


Now let's do it in html:

<font color=green>I am green<font>


Let's try a rainbow word in html:

<font color=red>C<font color=orange>O<font color=yellow>L<font color=green>O<font color=red>R</font></font></font></font></font>

I can't even tell you how that might be done in css inline. Maybe by repeating the span tag for each letter?


How would you structure your information without HTML?

By structure, are you meaning tables? Prolly not, given the use of absolute positioning. I'm lost on that one.

d a v e
11-01-2007, 07:00 AM
have a look at this http://www.csszengarden.com/ and see how you can change the complete look - the way the html is presented via th css - just by selecting/writing a different stylesheet. think about how you would have to do that in html!

domedia
11-01-2007, 12:50 PM
Wouldn't this be considered markup?
Inline styles The styles that are defined in the tag itself. Example...
<span style="color:green;">I am green<span>

No, markup means the use of tags around your content.
What is inside the HTML attribute 'style' is inline CSS.
Just like what is inside a onClick attribute is inline Javascript.

I can't even tell you how that might be done in css inline. Maybe by repeating the span tag for each letter? Yes, if you think a different color for each letter is something you would want to do :)
<span class="re">C</span><span class="or">O</span> etc. Why you would like to do that is beyond me. 8-)


By structure, are you meaning tables? Prolly not, given the use of absolute positioning. I'm lost on that one.
With structure I mean adding HTML tags around your content so that it gives meaning to your data. H1 for header, address tags, quote tags, paragraph tags etc. See my earlier post about the seperation of HTML, CSS and JS.

Cary
11-01-2007, 11:08 PM
Let's try a rainbow word in html:

<font color=red>C<font color=orange>O<font color=yellow>L<font color=green>O<font color=red>R</font></font></font></font></font>

I can't even tell you how that might be done in css inline.

One of the great things about css is you don't need to do it inline. In this case, as you suspected, you would still have a bunch of spans mucking up your (x)html.


<html>
<head>
<title>Rainbow Madness</title>
<style type="text/css">
.multi {color:red;}
.multi span {color:orange;}
.multi span span {color:yellow;}
.multi span span span {color:green;}
.multi span span span span {color:blue;}
</style>
</head>
<body>
<p><span class="multi">C<span>r<span>a<span>z<span>y</span></span></span></span></span>
<span class="multi">m<span>u<span>l<span>t<span>i</span></span></span></span></span>
<span class="multi">c<span>o<span>l<span>o<span>r</span></span></span></span></span></p>
</body>
</html>

deveray
11-03-2007, 07:48 PM
One of the great things about css is you don't need to do it inline. In this case, as you suspected, you would still have a bunch of spans mucking up your (x)html.


<html>
<head>
<title>Rainbow Madness</title>
<style type="text/css">
.multi {color:red;}
.multi span {color:orange;}
.multi span span {color:yellow;}
.multi span span span {color:green;}
.multi span span span span {color:blue;}
</style>
</head>
<body>
<p><span class="multi">C<span>r<span>a<span>z<span>y</span></span></span></span></span>
<span class="multi">m<span>u<span>l<span>t<span>i</span></span></span></span></span>
<span class="multi">c<span>o<span>l<span>o<span>r</span></span></span></span></span></p>
</body>
</html>

Sometimes if just wanting to make a single word in a particular color, it seems a waste going up and creating a class, which itself is more work aside from scrolling up and creating the thing.

Either way, you guys have helped convince me that I really need to become proficient at CSS, whereupon deciding which method is best for any individual situation will be easy.

Okay, I give up :cool: ! CSS is better overall. Just laziness prompting my protest about needing to learn another bunch of code. I've probably spent more time protesting than would have been required to get the basics down. :-|

BTW, would it not have worked with a few less SPANs by altering the class commands a little?

For instance:

.multi {color:red;}
.multi2 {color:orange;}
.multi3 {color:yellow;}
.multi4 {color:green;}

Then:

<p><span class="multi">C<multi>r<multi2>a<multi3>z<multi4>y</multi3></multi2>

Something like that...

Cary
11-03-2007, 08:41 PM
BTW, would it not have worked with a few less SPANs by altering the class commands a little?

For instance:

.multi {color: red;}
.multi2 {color: orange;}
.multi3 {color: yellow;}
.multi4 {color: green;}

Then:

<p><span class="multi">C<multi>r<multi2>a<multi3>z<multi4>y</multi3></multi2>

Something like that...

You would get away with using the word "span" less in the style sheet, but the html would look something like below, and you want the html to be as clean as possible. Personally, I would try some kind of image replacement for this kind of effect.

<span class="multi">C</span><span class="multi2">o</span><span class="multi3">l</span><span class="multi4">o</span><span class="multi5">r</span>