CSS Tutorial - From HTML to XHTML - Prepare HTML pages for CSS

How to prepare HTML pages for CSS

After moving our code (on old pages or in our mind) from old HTML4 to XHTML, writing well formed code and all, we have to get ready for applying CSS styles.
But before that I have to get philosophical again. Once more, designing our new web pages is about separation of Content and Design. The trick is, to look at the information you want to present before laying it down in code. What kind of information do you have? You want to write a text about something? Okay, so look at it more closely. That's not just Text and bang! there you go throwing it between <body> tags on your page.
Your text has many different kinds of information types. It has titles, subtitles, paragraphs, quite possible even a few pictures for illustration. It's all in your head, right? You know which sentence will be a title, what will be in one paragraph and what will be in a completely different paragraph. You might even want to change the looks of those different information pieces? Don't be so secretive, share your ideas with the browser ☺. Tell him which section is one paragraph, which section will be a title, which section will contain an illustration. You do that by putting different types of information in different containers in your code. Be neat, clear up your mess, put the things in labeled boxes - Yes Mommy!
You might have used <p> already, more often than not, even without the closing tag. For what did you use it? To separate paragraphs, because the <p> already made an empty line above the text. There you go, that's already a Container. Other tags might be <div> (defining a block) or <span> (defining a section within a line):

					<p>

						This is a paragraph. It (should) contain one piece of text, that's what paragraphs do ;-)
					
					</p>

					<div>
					
						This is a div container. In general, it's mostly like the <p> but you have more than just paragraphs to present, right?
						In your div container you can put (yes) a paragraph, but you can put a lot more: images, or even several <p>aragraphs (to get a whole chapter), you can use 
						the div container for small boxes with a colored border to show special things.
					
					</div>

And here you can see what a <span> can do for you. The above two example were square boxes, a span isn't. You can use that inline for changing sections of text (make it bold, underline it, stretch it, squeeze it, make it larger, or whatever else). Certainly you can do more, and all those things not only to a <span> but to the <div> and <p> as well, but remember those two will affect the whole box. Just as this whole box above has the background 'white'. But it doesn't stop there, you can take any of your well known HTML tags and apply styles to it. Certainly it has to make sense;-).
How about this, that's a plain link: <a href="I-am-a-link.html">Neat link, hover over it</a>. I can have this link behave very differently: <a href="I-am-a-link.html">Neat link, hover over it</a>
But let's get away from text a bit, we can do things with images, too:

We can give it a nice colored frame, and we can even make it disappear when clicking with the mouse on it!
sample picture

So far, everything we did affected all instances of tags in the same way. When we say <p> should be red, then all paragraphs would have the text in red, no matter if we just take the whole 256 pages of text and put it in one single <p> or if we actually do our homework, identify the small content atoms, and put them in different boxes (say <p>aragraphs). They will all look the same. But we can, and should, give different containers different names and then we have control over each single container.

					<div class="redonwhite">
					
							This is a div with the name "redonwhite"
						
					</div>

					<div class="yellowonblack">

							This is also a div, but with the name "yellowonblack" and with the respective CSS code behind it.
						
					</div>

The names can be picked by you, and you can make them as meanful or as meaningless as you wish... The naming is done by class="classnamehere" but more about that in the CSS part.

Now it should be quite clear that it's very important to first think about how one can break down the whole idea that's becoming a page, what can be broken down into smaller chunks of content. When we prepare our HTML code like that, we will have it very easy to apply different looks on different sections.