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...