Wiemy, że tekst dokumentu można podzielić na paragrafy i nagłówki. Wiemy też, że wartości domyślne elementów można dowlonie zmieniać. Teraz kolej na definicje, których nie ma w specyfikacji HTML.

Całość dokumentu możemy również podzielić na sekcje, które posiadają własne style. Sekcje te moga być wielkości jednej litery lub wielu zdań. W języku angielskim nazywane są ‘divisions’. Ich znacznikiem jest <div>…</div>. Są one "małymi podstronami" naszej strony lub kontenerami CSS, które są fundamentalnymi blokami naszego layoutu.

Kontenery CSS mogą mieć sprecyzowaną wysokość i szerokość. Ich tłem może być obraz. Domyślny margines kontenerów to wielkość elementu <body>, czyli całego dokumentu HTML. Jeśli nie określi się wysokości kontenera, bedzie się dopasowywał wysokością, żeby zmieścić tekst lub obraz, który w nim umieścimy.

Mozna również dodać padding, co pozwoli na oddalenie się od brzegów kontenera…

padding

Z właściwością padding należy uważać, ponieważ inaczej wygląda w Internet Explorer a inaczej w innych przeglądarkach.

Poza padding, można również dodać ramki…

borders

Ramki posiadaja wiele stylów. Można je definiować oddzielnie dla każdego boku…

border styles

Marginesy służą do oddzielenia od siebie poszczególnych kontenerów.

margins

Często myli się marginesy i padding. Margines określa pole wewnetrzne, natomiast padding zewnetrzne.

Pozycja absolutna

Kontenery CSS można ulokować w konkretnym miejscu strony za pomocą właściwości position: absolute;
Można to rozumieć podobnie jak lokalizację budynku – znajduje się 50m od ul. Kopernika i 100m od Kościuszki.

Typowa definicja wygląda nastepująco:

top:50px; left:100px

Pozycja relatywna

Zamiast powiedzenia, że budynek znajduje się 50m od ul. Kopernika i 100m od Kościuszki, można powiedzieć, że znajduje się on 5 metrów od twojego sklepu. Pozycja relatywna zakłada, że kontenery są umieszone koło siebie – jeden koło drugiego i jeden pod drugim.

Typowym syntaksem jest:

float: left; lub float: right;