Correct your terminology; there is no such thing as "Pure CSS"
 

This is the only place in the world where I've seen people use the term "Pure CSS"... It doesn't exist people... It's like saying your car is pure red... nothing else, just red...

I will explain and briefly describe the differences between some of these terms and what they mean to you :P The description for each portion will become increasingly more in depth but feel free to bail out when you reach your limit ;)

HTML and XHTML are web page markup languages. Markup languages define the structure of a document, in this case a web page. This differs from CSS because CSS does not define structure at all, it defines the appearance and layout (but more on that later). The difference between HTML and XHTML is a semantical difference. Meaning the way certain tags are written is different (e.g. an img tag in HTML closes with > while XHTML requires />). XHTML1.0 was created as a transitional step for the next generation of markup languages and XHTML1.1 (which is the most widely used) was just another step forward. Looking ahead most people are excited about html5 because of a few new features (canvas is a really big seller) but there is also an xhtml5 (same vocabulary, different semantics). I personally believe HTML5 will become the favorite over XHTML5 due to various things being easier and more logical like doctypes, inline scripts, better validator, etc...

Now about CSS... CSS, as aforementioned, is a language that defines the presentation semantics or the "way something looks". When someone says something is "Pure CSS" they're essentially saying that their site is nothing but a definition of how something would look IF there was a site... it doesn't work like that. CSS can be applied to any web page markup language and is completely independent...

Tables vs Divs... I see a lot of people talking about how their site has no tables or it's old and has all tables etc... I'd like to clarify a few things. First, tables are not BAD per se. They have a use, they're for tabular data. When you hear that term think Excel spreadsheet as they are, essentially, a giant table. Using tables for layout is bad, I would fire any developer that worked for me if they were caught using tables for layout. This hasn't been correct for over five years and any web developer that hasn't bothered to learn best practices in five years is not someone I want working for me. Using tables for layout is also more verbose; meaning it requires a lot more formatting code (x/html) to make the elements look the same. This effects both amount of data that needs to be transfered on each page load AND the speed at which the browser can render those elements. Additionally table layouts + css are virtually useless... Tables define a very specific structure and appearance whereas divs define simply an area with no structure. Divs leave all of the styling and appearance to CSS. To help visualize this I'll provide an example.

Imagine a page which has two columns, a left nav and a right content area. Using tables you would do something similar to...

Code:

---

<table>
  <tbody>
    <tr>
      <td id="leftNav">Left Nav</td>
      <td id="rightContent">Right Content</td>
    </tr>
  </tbody>
</table>

---

Using divs you would do something similar to:

Code:

---

<div id="leftNav">Left Nav</div>
<div id="rightNav">Right Content</div>

---

Much cleaner and easier to read right? But it gets better... what if you wanted to change the columns around? To do this as a table you'd have to go into your HTML and move things around, adjust sizes, etc...

Using divs you don't have to touch the html you would simply change the CSS... Let's say the CSS for our columns looked like #leftNav { float: left; } #rightContent { float: right; }... simply change the floats around and you're done, end of story no need to go through and change every page or template that uses those two sides...

So there you have it, why divs are superior to tables not only because the W3C tells you that tables for formatting are incorrect! I would also mention that working with tables are a pain in the ass due to difficult CSS selectors (or having to place TONS of class="" on all your td elements). Tables offer NOTHING for layout whereas Divs offer an abundance of flexibility and options. All of these are amplified when you start using AJAX and other JS for manipulating the DOM (Document Object Model)... The bottom line is, using tables creates excess code which slows down development times and raises maintenance costs.



Web Geeks Only After this point...
If you're really geeky and you're still reading this I'll add one more bit of knowledge... All CSS is not created equal. To make your web pages render as fast as possible you need to understand how browsers process CSS... One of the worst things you can possibly do, and I see VERY frequently, is to use a CSS selector like:

.class1 .class2 { some: style; }

What happens here is for every element that matches .class2 it has to traverse backwards up the tree to check if there is any parent element, anywhere, that matches .class1... Tossing these selectors around will definitely dent your website performance particularly on older machines. Instead try to use

.class1>.class2 { some: style; }

wherever possible as this says that .class2 must be a direct descendant of .class1 so it only needs to traverse up one level... muuuuuch faster. There are a lot of these tricks with CSS to help speed up rendering times, I recommend that any developer take a look at how CSS is applied in browsers in order to optimize their selectors...

Maybe the people that use the term 'Pure CSS' should have explained to you what they mean by it.

That way it would have saved you the write-up as they probably weren't being too literal about it. :)

It's all semantics.

When someone tells me their site was designed in Pure CSS I automatically assume they used a DIV layout model vs. a tabular layout model. It's like someone saying to define your alt tags when they're not even tags, they're attributes for alternate text. But people still call them alt tags and I still know what they're talking about. :2 cents:

Agree with both of you however this post was spurned from a few people saying they don't use html they use pure css... so there's obviously a segment of people that could find some value from the post ;)

That and there's generally some good information in there for anyone that's interested... And anyone in a web related business would do well to read a quick post to gain a greater understanding of the technology they employ ;)

You can have my <tr><td> when you pull it from my cold dead hands.

I have pure Diet coke.. Want some?

I build pure css websites, the display of the website is in pure css. The framework can be anything, I don't need html to display a web page.

pure css is fbi

I thought we were working in the 21st century using broadband.

Because you would rather spend labor dollars on fixing layout issues cross browser... :2 cents:

CSS isn't mature enough for browsers to support it correctly for seamless layouts... I have switched back to using tables because it saves me $$$ in labor and I haven't seen a substantive difference in search engine placement to justify the increased labor costs of supporting tableless layouts... the amount of bandwidth consumed by increased page size is minimal because I have found that with all of the css hacks you have to add to maintain seamless tabeless cross browser layouts you end up with close to the same page size including the css file.

Says the noob.

Look, everyone here that knows anything already knows the shit you typed up. It's elementary shit. You are not teaching anyone anything. The rest of the chodes on here, don't care and have no need to know any of this.

This was a complete waste of a thread.

CSS is very mature as far as web tech goes... The only cross browser issues you'll run into are really with IE6 and that's pretty much over with, thankfully.

While the file size isn't THAT much different as you said however the only argument anyone has made against Div layout is really not an argument as the basis for it lies in the fact that the developer doesn't have the experience necessary to correctly format CSS and it takes longer... After the initial learning curve it's much faster, more readable, and there's no cross browser issues...

Not everyone here knows what I typed up it's elementary content for web developers but this isn't aimed primarily at web developers... just the last section...

I wouldn't put this in a waste of a thread category when placed in context of the rest of the posts on this board ;)

By that statement it is obvious you don't really get much traffic or look at traffic stats... a great many users are still using ie6... additionally, it isn't the only browser with layout issues because of poor CSS implementation... you just haven't run across any and I have. Most people are not using ie8 and ie7 still has a ton of css issues.

Had to comment, from one malapropist to another.

"Spurned" means to reject disdainfully or contemptuously. You wanted "spurred."

Anyway, seemed funny in a thread about semantics and terminology. :upsidedow

Agree a bit with the others, too. I don't think I've ever seen the term "pure CSS" to mean anything other than sites that use a columnar structure but not HTML tables.

I always interpreted "pure CSS" to mean that the presentational attributes
(colors, sizes, etc.) are purely defined in CSS, as opposed to HTML 3.2 <font color=... > stuff.
That is the styling information is pure CSS.

The same principle applies, in my mind, to dynamic content like the drop
downmenus at the top of this page, which have been described as "pure CSS"

drop down menus:
https://bettercgi.com/strongbox/
That is, the effects are done purely with CSS as opposed to JavaScript,
or Flashing and other incompatible proprietary plugins.

Obviously that styling information has to be applied to something, some form
of HTML, XML, etc., but the styling is done purely in CSS.