CSS - Css Markup?

I am just wondering if there is such a thing as a standard way of writing html to suite a standard css. So that, for example you could download a new 'standard' css file and have it work straight away with your old html.

Sometimes the guys on oswd.org come pretty close, but the html always looks messy. Rogue div tags all over the shop. Can anyone point me to a resource on this, or a design forum where they practise it?

Thanks. C

Curious, what is regarded as the standard CSS markup method?

Displaying your attrbutes horizontally:
#wrapper{selector:attribute; selector:attribute; selector:attribute; selector:attribute;}


Or Vertically:
#wrapper{
selector:attribute;
selector:attribute;
selector:attribute;
}

Personally, horizontal seems the best. I like it because I can see the #id's and .classes all together and can follow the structure abit better. Makes it easier for me to find a certain stlye element. The argument someone presented in favor of vertical display is you won't miss a selector:attribute and the horizontal display it is hard to see the selectors:attributes. My counter arguement, in my head, was I can glance at a set of selectors:attributes and can easily identify what is / isn't there. I think I've read and written so much css that I can quickly identify pattens for certain elements and can spot rather quickly what is missing, if that is the problem, sometimes there is a large issue at hand. Eitherway, I'm in support of the horizontal display. Especially when there is a vertical style sheet that is 1152 lines long and the find option in dreamweaver is my best way of locating the style element.

Thoughts on the matter?

Let's start off with the code:
Code:

<div class="tuts_900">
	<h1>Recent Tutorials</h1>
	<img src="tutorial_avatars/vendetta.gif" width="60" height="60" alt="Vendetta Upper Deck" title="Vendetta Upper Deck" align=
"left" border="0" />
	<h2>Vendetta Upper Deck</h2>
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi ornare. Nam tincidunt ultrices libero.
	<p>Submitted Oct. 20, 2006 | <a href="">View Tutorial</a><img src="sitegfx/tuts_orange_arrow.gif" width="13" height="7" alt=
"" title="" border="0" /></p>
	</div>

What I'm trying to do is specifically target the <img> tag withint the <p> tag that's within the tuts_900 div.

I tried this: div.tuts_900 p img { asdfgasdgfgasdasd }; with no success.

How can I do this? Thanks.

I'm in the middle of doing a site conversion to xHTML and CSS using semantic markup,

Lets say I have something which needs a rating displayed in stars...

E.g. if the current html is :

Code:

<h1>Book Name</h1>
<img src="star.gif"><img src="star.gif"><img src="star.gif"><img src="star.gif">

I'd like...

Code:

<h1>Book Name</h1>
<h2>4 Stars</h2>

And do some image replacement on this when skinning the site... what do you think?

-D

I noticed that googlebot is reading and indexing the content of the left sidebar and and not the center content (title of posts etc).

I have tried this fix:

Place the sidebar call after The Loop in your theme files and then use CSS to float your post content right or absolutely position your sidebar on the left.

Because the spider bots read the page markup from the top down. So if your left sidebar lies above your post content in the markup, the sidebar will be indexed first. If, on the other hand, your left sidebar appears below your post content in the markup but is positioned left by CSS, the bots will index your post content first.

It works when I float the center content to the right to the point where the sidebars are where they are supposed to be but they are pushed down a little from the top and it throws the page nav (bottom of center content) and the footer out of wack.