Oops, I didn't see ryans post before I posted. Well you can have a read if you fancy it.
It's not new (1996 I think) but support for it has been so atrocious in the past that people are only really starting to use it for layout in the last couple of years.
The fundamental idea is that of separating the style from the content. You'll probably know how important this can be if you've ever done a site-redesign. It's a real pain copying and pasting all the content out of your old pages and into new templates. First you have to copy it, then you have to set the font again and make things bold/italic if they were bold/italic and colour the text if that was done before (except usually with new colours). It's like pulling teeth and a complete waste of company / personal time.
So, w3c, in their infinite wisdom, decided enough was enough. All this inline (embedded in the document) styling would make websites hard to manage and impossible to use effectively in other types of media like PDA's, phones, screen readers, web tv etc.
So they came up with the idea of xhtml and css. (Don't be put off by the X. Xhtml is nearly the same as vanilla html with a few key differences like: if you open a tag, then you HAVE to close it. There's loads of tuts on this on sitepoint and on the web so just have a rummage.) In xhtml, your aim is to write the page in a styleless but in a self describing / semantic way.
So, say you're designing a site, instead of making a three column table with the central one intended for content, you'll do something like this:
HTML Code:
<h1>Website Title</h1>
<div id="mainNavigation">
Link 1, 2 etc.
</div>
<div id="content">
<h2>Article Title</h2>
<p> Main article content</p></div>
<div id="subnav">
More links, ads what ever
</div>
If you look at an xhtml page without a css, it won't look pretty. You'll get something like your first ever web page. Very basic.
You'll then put a link in the head linking to the style sheet. You'll define all the styling in here: background colours, fonts, layout. The whole shebang.
To answer your questions:
Don't use tables except for tabular data e.g. if you wanted to display a spreadsheet.
Most layout is done using html div elements. These aren't new either but nobody had much use for them until css became popular. Divs are just like any other block level html element like <p>'s, except they're totally generic. Unlike <form> or <p> they have no intrinsic function. They're just wrappers for other elements. You can assign them ids like in the example above and these act as hooks for the css to latch on to.
So, a simple style sheet with two rules would look something like this:
(/*this is how you do comments*/)
Code:
body{ /* this is called the selector. It decides what you're applying the style to. In this case, the whole body of the document */
background-color:white; /* this is a "property" with a value of white assigned to it. You can also use hex or rgb values*/
}
#mainNavigation{ /*this is an id selector and applies this set of rules to the div, from the example above, with the id attribute set to "mainNavigation" */
border: solid red 1px; /* a solid red border 1 pixel wide - easy */
background:#fdd; /* #fdd is a hex short hand for a light pink, it's the same as #ffdddd */
}
This is a list of the css properties you'll use most. http://www.htmlhelp.com/reference/css/properties.html
For the full list go to the w3c site
http://www.w3.org/TR/REC-CSS2/propidx.html
Originally Posted by countervail
Posting Permissions
Bookmarks