Ofta, när du använder tabeller, märker du att denna vill sträcka ut sig över mer än 100% av sidan vilket resulterar i scrollister i nederkanten. Det är något som skall undvikas då besökaren får svårt att se hela innehållet och tappar orienteringen. Det är vid dessa tillfällen en div-tagg kan vara nyttig för att bädda in bilder, tabeller eller annat på sidan. Samtidigt är div-taggen enklare att använda vid stylesheets som vid positionering, alignoch liknande.

Om du skriver, exempelvis, div {width: 80%} i din css och sedan lägger div-taggar precis innanför body-taggarna får du allt på sidan att hålla sig innanför fönsterbredden.

Innanför div taggen kan du använda flera olika css kommandon för att utforma just denna tagg. Om du, exempelvis, vill ha en spciell bakgrund på en viss del av dokumentet använder du id kommandot. Id kommandot skriver du som # och skriver sedan vad detta skall göra i css filen. För att då få en annorlunda bakgrund på en viss bit av sidan använder man alltså <div id="annorlunda"> precis innan avsnittet och slutat avsnittet med </div> i css filen skriver vi #annorlunda {background-color:#FF9900;}. Och får då en

Vad vi har gjort här är att skriva ett nytt annorlunda kommando som vi kallar annorlunda2 och det ser ut så här.

#annorlunda2 {background-color:#FF9900; font:Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:large;}

Som du ser har vi här lagt samma background-color men även sagt hur fonterna skall se ut och att vi vill ha lite större och vita bokstäver.

Vi var tvungna att använda ett annat namn på kommandot eftersom vi använder id eller # kommandot. Vill du använda samma effekt på flera ställen är du tvungen att använda class. Vilket vi tittar på här>>>>

Några exempel på olika färger och bakgrunder du kan använda i celler på en tabell.
här har vi använt <!--start för kod-->#annorlunda3 {background-color:#FFFFFF; font:Arial, Helvetica, sans-serif; color:#000000; font-size:large;}<!--slut för kod--> i css filen och id="annorlunda3" i td taggen	Här har vi använt <!--start för kod-->#annorlunda4 { background-color:#00FFFF; font:Arial, Helvetica, sans-serif; color:#000000; font-size:large;}<!--slut för kod--> i vår css fil och id="annorlunda4" i td taggen
Och i denna <!--start för kod-->#annorlunda5 { background-color:#CCCCCC; font:Arial, Helvetica, sans-serif; color:#000000; font-size:large;}<!--slut för kod--> i vår css fil samt id="annorlunda5" i vår td tagg till denna cellen.	här har vi använt <!--start för kod-->#annorlunda6 { background-color:#FFFF00; font:Arial, Helvetica, sans-serif; color:#000000; font-size:large;}<!--slut för kod--> i css filen och id="annorlunda6" i td taggen
Här har vi använt <!--start för kod-->#annorlunda7 { background-color:#000000; font:Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:large;}<!--slut för kod--> i vår css fil och id="annorlunda7" i td taggen	Och i denna <!--start för kod-->#annorlunda8 { background-color:#CCFFCC; font:Arial, Helvetica, sans-serif; color:#000000; font-size:large;}<!--slut för kod--> i vår css fil samt id="annorlunda8" i vår td tagg till denna cellen.
Vi kan även använda bilder i class eller id kommandot
och detta ser då ut så här <!--start för kod-->#annorlunda9 {background-color:#FFFFFF; background-image:url(http://www.webbgbg.se/webbdesign/blue/52-sml.jpg); font:Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:large;}<!--slut för kod--> i css filen samt en id="annorlunda9" i td taggen. TD taggen ser allstå ut så här i början på cellen: <td id="annorlunda9">och här kommer innehåll för att sedan avsluta taggen</td>	Här har vi lagt en mörkare bakgrundsbild och därför får vi använda en ljusare text <!--start för kod-->#annorlunda10 {background-color:#FF9900; background-image:url(http://www.webbgbg.se/webbdesign/blue/bakgrundsbild.jpg); background-repeat:no-repeat; font:Arial, Helvetica, sans-serif; color:#FFFFFF; }<!--slut för kod--> plus en id="annorlunda10" i td taggen. Lägg märke till kommandot "background-repeat: no-repeat" vilket säger att bilden inte skall repeteras i sid eller höjdled utan bara visas som den är.
Om vi använder en bild och repeterar denna med en lite annorlunda bakgrund får man denna effekt <!--start för kod-->#annorlunda11 {background-color:#FFFFFF; background-image:url(http://www.webbgbg.se/webbdesign/blue/rund.gif); font:Arial, Helvetica, sans-serif; color:#000000; font-size:large }<!--slut för kod-->	Här har vi förstorat bilden 10 gånger. Som du ser är bakgrunden vit och bilden blå vilket kan ge många fina effekter på en sida.
användbara länkar där du kan läsa mer
cssdrive.com tips på stylesheets med exempel på slutliga resultatet	cssimport.com En sida som ger inspiration	cssmania.com Likadant här
alistapart.com Här hittar du mycket att sätta händerna i	codeproject.com har många sidor med stylesheets och exempel.