where did you all start??

I never learned tables, so i'm hoping that means I won't have any bad habits to break. I also never really learned web at all. I mean I understand the basics of html, but i've never built a site. yes i realize i'm beyond fashionably late to the party.

I see a lot of sites, ALA, tutorials abound, do you just code or do you code via Dreamweaver??

I want to learn so I can make my own portfolio site and also build sites for some businesses I'm starting up.

I hear CSS is the way to go, but I don't know where to begin. All those <div>s and all the angst of positioning, at least according to my friend who's in the trenches currently.

can anyone point me in the right direction?

Don't worry LFM, i'm in the same predicament, am finally getting round to learning the basics! Oh and cheers for the links Karma.

Sweet links, thanks.

thanks ihc

yes - unless its really nothing at all that you are styling best to put them in external files.

keeps your code tidier and of course multiple pages can refer to the same stylesheet.

also separate files for different things is a strategy for ironing out browser bugs/quirks in a manageable way

you wont encounter those in typography - they all kind of work for that (watchout for line-height) just in layout stuff

a good tutorial for organising your sheets can be found here and here. These aren't precisely what i work with but its along the same lines.

I blogged about this over at forgivenessissexy

many wouldn't bother being that fussy but it helps you learn in manageable chunks and also make changes as your site 'matures'

and condense your css too

background: #fff url("img/bg_para.jpg") no-repeat;

margin: 0 20px 0 0; hehe

use something like cssedit and bbedit for coding, grab some free xhtml / css layouts via googling, mess with them a bit to see what does what, then adapt them to your needs.

also, as you can see, you can shorten css quite easily (may cause problems in older browsers*), here are some more tips along those lines...

color - #fff turns into #ffffff, #f0 turns into #f0f0f0 etc.

margins - margin: top left bottom right = margin: 10px 5px 20px 5px, and you can shorten certain variations a little more, like so - margin: 10px 5px, that would translate into margin: 10px 5px 10px 5px, for example. margins go clockwise, from the top.

links - always declare link stylings in this order - a:link, a:visited, a:hover, a:active - LoVe/HAte. declare them all, too.

...actually, you could possibly add the :focus pseudo class in there, before active... so, link, visited, hover, focus, active. you'll need a new way to remember the order now.

i'd layoff short-coding til you work out what everything does

its worth learning about the cascade scoring though

by letting the cascade work its magic you can actually trim out a tonne of css you might have added if you tried styling every element.

the cascade, the C of CSS, is the pattern whereby each element 'inherits' the styles of the its 'parent' or enclosing tag

if you apply styles to then all the sub-elements will inherit the same styles [ymmv*]

the cascade scoring is a means of managing the scenario where two lines of code apply to the same element

a {}

is less likely to apply than

a.class {}

which in turn is trumped by

body div div dl li a#id {}

a good overview of css specifitiy scoring [again YMMV*] can be found at stuff and nonsense which uses starwars figures to illustrate the point.

also download the freeware app XyleScope which the greatest ever app to debug your own css code. one of the panes int he main window shows the 'score' for a particular rule and you can see what is overriding what

* some browsers score their propriatory styling (underline and blue for links for example) higher than specified css. so if you find (most likely with IE) that you have made a style command for an element but its not working - make it more specific

drag meska in the soup with you

and no breast stroke!

holy cow!

dek, i think i <3 you.