CSS Tutorials
I'm looking for an intermediate-advanced CSS tutorial
I've seen webmonkey already and that has gotten me nowhere
I want to learn more about using s and more
I'm going to be building non-table sites, which I know have been discussed, and I also want to enhance my table sites with some CSS
Thank you!
Suzanne posted this at 23:49 — 11th December 2002.
She has: 5,507 posts
Joined: Feb 2000
alistapart.com has excellent articles (some very cutting edge, but take the good parts and learn learn learn!)
css-discuss.org is the repository of a vibrant discussion list about CSS and has a lovely WIKI as well. Many questions have already been asked and answered. The wiki has a great number of resources on various CSS topics.
ericmeyeroncss.com is about the book, which from all reports is an excellent book.
As for DIV and SPAN -- DIV is a box that you put around discrete amounts of content on your page, such as a blog entry, or an article, or a navigation section. You can roughly compare them to table cells that you can move around out of the grid.
SPAN is an inline element, and as such isn't a box (necessarily), but something that sits on the same line as the text or an image, or whathaveyou.
There are no rules for DIV and SPAN outside of these distinctions, however good practice is to use as few as possible and it takes some thinking to change from a tables-based coding practice to a div-based coding practice.
There are a number of good threads here on the topic of CSS and some issues involved.
For table sites that you want to use CSS with, I'd recommend consolidating your font tags into a set of styles and then applying them (analysis first, then application). Then you can slowly remove HTML attributes and replace them with CSS declarations.
The fewer classes you use (contextual CSS means you can set an ID for your DIV or containing element and control all content within that), the less the content will have to be revised for future redesign or future feeding of the information into other formats.
hth!
nike_guy_man posted this at 00:34 — 12th December 2002.
They have: 840 posts
Joined: Sep 2000
I'm consolidating some old HTML I am using now... it was created in some WYSIWYG program about 3 years ago... not the greatest HTML
It is a nav bar... and it is written like this:
<tr valign="top"><td align="center" width="200" bgcolor="gray" >link</td>
</tr>
<tr valign="top">
<td align="center" width="200" bgcolor="gray">link</td>
</tr>
That is the basic code for quite a while for all of my nav... would it be better to use CSS and do it this way:
<style type="text/css">TR.main {
vertical-align : top;
}
TD.menu {
background : gray;
width : 200px;
text-align : center;
}
</style>
.........
<tr class="main">
<td class="menu">link</td>
</tr>
<tr class="main">
<td class="menu">Link</td>
</tr>
Would that work quicker? Use less bandwidth? Make it more customizable (it is part of a PHP program)??
Suzanne posted this at 01:30 — 12th December 2002.
She has: 5,507 posts
Joined: Feb 2000
That would work quicker, yes, and probably use less bandwidth, but...
<style type="text/css">table#nav td {
vertical-align : top;
background-color : gray;
width : 200px;
text-align : center;
}
</style>
.........
<table id="nav">
<tr>
<td>link</td>
</tr>
<tr>
<td>Link</td>
</tr>
</table>
Would be faster still. And if you want to get away from using tables (and this is a prime example of a place that would work better as a list and look the same):
<style type="text/css">
ul#nav li {
background-color : gray;
width : 200px;
text-align : center;
margin-left: 0;
padding-left: 0;
}
ul#nav { /* this removes the indent */
margin-left: 0;
padding-left: 0;
}
</style>
.........
<ul id="nav">
<li>link</li>
<li>link</li>
</ul>
Renegade posted this at 07:56 — 12th December 2002.
He has: 3,022 posts
Joined: Oct 2002
http://www.w3schools.com is a good place to start, that's where i learnt most of the CSS that i know now, the others parts i got form TWF or from misc oher places
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.