Slowly getting to grips with CSS, and how to manipulate the lay out.
One of the things I have not been able to find much info about in books, tutorials or posts on the forum is what to use when.
Are there any tutorials or threads/stickies/wikis about what is best to use when regarding
span
div
style
id
class
and whatever other forms of css manipulation
TechnoBear’s link is a good one.
Regarding spans and divs, they are just wrappers for content that allows you to target bits of content for styling. Divs are for blocks of content that have their own space, while spans are mostly for singling out bits of content within a block, like a word in a sentence.
So if, for example, you want some content (like a heading, a form, a paragraph etc.) to form a sidebar, wrap them all in a div, give it a width and float it.
If you want a word within a sentence to be a different color, you can wrap that word in a span and then apply styles to that span.
ids and classes allow you to target elements (like divs and spans) with CSS. So, for example, that span used to make text a different color could have a class applied to it, such as class=“highlight”, and then in the style sheet you’d set a color for the class “highlight” (e.g. .highlight {color: red}) and then you could reuse that class throughout your site.
The style attribute should be used rarely. It allows you to apply a style on the page itself rather than via the style sheet. It’s not good to use, though, as you have to go back into the page to change the style, which gets really inefficient if you have used it in several places.
Thanks folks.
I’ll sum it up to see if I’ve got the right end of the stick.
Span: essentially meant only for inline; avoid in css where possible.
Style: see span.
Div relates to span as class relates to id
Id defines a manipulation of certain amount of text, class applies this manipulation to the amounts of text defined by it.
Am I far off?
I have been looking trough bits of Technobear’s link (which info I somehow missed searthing Sitepoint 
) and it helped understanding.
What would be great, is to find some stylesheets with html-pages to see what it actually looks like in real life.
Things that would seem more than obvious to somebody with plenty knowledge and experience, aren’t necessarily obvious to newbies like me. For example: Ralph was kind enough to show me the trick for making text adjust to the screen without ever needing to use the horizontal scrollbar, thereby making it possible to read the entire page by simply scrolling up and down, regardless of screensize or zoom setting: the “wrap-trick”. Somebody added the (I imagine it is) clever "width-limiter adivice.
What I now need to find out, is how and where to stick something like a bit of wrap code for best result.
I am getting close to understanding the individual bits, but am lacking “the big picture”. What should I do to increase my insight in how to assemble the individual bits of css into a logical and efficient style sheet?
I am an engineer by trade, and in my line of work there are usually many ways to make things happen. But although they all work (to some degree) I often look at things other people have “designed”, and wonder if the looneys were running the asylum. Am I correct to assume a similar thing is true for webdesign?
Those aren’t really accurate. The div/span relationship doesn’t equate to class/id—they are really completely different things. (It’s a bit like comparing male/female with dog/cat.)
What would be great, is to find some stylesheets with html-pages to see what it actually looks like in real life.
You are in luck, as there’s about a billion web pages online that illustrate these in real life. 
But seriously, a great thing about the web is that you can look ‘under the hood’ and see the HTML and CSS at work. For example, right click on any part of a web page in a browser like Chrome and choose Inspect Element, and you instantly see the HTML under the hood and the CSS that is styling it.
I am getting close to understanding the individual bits, but am lacking “the big picture”. What should I do to increase my insight in how to assemble the individual bits of css into a logical and efficient style sheet?
Honestly, I would recommend you sit down with a good book on HTML and CSS to get the big picture—which is essential, IMHO. In a few days you will have a solid understanding of the subject, rather than sifting around the web picking up random tidbits here and there.
If you use Firefox or Chrome, then I highly recommend installing the Web Developer Toolbar. (I’ve only ever used the FF version.) It has a CSS menu which, among other things will allow you to view the CSS for a page, or disable certain parts of the CSS, etc. The toolbar has many other useful features, too - I don’t know how I’d work without it.
Right, I shall avail myself of this tool post haste.
Thanks for the tip.
Back to my home work then.
This certainly helps. 
To make it exactly what I need, is the option to look at the the whole stylesheet instead of the one element; is there such a tool?
Alas, I have borrowed every book from my library on html, xhtml and css that I could lay my hands on (I’m a member of 3 library groups, covering about 20 libraries), plus have some bits myself. Unfortunately, none of them helped much to give me the insight as to how the whole sticks together. If I could find a book that does exactly that, I would buy/order it straight away unless the price went into the ridicuous i.e. 3 figures. What doesn’t help, is that I have a bit of a funny learning pattern; if the format (irrespective of subject) suits me, I learn faster than anyone I know. If the format doesn’t suit match, I often struggle. As a result, I often spend more time to find the right materials, than on the actual learninig.
Yes - “View CSS”, the last option on the CSS menu in the Web Developer Toolbar.
Yeeeehaw, I shall be busy today.
Have fun. 
That should be covered in about the first paragraph or two of any decent book on the subject.
Maybe you need to read them a little more carefully.