CSS Tutorial Recommendations

[Mot]

We all have to start with CSS somewhere.

As someone who's just building his first couple of sites using CSS, I'm finding it pretty frustrating and it's not always clear where to turn for help.

I've found several tutorials that I've used to kickstart my CSS developing adventure, but I often question whether I'm seeing as clear a picture as I can about how this is supposed to be done. Seeing how badly it has all gone wrong for me while working with a couple of sites would probably give you quite a laugh! lol.

So, if you would, please post your favorite CSS Tutorial link here so we can all benefit from better knowledge of CSS and learn additional tricks.

Thanks, and here's a few of the ones I've found so far:

Tizag's CSS Tutorial
HTML Dog's Beginner and Advanced CSS Tutorials
Advanced CSS Layouts: Step by Step
BrainJar: Experiments in Web Programming
CSSPlay

[daredare]

i could suggest you this: http://www.w3schools.com/css/default.asp
havent done it myself but their tuts are a good starting then if you have questions i would suggest you the coding forums: http://www.codingforums.com/

[Cary]

http://westciv.com/style_master/academy ... index.html
http://westciv.com/style_master/house/t ... index.html

[chrisjlocke]

I was going to suggest HTML Dog, but thats already on your list. Found that extremely helpful when I first started out with CSS.

[MaxD]

Nothing wrong with a good book. Sit with HtmlPad in front, whilst searching the index for a clue, then test it out. All guides are like a dictionary in the end, you have to string the words together to make a story.

A good reference is: CSS in easysteps by: Mike McGrath ISBN 1-84078-301-X

[multifarious]

ever wondered why certain stylerules take precedence over other rules? this is due to specificity.. (yes, that's a word )

get your info from:
http://www.stuffandnonsense.co.uk/archi ... _wars.html
http://www.rebelinblue.com/specificity.php

[kramsart1]

Hi I'm totally new to web design. Can you please advise a sure process for me I'm not getting any younger. What do I really need to learn. Ive been getting books from the lybrary on HTML and CSS basics I plan to build a web site for myself ( an artist ) with a light box or some kind of gallery etc I dont need to be a rocket scientist but want to try and stay almost current. Any advise would be appricated

[syrupcore]

:? Hi I'm totally new to web design. Can you please advise a sure process for me I'm not getting any younger. What do I really need to learn. Ive been getting books from the lybrary on HTML and CSS basics I plan to build a web site for myself ( an artist ) with a light box or some kind of gallery etc I dont need to be a rocket scientist but want to try and stay almost current. Any advise would be appricated

Write good HTML and worry about the CSS after. If you have good HTML you can gradually improve the design over time. If you have bad HTML, you'll be constantly dealing with the HTML instead of the CSS.

Use as little HTML as possible (but no less) and name things (like IDs and classes) as what they are - not how they look. div id="maincontent" instead of div id="left-column" because in a year, who knows what your design will be.

Then avoid position: absolute; like the plague until you've been at it a while. It's a bitter tempting devil and will bite you!

[chrisjlocke]

As listed in post #1, I'd recommend the HTML Dog tutorials. They start out very basic and guide you very gently on what HTML tags are and when to use them. The major "selling point" of that site as well is to teach you the proper standards, which the site owner is very keen on. Thats a gooooood thing.

http://htmldog.com/
.

[MaxD]

Write good HTML and worry about the CSS after. If you have good HTML you can gradually improve the design over time. If you have bad HTML, you'll be constantly dealing with the HTML instead of the CSS.

Here is some html:

<div id="bigbox">
<div id="mediumbox">
<div id="smallbox"></div>
</div>
</div>

Not much without the css describing position, size, color, bg image, z-index, border etc etc

How about an example

[syrupcore]

Here is some html:

<div id="bigbox">
<div id="mediumbox">
<div id="smallbox"></div>
</div>
</div>

Not much without the css describing position, size, color, bg image, z-index, border etc etc

How about an example :?:

guess it depends on what you're marking up. Since there's no content it's hard for me to do anything except say "yup, that's html." What sort of example are you looking for?

here's a common example (I think) of good markup vs bad markup: the ever present horizontal nav menu.

Good:

Code: Select all

<ul class="nav">
	<li><a href="#">nav 1</a></li>
	<li><a href="#">nav 2</a></li>
	<li><a href="#">nav 3</a></li>
	<li><a href="#">nav 4</a></li>
	<li><a href="#">nav 5</a></li>
</ul><!-- /nav -->

Bad:

Code: Select all

<table class="nav">
	<tr>
		<td><a href="#">nav 1</a></td>
		<td><a href="#">nav 2</a></td>
		<td><a href="#">nav 3</a></td>
		<td><a href="#">nav 4</a></td>
		<td><a href="#">nav 5</a></td>
	</tr>
</table><!-- /nav -->

The second one (in a table) will work just fine but what happens when you (or your client) decides you want the nav to be vertical? By marking it up with something meaningful (a list of links) as opposed to something presentational (a table will get the links to display horizontally) the code becomes easier to maintain. Mind, that's a mighty clean table in this example and more often than not you see goofy stuff like:

Code: Select all

<table class="nav">
	<tr>
		<td class="menu-item"><a class="menu-link" href="#">nav 1</a></td>
		<td class="menu-item"><a class="menu-link" href="#">nav 2</a></td>
		<td class="menu-item"><a class="menu-link" href="#">nav 3</a></td>
		<td class="menu-item"><a class="menu-link" href="#">nav 4</a></td>
		<td class="menu-item"><a class="menu-link" href="#">nav 5</a></td>
	</tr>
</table><!-- /nav -->

with a ton of extra useless classnames and general html bloat (another row added for spacing...). Unless you're writing a "skinnable" CMS template or forum software (view source here), classing everything is just a waste of time and bandwidth (bad html). All of that stuff could be handled with descendant selectors ala

Code: Select all

.nav a {color: red}
vs
.menu-link {color: red}

they both work but one is easier to maintain.

For another good a/b example, look at an old version of PHPBB (perhaps http://messageboard.tapeop.com/viewtopic.php?t=64410) and look at a modern one (like this very forum). First look at the total amount of HTML involved and then consider what it would take you to redesign each codebase if you had to. Blumentals could be completely changed (style and layout) from a CSS doc alone where as the tapeop site would require a total rewrite of both the HTML and CSS.

hope this is what you were asking about. CSS is all about styling HTML. Starting with good (semantic, lean, accessible) HTML makes writing CSS a lot easier.


Will

[MaxD]

So you were talking about tables, and the troubles they can cause? Generally I don't try to use tables at all, unless its a script I'm using which uses tables, and I have to make it work as best.

Coincidentally I had an email from Sitepoint who add me to their mailing if I download their samples, then tell me I'm already listed

It's about object orientated css. Here is a video. Haven't checked it but I'd imagine its useful:
http://wiki.github.com/stubbornella/oocss

[syrupcore]

So you were talking about tables, and the troubles they can cause?

Not really - just an example.

<div id="navHome"><a href="#">Home</a></div>
<div id="navProducts"><a href="#">Products</a></div>
<div id="navAbout"><a href="#">About</a></div>

<p class="blueHeadline"><strong>my headline</strong></p>

<p class="list"><img src="bullet" /> list item</p>
<p class="list"><img src="bullet" /> list item</p>
<p class="list"><img src="bullet" /> list item</p>
<p class="list"><img src="bullet" /> list item</p>

or worse
<img src="bullet" /> list item <br />
<img src="bullet" /> list item <br />
<img src="bullet" /> list item <br />
<img src="bullet" /> list item <br />

are all common ways people make using CSS hard.

I'll have a look at the oop css. I've seen attempts before but it mostly seems like a neat way to get people to let you speak at conferences. :)

[MaxD]

They're pretty good examples of poor styling of elements. Looks like that kind of author is still using inline styles. Had a look at the forum code too, and that is a real mess.

[syrupcore]

It's about object orientated css. Here is a video. Haven't checked it but I'd imagine its useful:
http://wiki.github.com/stubbornella/oocss

Just had a chance to look through her slides. Seems pretty spot on for bigger sites and general best practices. It's pretty much how we get stuff done at work (isitedesign.com). "object oriented" is a bit of a stretch but hey, if it gets people to pay attention, rock on. :)

For sure, that method would fall on it's face without using good, minimal, semantic HTML.