Przystępując do pracy nad układem witryny należy od samego początku zadbać o ustalenie celu oraz o organizację pracy. Pierwsza decyzja dotyczy generacji przeglądarek, dla jakich będzie przeznaczona witryna. Najłatwiejszym wyjściem jest tworzenie witryny przeznaczonej dla najnowszych przeglądarek, która w starszych przeglądarkach jest po prostu czytelna. Efekt ten osiągniemy importując style instrukcją @import.
Ponieważ nawet najnowsze przeglądarki nie są w stu procentach zgodne pod względem interpretacji stylów, zatem pracując nad układem witryny na bieżąco badamy jej wygląd w czterech najnowszych przeglądarkach. W przypadku kłopotów, modyfikujemy tło elementów powodujących problemy i badamy ich rozmiar oraz położenie. Jest to technika pracy, która w rozsądnym tempie prowadzi wykonania zamierzonego układu.
| lp. | Atrybut | Znaczenie | Uwagi |
|---|---|---|---|
| 1. | margin | Wielkość marginesu | Może być stosowany w odniesieniu do krawędzi lewej, prawej, górnej i dolnej. |
| 2. | border | Obramowanie | Może być stosowany w odniesieniu do krawędzi lewej, prawej, górnej i dolnej. |
| 3. | padding | Otaczanie | Może być stosowany w odniesieniu do krawędzi lewej, prawej, górnej i dolnej. |
| 4. | width | Szerokość elementu | Podana liczba dotyczy wyłącznie zawartości elementu. Nie uwzględnia marginesów, obramowania i otaczania. |
| 5. | min-width | Minimalna szerokość | Nie interpretowany przez IE. |
| 6. | max-width | Maksymalna szerokość | Nie interpretowany przez IE. |
| 7. | height | Wysokość | Inaczej interpretowana przez IE niż przez inne przeglądarki. |
| 8. | min-height | Minimalna wysokość | Nie interpretowany przez IE. |
| 9. | max-height | Maksymalna wysokość | Nie interpretowany przez IE. |
| 10. | vertical-align | Wyrównanie pionowe zawartości | |
| 11. | z-index | Kolejność warstw | |
| 12. | visibility | Widoczność | Element generuje pudełko, ale pudełko nie jest widoczne. |
| 13. | display | Widoczność i sposób wyświetlania elementu. | Ustalamy typ elementu (blokowy lub tekstowy) oraz ewentualnie jego widoczność. Element niewyświetlany nie generuje pudełka. |
| 14. | top | Położenie elementu: krawędź górna | |
| 15. | right | Położenie elementu: krawędź prawa | |
| 16. | bottom | Położenie elementu: krawędź dolna | |
| 17. | left | Położenie elementu: krawędź lewa | |
| 18. | position | Sposób wyznaczania położenia elementu | |
| 19. | float | Przesunięcie do lewej lub prawej krawędzi. | |
| 20. | clear | Umieszczenie pod elementami przesuniętymi do tej samej krawędzi | |
| 21. | overflow | Przycinanie zawartości do nadrzędnego pudełka | |
| 22. | clip | Prostokąt, do jakiego zawartość jest przycinana |
Tabela 1. Atrybuty CSS dotyczące pudełek
