1. Första boxen:
Vi gör en första box som är 200 pixlar bred och 150 pixlar hög. Den har alltså ett bestämt område som texten vi skriver inom exempelvis html-koden p kommer att hålla sig inom.
<style type=”text/css”>
<!–
.box { background-color: #cccccc; height: 150px; width: 200px; padding: 4px; border: 2px solid #004080; }
–>
</style>
I HTML-koden skriver du sedan:
<p>Du definierar..</p>
Med padding menas det med hur långt ifrån/hur nära texten får komma kanten av boxen.
2. En box med rullningslist:
Varför inte lägga till en rullningslist till boxen också?
Du definierar ett område eller en box på exempelvis 200 pixlar i bredd och 150 pixlar i höjd. I detta område kan du sedan lägga det flesta HTML-objekt och du kan lägga in bakgrundsfärg, bakgrundsbilder och göra andra formatteringar av texten. En box är med andra ord ett område med text, bilder eller annan information på ett begränsat område.
<!–
.box2 { height: 70px; width: 200px; padding: 4 px; background-color: #cccccc; border: 1px solid #000000; overflow: auto; }
–>
</style>
Och i HTML-koden ser det ut så här:
<p>Du definierar..</p>
Jag minskade höjden till 70 pixlar, så att all text inte fick plats inom boxen.
Sedan angav jag också overflow: auto och så skapades en rullningslist.