Programming Forums
User Name Password Register
 

RSS Feed
FORUM INDEX | TODAY'S POSTS | UNANSWERED THREADS | ADVANCED SEARCH

Reply
 
Thread Tools Display Modes
Old Oct 21st, 2007, 5:02 PM   #11
Arevos
Programming Guru
 
Arevos's Avatar
 
Join Date: Aug 2005
Location: England
Posts: 1,499
Rep Power: 5 Arevos is on a distinguished road
Re: Why is CSS such a mess?

Quote:
Originally Posted by DaWei View Post
"Separating content and presentation" is a worthless buzz phrase, without clarification. Bolded text (presentation) carries meaning (content). Granted that it's nice to be able to bold an entire class of things (section heads, say), one needs to distinguish between presentation that is merely a stylistic or formatting issue and presentation that adds to the meaning of the document.
Bolded text may carry both presentation and content information, but that's why the humble <b> tag is depreciated. There's no reason why the meaning behind a tag can't be separated from it's presentation.

Instead of using <b>, you could use <em> if you want to emphasis the word, or <strong>, if you want to indicate forcefulness. Likewise, italics can also be used for emphasis <em>, or a citation <cite>.

If the bold tag has no meaning behind it, then just wrap it in a <span>. The advantage of using tags in this manner is that it tells the computer something more about what you mean, and allows for text-to-speech readers and other systems to better translate your document.
Arevos is offline   Reply With Quote
Old Oct 21st, 2007, 5:35 PM   #12
cscgal
Hobbyist Programmer
 
cscgal's Avatar
 
Join Date: Oct 2007
Location: New York
Posts: 163
Rep Power: 10 cscgal is on a distinguished road
Re: Why is CSS such a mess?

Sorry DaWei, but I am going to have to go with Arevos on this one. CSS can be a very good tool to separating content from presentation, and the fact that <b> is now depreciated in favor of <strong> is an example of this.

With regards to how CSS can be a useful tool for designers, take this scenerio: Picture this: the website of a large company with a marketing team, design team, etc. Their homepage has a two column layout: left column with content, right column with navigation, each encapsulated in a div tag. The marketing and design team does a usability study and finds that users respond better to navigation on the left on this particular webpage. Using div tags and CSS? No problem ... a simple change of 'right' to 'left' in the CSS file fixes the issue. Using invisible tables to create the two columns? You then have to manually change the HTML to put the navigation in the first <td> and the content in the second one. This causes a big stir with the marketing team because it's a big search engine optimization no-no to put all of your navigation HTML at the top of the page and more time-sensitive, more relevant content (that you want to rank for in the search engines) farther down on the page. Google and the other search engines always rank what's higher up on the page as more relevant in their search algorithms.
__________________
DaniWeb IT Discussion Community
Everything Information Technology related all in one convenient interactive online publication and community
cscgal is offline   Reply With Quote
Old Oct 21st, 2007, 5:46 PM   #13
DaWei
Resident Grouch
 
DaWei's Avatar
 
Join Date: Jun 2005
Posts: 6,453
Rep Power: 10 DaWei is on a distinguished road
Re: Why is CSS such a mess?

I'm not talking about some mundane crap about distinguising 'em' or 'strong' from 'b' or 'i'. I'm talking about inherent meaning in the content divorced from site style.

I'll invite you both to present a less-than-boring presentation using nothing but a word processor (or worse yet, a typewriter) without making your empases local. Crap, I'll invite you both to hire a printer and submit raw copy with in-text and marginal notes.

Perhaps, next year, the web will be the only form of communication. I'm betting against it.
__________________
Abstraction doesn't make it impossible to write bad code; it makes it possible to write superior code.
Contributor's Corner: Grumpy on C++ Exceptions DaWei on Pointers
DaWei is offline   Reply With Quote
Old Oct 21st, 2007, 6:02 PM   #14
cscgal
Hobbyist Programmer
 
cscgal's Avatar
 
Join Date: Oct 2007
Location: New York
Posts: 163
Rep Power: 10 cscgal is on a distinguished road
Re: Why is CSS such a mess?

I could create a page:
html Syntax (Toggle Plain Text)
  1. <html>
  2. <head>
  3. <title>Test</title>
  4. </head>
  5. <body>
  6. <div id="leftColumn">
  7. <h1>Paragraph One</h1>
  8. <p>Body one</p>
  9. <h1>Paragraph Two</h1>
  10. <p>Body two. This <strong>word</strong> is emphasized.</p>
  11. </div>
  12. <div id="rightColumn">
  13. <p>This is another column.</p>
  14. </div>
  15. </body>
  16. </html>

Throw this code onto an HTML page by itself (sans CSS) and it won't look very pretty at all. But it does everything I would want it to: it explains the function of the page. I can tell from this code that the body content is divided into two different text areas. The first text area contains two paragraphs, each with a descriptive heading. The second of these paragraphs puts emphasis on a particular word. The second text area on the page consists of a single paragraph.

Regarding functionality and usability, throwing design markup in there will not add any extra value to the function of the page. Using <b> to point out what text a user will see a bit bolder isn't going to change anything functionally.

Enter the designer. CSS now gives them the freedom to make this page look any which way they want, but the actual HTML markup defines the context.
__________________
DaniWeb IT Discussion Community
Everything Information Technology related all in one convenient interactive online publication and community
cscgal is offline   Reply With Quote
Old Oct 21st, 2007, 6:53 PM   #15
cscgal
Hobbyist Programmer
 
cscgal's Avatar
 
Join Date: Oct 2007
Location: New York
Posts: 163
Rep Power: 10 cscgal is on a distinguished road
Re: Why is CSS such a mess?

DaWei, I have decided to take you up on your offer and prove to you that separating content from presentation is more than just a buzzword. I went ahead and put the HTML code created above into a webpage, and came up with this:
one.gif
As mentioned in my previous post, not pretty at all. However, I then went ahead and applied two very different CSS stylesheets to this very HTML code and came up with two very different designs:
two.gif
All of the functional things that you can tell from the HTML markup can be seen in this style. The body content is divided into two different text areas: two columns, to be precise. The first text area contains two paragraphs, each with a descriptive heading. The second of these paragraphs puts emphasis on a particular word. Even though the <strong> tag is used for emphasis, as the designer I chose to emphasize a word by underlining it instead of bolding it. In fact, the entire paragraph is bolded EXCEPT for the word I'm emphasizing. The second text area on the page consists of a single paragraph. In a twist, I decided to make the text area called leftColumn appear on the right and vice versa.
three.gif
The purpose of this second stylesheet is just to point out the vast differences in appearance that can be achieved by changing the CSS, while still preserving the actual content. Still three paragraphs. Still two headings. Still an emphasized word.

The css used to generate these screenshots are provided for your interest:
Screenie 1 = no CSS
Screenie 2 =
css Syntax (Toggle Plain Text)
  1. body
  2. {
  3. background: #F1F1F1
  4. font-size: 12px;
  5. color: #BBBBBB;
  6. font-family: Verdana, Arial, Helvetica;
  7. }
  8. div#leftColumn
  9. {
  10. float: right;
  11. width: 200px;
  12. border: 1px dashed #BBBBBB;
  13. padding: 10px;
  14. }
  15. div#rightColumn
  16. {
  17. float: left;
  18. width: 200px;
  19. }
  20. h1
  21. {
  22. font-size: 16px;
  23. font-family: 'Arial Black';
  24. font-weight: normal;
  25. color: #000000;
  26. }
  27. p
  28. {
  29. padding: 20px;
  30. font-weight: bold;
  31. }
  32. strong
  33. {
  34. font-weight: normal;
  35. text-decoration: underline;
  36. }
Screenie 3 =
css Syntax (Toggle Plain Text)
  1. body
  2. {
  3. background: yellow;
  4. font-size: 16px;
  5. color: blue;
  6. font-family: 'Comic Sans MS';
  7. }
  8. div#leftColumn, div#rightColumn
  9. {
  10. margin: 20px;
  11. }
  12. div#rightColumn
  13. {
  14. background-color: #FFFFFF;
  15. padding: 20px;
  16. }
  17. h1
  18. {
  19. font-size: 18px;
  20. font-weight: normal;
  21. color: red;
  22. font-family: Verdana;
  23. }
  24. p
  25. {
  26. text-decoration: underline;
  27. }
  28. strong
  29. {
  30. color: green;
  31. }
Hopefully this example served to show you how a web developer can create the HTML while a marketer / designer can create the style, each completely separated from the other. Separation of content and presentation by using XHTML with a CSS stylesheet is more than just a fancy buzzword but rather something that CAN be achieved. In fact, I achieved it in this very post.
__________________
DaniWeb IT Discussion Community
Everything Information Technology related all in one convenient interactive online publication and community
cscgal is offline   Reply With Quote
Old Oct 21st, 2007, 11:35 PM   #16
DaWei
Resident Grouch
 
DaWei's Avatar
 
Join Date: Jun 2005
Posts: 6,453
Rep Power: 10 DaWei is on a distinguished road
Re: Why is CSS such a mess?

I appreciate you going to all that trouble. I think I must not have been clear in what I am saying. Therefore, let me give you a real-life example.

Suppose I want to present some content that someone else provides. To be more precise, suppose I want to present some content that a number of someone elses provide. Suppose, further, that I want all this content to be stylistically similar, but semantically and syntactically true to the provider.

Consider, that is, that I'm the printer and the publisher, and the contributor is the author and the editor.

The author knows that he/she must adhere to only one set of rules, a well-known and relatively simple set of rules: submit your work double-spaced, on one side of the page; include organizational material (title, chapter, page number, whatever is appropriate) at the top of the page.

The editor (in my case, the same person as the author) will attend to spelling errors and possibly consult with the author regarding grammar, modes of expression (passive versus active voice), and other stuff like that. Obviously, that's a toughie, which is why I make the editor and the author the same person.

The printer/publisher will know how to format things like citations in a standard manner. Underlines become italics, for instance. The author knows that there will be some minor subversion of content in this regard, but the author also trusts that there will be no subversion of content beyond this rather limited scope. If the author chooses to bold a word, that word will remain bolded in the final presentation. If the author has no way to bold a word (again, some of us go back to handwriting and typewriter days), the author may underline the word, knowing that it will be emphasized differently (bolded or italicized) in the final presentation, by mutual agreement.

There must be some agreements in order to achieve this separation of style and content. At the same time, the details necessary to achieve the final form must not be shoved off onto the author any more than is absolutely necessary to make the reconciliation and ultimate output possible.

Now, let me bring this home to you. If you look at the two items referenced in my signature, you will see some tutorials which have some stylistic features in common. The content, however, is entirely under the control of the author. Consider Grumpy's article. I'm sure Grumpy knows some HTML, but I have a similar collection of things elsewhere. One of my authors, who works in stained glass, knows absolutely nothing about HTML. She's never even heard of it. Let's stick to Grumpy, though, and pretend that he's not heard of it, either.

It is not part of the deal that I make Grumpy learn HTML and CSS in order to get his knowledge presented. Neither must he learn how to select an appropriate typeface, bind the pages together, take author photographs, and design a bodice-ripping cover, if he decides to present his work in print.

The bottom line is that Grumpy works with a text file. He can change his text file tomorrow and upload it. The contents of the article will change immediately. Those files are generated on the fly each time they are loaded. (Aside: if you try to validate those pages, you will find lebenty-zillion errors. I have bugs in the code that forgets some tags, neglects to close others, etc., ad nauseum.)

The only option I have, if I don't want to force Grumpy, et. al., to deal with HTML and CSS, is to impose a minimal amount of descriptive content to be included in the material, in some manner that is distinguishable from bare-bones content. I do this with pseudo-tags. Grumpy can select his headings. He can select the items which appear on the menu. He can distinguish the introduction from the main material from the bio material. His headings, however, will appear in exactly the same style as the headings Mary Pat chooses to use to separate her material regarding soldering lead cames from her material regarding cutting a curve into a piece of glass.

If you try this, I think you will find that separating presentation (style) and content (text) without clarification (cobbled up pseudo-markup, marginal notations, pre-agreed conventions, or whatever) is a buzz phrase.
__________________
Abstraction doesn't make it impossible to write bad code; it makes it possible to write superior code.
Contributor's Corner: Grumpy on C++ Exceptions DaWei on Pointers
DaWei is offline   Reply With Quote
Old Oct 21st, 2007, 11:53 PM   #17
cscgal
Hobbyist Programmer
 
cscgal's Avatar
 
Join Date: Oct 2007
Location: New York
Posts: 163
Rep Power: 10 cscgal is on a distinguished road
Re: Why is CSS such a mess?

In the world of real-life publishing (in the world of newspapers and magazines, where there are multiple authors to a publication), it's often not the decision of the individual contributor whether a word that's given emphasis is to be bolded or underlined. It's one of those things that is determined by the editor and standardized throughout the publication. If the magazine publisher decides that words given emphasis should be in 12pt italicized Times New Roman, that's the way it is throughout all of the articles in the publication.

Let me give you another example. Take this forum software. You can contribute a forum post without having to know HTML. If you want to emphasize something you can use the [b] bbcode tag, for example.

But then it's up to me - the editor, to take that [b] markup and translate it into what I want it to look like all via CSS. If I think that the [b] tag should be bright purple underlined text, all I need to do is edit a line in the CSS file and that's the way that all [b] bbcode will be rendered sitewide. If I think that the default text should all be red 24pt text, once again, a simple edit in the CSS file, and that's what it will look like. That's a separation of content, with minimal markup provided by content authors, and design, created by myself, to separate content from design.

I'm in agreement that HTML markup needs to include functional items ... markup which specifies where a heading is, where a paragraph begins and ends, wrap around a word that needs to be emphasized, etc. All of those types of things that were in my previous example and the types of things I would expect a contributing author to a publication to be able to specify.

But then it should be the control of the designer how to handle that markup. The designer should decide what an emphasized word should look like (i.e. should it be bolded or italicized?) The designer should decide how much spacing should be between lines and between paragraphs. How big the font should be, etc.
__________________
DaniWeb IT Discussion Community
Everything Information Technology related all in one convenient interactive online publication and community
cscgal is offline   Reply With Quote
Old Oct 22nd, 2007, 12:06 AM   #18
DaWei
Resident Grouch
 
DaWei's Avatar
 
Join Date: Jun 2005
Posts: 6,453
Rep Power: 10 DaWei is on a distinguished road
Re: Why is CSS such a mess?

I think we disagree on the semantics. You say you have separated the content from the presentation. I say you have subverted the content to satisfy the presentation. I also say it's virtually inescapable, but that doesn't alter the fact that it has happened. Thanks for clarifying it, though .
__________________
Abstraction doesn't make it impossible to write bad code; it makes it possible to write superior code.
Contributor's Corner: Grumpy on C++ Exceptions DaWei on Pointers
DaWei is offline   Reply With Quote
Old Oct 22nd, 2007, 12:09 AM   #19
cscgal
Hobbyist Programmer
 
cscgal's Avatar
 
Join Date: Oct 2007
Location: New York
Posts: 163
Rep Power: 10 cscgal is on a distinguished road
What I disagree with is the OP in this thread who (from the way I read it) is in favor of mixing content with design. For example, I am adamently against writing any form of depreciated html such as: <font size="+2">Heading!</font><p>This is <b>bold</b> text. The author should specify that they are posting a heading with the <h1> or <h2> tag, and then leave it up to the designer to format that heading.

Quote:
Originally Posted by DaWei View Post
I think we disagree on the semantics. You say you have separated the content from the presentation. I say you have subverted the content to satisfy the presentation. I also say it's virtually inescapable, but that doesn't alter the fact that it has happened. Thanks for clarifying it, though .
I have separated the content from the presentation because the markup that I use in the HTML code to specify where a heading begins and ends, where a paragraph begins and ends, etc. do not represent the end presentation. Nothing in the html markup dictates what anything will look like as far as color, font weight, font size, width, height, line spacing, etc etc etc.

In other words, what I mean by separating content from design is that the designer should never have to edit the content to make the final product look exactly the way they want.
__________________
DaniWeb IT Discussion Community
Everything Information Technology related all in one convenient interactive online publication and community
cscgal is offline   Reply With Quote
Old Oct 22nd, 2007, 1:03 AM   #20
DaWei
Resident Grouch
 
DaWei's Avatar
 
Join Date: Jun 2005
Posts: 6,453
Rep Power: 10 DaWei is on a distinguished road
Re: Why is CSS such a mess?

I know what you're saying, but I just disagree. The publisher gets the say about the huge majority of the presentation, but the author gets to do a few things besides pick adjectives and adverbs.

The author can't pick the font; at least, not without some negotiation or precondition or advance understanding.

The author can bold or underline a word, and the publisher can't dink with that; at least, not without some negotiation or precondition or advance understanding.

That's just my personal position, of course.
__________________
Abstraction doesn't make it impossible to write bad code; it makes it possible to write superior code.
Contributor's Corner: Grumpy on C++ Exceptions DaWei on Pointers
DaWei is offline   Reply With Quote
Reply

Bookmarks

« Previous Thread in Forum | Next Thread in Forum »

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
CSS file for Firefox bigguy HTML / XHTML / CSS 7 Aug 30th, 2007 9:20 AM
HElP !! My CSS skills STINK BIG TIME woocha HTML / XHTML / CSS 23 Aug 30th, 2007 8:04 AM
JScript CSS style switcher BY BROWSER physicist JavaScript and Client-Side Browser Scripting 0 Jun 11th, 2007 9:58 AM
CSS is lost when I change Dreamweaver html tag to accomodate Javascript ccarter1971 JavaScript and Client-Side Browser Scripting 3 Jun 1st, 2007 10:20 AM
Major IE6 issue + CSS Kezzer HTML / XHTML / CSS 1 May 29th, 2007 7:52 AM




DaniWeb IT Discussion Community
All times are GMT -5. The time now is 4:42 PM.

Powered by vBulletin® Version 3.7.0, Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Copyright ©2007 DaniWeb® LLC