Si va in sinergia: cominci dall'xhtml costruendo il layout poi vai a definire le proprietà generali di stile e di layout, poi aggiungerai elementi interni e probabilmente altre direttive di stile, e così via.
Ti faccio un esempio
estremamente generico, che potrebbe rappresentare un classico sito con titolo (header), colonna o riga dei menu, colonna dei contenuti e piè di pagina (footer).
Come vedi ogni blocco ha un suo id. Tramite tale id potrai definire nel foglio di stile le loro proprietà.
Per prima cosa ti consiglio di assegnare ad ognuno un bordo di colore diverso o addirittura un colore di background (che toglierai in seguito). Questo ti aiuterà a riconoscere nella pagina web, come cambiano i tuoi div in forma e posizione al cambiare delle proprietà css che gli assegnerai.
All'inizio non perdere tempo sui dettagli, come per esempio il tipo di font da usare o i colori o cose simili, tanto quelli potrai cambiarli a tuo piacimento in un attimo, sostituendo l'attributo corrispondente nel css
Le immagini sono l'ultima cosa, anche perchè è inutile perdere tempo a realizzare sfondi, cornicette, bottoni, ecc, quando poi sicuramente cambierai idea mille volte sui colori che si abbineranno bene insieme nel tuo sito. :-)
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
Commenta:head con i metatag
<head>
<meta http-equiv="content-language" content="it" />
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>Servizio - Sito in costruzione</title>
<meta name="robots" content="index,follow" />
<meta name="keywords" content="qui metti le tue parole chiave" />
<meta name="description" content="qui metti una brevissima descrizione del tuo sito" />
<link rel="stylesheet" type="text/css" media="all" title="Foglio di stile" href="http://www.miosito.it/css/miofogliodistile.css" />
<!-- [if IE]> <link rel="stylesheet" type="text/css" media="all" title="Foglio di stile" href="http://www.miosito/css/miofogliodistileIE.css" /><![endif] -->
</head>
Commenta:fine metatag e inizio del body
<body>
<div id="header">
qui ci metti l'header
</div>
Commenta:div contenitore generale (magari per un background)
<div id="pagina">
<div id="menu">
qui ci metti il menu
</div>
Commenta:div per i contenuti
<div id="contenuti">
qui ci metti i contenuti
</div>
</div>
Commenta:div per il piè di pagina
<div id="footer">
qui ci metti il piè di pagina
</div>
</body>
</html>
Sono cosi avanti che quando guardo indietro vedo il futuro.
