I think I understand the direction you came from, so maybe I should give a quick re-explanation of the concepts behind HTML/CSS.
The idea behind today's "separation of markup and styling" (or what they call 'semantic design') is to use only as much markup as necessary to accurately depict the content you have. As with everything on the internet, there's a sliding scale of how well people agree with this (and how many take the pragmatic approaches), but I'll explain my workflow.
So for step one, take the content you have...
Code: Select all
- Page header
- Search box
- Date of publishing
... and turn it into HTML markup. Completely disregard styling for now, but use classes instead to distinguish different logical parts of your markup.
Code: Select all
<h1><a href="">Logo Text</a></h1>
<form action=""><input type="search"><input type="submit"></form>
<time>July 1st 2012</time>
<span class="author">Lewis Carniville</span>
<span class="tags">Cake, Pastries</span>
<li class="current"><a href="">2</a></li>
<p class="copyright">© 2013 Barney The Dinosaur</p>
Step 2, go into CSS and mold the styling as close as possible to what you desire. Remember that you have all sorts of useful selectors on hand nowadays. Here's where some pragmatic types differ; I tend to use all the new recommended selectors, but if you, say, wish to support old browsers while messing a bit with your markup, you could, for example, use "first" classes instead of using :first-of-type. I will often use "hacks" like :after pseudoclasses to generate extra styling if need be, without touching the markup.
Now, if anything in your design necessitates a markup change, do so - and only use divs and spans unless it's a logical separation. Use classes on these elements to target them via CSS.
The idea isn't to pick between classes, tag specific rules or IDs, but to target your markup appropriately from CSS. Classes and tags are not tools for identifying things for CSS; they're to define and explain the content in your page.