Till höger ser du vad du ska göra i den här uppgiften. Klicka på bilden om du vill se den större. Det gäller att utforma ett antal klasser (precis som i förra uppgiften) som du sedan tilldelar några div-behållare och p för att efterlikna utseendet till höger så mycket som möjligt. Du behöver en klass för den yttre behållaren, med en spaltbredd och bakgrundsfärg (vill du ha den tonad måste du göra en tonad bakgrundsbild och lägga in). Sen behöver du en klass för de mindre rutorna med avvikande bakgrundsfärg. Slutligen behöver du några klasser för texten, där du anger storlek, färg osv för varje del av texten.
Allt man lägger in på en hemsida är fyrkantigt. Man brukar säga att allting på en hemsida är boxar. Ett stycke text är en box, en bild är en box, en div med en spaltbredd är en box, osv. Till varje box kan man ge flera egenskaper i css-koden, t ex kantlinje, padding (fyllning innanför kantlinjen), margin (marginal utanför kantlinjen), bakgrundsfärg, m fl. Nedanstående bild ger dig en idé om var de olika måtten hamnar i en box.
När du skriver in ett mått på padding i css-koden hamnar det avståndet mellan innehållet (text, bild eller annat) och en eventuell kantlinje. Margin hamnar utanför kantlinjen, och blir alltså ett avstånd till andra objekt på sidan, eller till någon av själva sidans kanter. Om du lägger en bakgrundsfärg i en box kommer den att täcka samma yta som innehåll + padding. Marginalen är ofärgad.
