Tell Me About More Advanced Css

Please do. I know basic stuff with CSS like colours, fonts, sizes, etc.

But there are sites nowadays (in fact, it seems to become the standard) that just don't use tables or whatever at all - Just div's, ul's and li's.

I wouldn't know how to do that. I've been using tables for all my days, and it's not that I'm conservative or something, so I'd like to know how to use div/ul/li's + CSS to style make proper websites (that are much more efficient in terms of bandwith too). Google doesn't get me anything useful either. :/

Tell me.

Alright. CSS and XHTML (at least that's what they call it theseadays) are not becoming much more of a standard, statistics have shown, but this is not to say that they shouldn't. I'm very much preaching to the converted when I say that using CSS and XHTML will make your life easier, evidently, but it still needs to be said.

There are relatively few occasions, if any, when you need to use a <table>. They are the scourge of the universe, the underdog that deserves to be right under and frankly a bastard baby of the wars between Netscape/IE. You don't need them to create a sidebar, a header, or to lay anything out.

Let's consider those elements dead and buried.

0. Being 'Valid'
The first thing in creating any wonderful "standards compliant" website is the DOCTYPE declaration. Without it, IE 7 and all other browsers stay in quirks mode. This is when they render your HTML with whatever particular archaic bugs people have come to rely on they have in their rendering engine, instead of how things "should" be. Frankly, it's a nightmare until you add this:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

And this will boot IE7, Firefox and any other sane browser into realizing that you are going to be using "pure" (i.e. strict) XHTML and CSS, and rendering standards complaint as such.

1. Style And Content
The point of XHTML/CSS is that you are trying to separate content, the actual text of your website, from presentation. Sites from 1997 or so tend to have HTML that looks a whole lot like this:

Code:

<font color="red" face="Verdana" size="10"><center><u>Welcome To My Website</u></center></font>

Here, content is buried under all the tags that need to be used to present the actual text. That can be better expressed in XHTML, that is, purely content and tags, as:

Code:

<h1>Welcome to my website</h1>

With you having your accompanying CSS selector and styling as such:

Code:

h1 { font-family:Verdana; color:#ff000; text-align:center; }

This does the same thing, but will save on bandwidth (if you're using the same style over and over) and makes your HTML readable. It's perfectly acceptable to still have <h1>, <div>, [i], <cite> kind of tags, but not deprecated and annoying ones that concern themselves purely with presentation like <center>, <font> and so on.

2. Cascading
The 'C' in CSS stands for - you guessed it - cascading. You can have separate stylesheets which will 'cascade' - the most recently defined style for an object overrides any other definition made before it. The advantage of this may not be entirely obvious until you consider a scenario where you are a big website developer for someone like, say, Microsoft.

Microsoft has an overriding theme on their site - the same sort of header, font and so on - but has quite a few differences on each page to brand it to whatever they might be selling. Orange for Office, Blue for Windows, Gray for Mac software and so on. So you can have a 'main' stylesheet, say main.css which deals with the normal theme and secondary stylesheets: 'office', 'windows', 'vista', 'xbox' which don't have to redefine anything in main.css, saving on bandwidth and making the site more maintainable, but can still customise the theme and change backgrounds etc.

Thus you get a cleaner site, presentation seperated from content and a much more accessible site. (This is something Microsoft has ironically not done). And yes, the final point:

3. Accessiblity.
Frankly, just using CSS and XHTML makes your life a lot easier, and the life of those who might not find it as easy to browse the internet. It's a nice thing to do, not just for yourself.

Making a "proper" website is really just as easy as removing all presentation tags, replacing them with containers like:

Code:

<div id="menu"></div>

Code:

<ul class="quotes"></ul>

Code:

<blockquote class="important"></blockquote>

And then styling them. You can use each one several times with the power of the different selectors.

Tag global: (very global)

Code:

strong { color:red; }

"All bold text appears red."

This also works for tags like body.

Class:

Code:

.important { color:red; }

Any tag that class="important" appears in red.

ID: (most localised)

Code:

#menu { position:absolute; top:10px; }

The menu appears 10px from the top of the page.

The only real "crime" you can commit with CSS easily is overusing ids or most specific selectors and cluttering up your HTML when you don't need to.

Take for a quick example my site's front page:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> ****<head> ********<title>Kaniaz</title> ********<link rel="shortcut icon" href="/common/img/favicon.png" type="image/x-icon"/> ********<link rel="stylesheet" type="text/css" href="/common/css/main.css"/> ********<link rel="stylesheet" type="text/css" href="/style.css"/> ****</head> ****<body> ********<div></div> ********<ul> ************<li><a href="/programs" title="All sorts of wonderful C++, C# and PHP programs for your pleasure">programs</a></li> ************<li><a href="/writelog" title="Never to be explained or understood by the public">writelog</a></li> ************<li><a href="/media" title="Random images and/or crap that needed a home somewhere">media</a></li> ************<li><a href="/about" title="Just what is this site about? Who are you? Who am I?">about</a></li> ********</ul> ****</body> </html>

You can note the use of cascading stylesheets: I have a main stylesheet which sets the background colour, default font and so on and then a secondary stylesheet which deals with specific styling with the front page.

Everything is content. There no need for id="menu" or id="header" because there's only one div (header), only one ul (menu) and all the lis (list elements) can be styled the same. When you can, you should always try and do things as simple as possible.

You can style all the h's - h1, h2, h3, h4... to your liking, make use of [b] and [i]. There's no "right" way to do things, but once you understand CSS and it 'clicks', it's suddenly one of the most powerful ways of getting the browser to show things how you want it to.

Thanks Niaz, that post's definately a great help - Although I knew a large part of it, it will now actually make me use these things in practice.

Especially the seperate content and style thing is super useful - Thanks a lot.* :)

* Have my babies. Or maybe I want yours. Or maybe we should exchange them?!