[thelist] how does XHTML/CSS seperate content from design more than using nested tables and the like?

[Craig Saila]

Chris W. Parker wrote:
 > basic with mostly text. can anyone give me some examples of complicated
 > sites using CSS only?

One of the catches is, with CSS, that a lot of sites need to be
backwards compatible, and Netscape 4 makes it hard to do anything
interesting. CSS can do some amazing things, for example check out Eric
Meyer's site, css/edge:
<http://www.meyerweb.com/eric/css/edge/>
And this site from 1996 when IE3 was released:
<http://www.microsoft.com/typography/css/gallery/entrance.htm>

 > 3. how does XHTML/CSS, when used correctly, separate content from design
 > more than using tables does? in a regular HTML page with nested tables

As mentioned, CSS allows you to change the global look of the site by
modifying only one or two files (the *.css), leaving the core
information on the page clean and accessible to any device (cellphone,
text browser, search engine) that needs to access it.

The easiest way is to think of it as this:
Both the Volkswagen Gold and the New Beetle share the same chassis, but
the bodies make the cars very different, HTML and CSS is the same.

By using DIVs and the like to create a basic structure to the page, you
can use CSS to style it. The "chassis" is solid, and not cluttered by
items used only to create a visual appearance. If someone is viewing the
page on a cellphone you can present a different "body" than you would to
the desktop PC visitor without rebuilding the entire "car".

This type of design also allows you present the information in logical
order, for example, in the HTML file the main article can appear first,
but using CSS it can visual appear on the Web page after the navigation.

I do this with my own site, and Jeffrey Veen talks about it in A List Apart:
<http://www.alistapart.com/stories/speed/>

Hope this helps a bit, and the other response help.

--
Cheers,

Craig Saila
------------------------------------------
craig at saila.com  :  http://www.saila.com/
------------------------------------------


_________________________________________________________
Do You Yahoo!?
Get your free @yahoo.com address at http://mail.yahoo.com