Minden elem, amit a HTML body tag-ben használunk egy téglalap alakú dobozba kerül a weboldalon. Persze ezt a téglalapot alap esetben nem látjuk, de attól még ott van, és a CSS segítségével mindenféle stílussal ruházhatjuk fel. Készítettem két ábrát, hogy megmutassam, hogyan is kell ezt az egészet elképzelni. Az első képen a doboz “robbantott ábrája” látható, míg a másodikon az, ahogyan a böngészőben végül is megjelenik.

A doboz következő tulajdonságait szabhatjuk testre:

• border: A doboz szegélye. Alapértelmezés szerint nem látszik. Megadhatjuk a vastagságát, a stílusát, a színét, stb.
• background: A doboz háttere. Megadhatunk egy színt és/vagy egy képet, továbbá beállíthatjuk, hogy a kép ismétlődjön-e, ha kisebb, mint a doboz.
• margin: A minimális távolság a doboz széle és a weboldal már elemei között.
• padding: A távolság a doboz széle és belső tartalma között.
• width: A doboz szélessége, padding és margin nélkül.
• height: A doboz magassága, padding és margin nélkül.

Ez pedig itt egy példa, ahol a következő CSS beállításokat alkalmaztam:

div {
    width: 500px;
    border-style: dashed;
    border-width: medium;
    background-color: #CFC;
    background-image: url(box-modell-bg.jpg);
    background-position: center;
    padding: 10px;
}

Persze szinte mindegyik felsorolt tulajdonságról lehetne akár egy külön posztot is írni, ugyanis a gyakorlatban sokszor meggyűlik az ember baja azzal, hogy ezen tulajdonságok beállítása nem a kívánt eredményt hozza. Ez lehet azért, mert a böngésző nem szabványos módon jeleníti meg a tartalmat – erre főleg az IE 6 és a korább verziók hajlamosak -, vagy azért, mert olyan HTML elemre akarjuk alkalmazni a beállítást, amelyre nem lehet. Érdemes sokat gyakorolni, de ajánlanék két remek forrást is a tanuláshoz, amelyeket én is használok. Az egyik egy weboldal, a másik egy könyv:

• www.w3schools.com
• Charles Wyke-Smith: Stylin with CSS

Persze lesz még a CSS alapokról szó ezen a blogon is. És persze kérdezzetek nyugodtan, mert ez csak a jéghegy csúcsa.