DEKLARACJA

Dokument to zbiór informacji dla przeglądarki rozpoczynający się deklaracją o korzystaniu z określonej wersji języka XHTML w celu prawidłowego wyświetlania strony. Przed deklaracją nie umieszczamy żadnych znaków nawet pojedyńczych liter ani prologu nazywanego również deklaracją XML gdyż ten zakłóca pracę IE6/Windows. Z trzech typów deklaracji; Frameset dla miłośników ramek, Transitional tolerującej przestarzałe konstrukcje HTML-u, tu będzie stosowany typ Strict najbardziej restrykcyjny. Jego przykładowa deklaracja zamieszczona w dwóch wierszach informuje o stosowaniu języka XHTML 1.0 Strict. Po DOCTYPE pojawia się w ostatnim wierszu znacznik html oraz deklaracja przestrzeni nazw określająca na końcu język dokumentu; 

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   <html xmlns="http://www.3org/1999/xhtml" xml:lang="pl" lang="pl">

HEAD

Sekcja head (ang.head = głowa) czołówka, nagłówek, to kolejny człon dokumentu sygnalizowany obowiązkowym znacznikiem <head>, zawiera kolejne informacje dla przeglądarki niewidoczne na ekranie. Wymagane jest podanie tytułu strony w znacznikach   <title> ... </title>   oraz typu kodowania znaków w Content-Type zamiast sprawiającego problemy prologu, co wygląda jak niżej; 

   <head>
   <title> Nazwa strony </title>	
   <meta http-equiv="Content-type" CONTENT="text/html; charset=UTF-8" />

Pozostałe znaczniki meta name ... to nieobowiązkowe informacje dla wyszukiwarek w celu umieszczenia ich w bazie danych na znaczącej pozycji. Można je obejrzeć w oryginalnym listigu tej strony. W miejsce charset=UTF-8" /> jest stosowany charset=iso-8859-2" /> tzw. Latin-2 uwzględniający języki Europy Wschodniej. Ten pierwszy pozwala jednak na stosowanie znaków niewystępujących w kodzie ASCII co ma miejsce w wypadku budowy witryny międzynarodowej.

ARKUSZ STYLI ZEWNĘTRZNYCH  lub  DOŁĄCZONYCH

Nazywany także dołączonym powoduje podniesienie prędkości działania strony. Style wspólne tj. jednakowe dla wszystkich stron witryny umieszczono w osobnym pliku tekstowym o nazwie bib09.css. Są tam style formatujące znaczniki: nagłówka z tytułem, menu, układu kolumn, tekstu i stopki znajdujące się w sekcji <body>. Poniższe polecenie <link rel= ... > łączy tą stronę z stylami arkusza w bib09.css. 

   <link rel="stylesheet" href="bib09.css" type="text/css">

ARKUSZ STYLI OSADZONYCH  lub  ZAGNIEŻDŻONYCH

Nazywany także zagnieżdżonym na stronie razem z kodem źródłowym. Jest on umieszczony między znacznikami w obowiązującym formacie podanym niżej i zwykle kończy się znacznikiem </head>. 

   <style type="text/css">
      ...      
   </style>
   </head>

Tutaj znajdują się style formatujące znaczniki przykładów umieszczonych na stronie w sekcji body. Ułatwia to orientację co wykonuje dany styl i jak oddziaływuje na prezentację kodu XHTML. Chcąc pobrać kod np. menu4 musimy odszukać odpowiadający mu styl CSS menu4 składający sie z kilku reguł w osadzonym arkuszu styli, a następnie niżej w sekcji BODY odszukać jego kod XHTML menu4. W Bibliotece arkusze styli osadzonych są zamieszczane wyłącznie w celu ułatwienia odszukania reguł CSS.   Znacznik </head> zamyka sekcje head, po której zaczyna się sekcja body.

BODY

Sekcja body (ang.body=ciało) ciało dokumentu, zawiera kod źródłowy strony tj. tekst i przykłady. W części witryny z przykładami wykorzystano 22 znaczniki języka HTML oraz 20 wartości z 18 atrybutami reguł CSS, formatujących zawartość poszczególnych fragmentów strony. W sekcji BODY stosuje się czasem style wewnętrzne.

STYLE WEWNĘTRZNE  lub  WPISANE

Nazywane także wpisane, bezpośrednie lub lokalne są umieszczane bezpośrednio w formatowanym znaczniku, stosowane naogół do elementów śródliniowych tj. paru słów w wierszu które powinny być wyróżnione inną czcionką jak w tytule powyżej, lub grubością i kolorem jak poniżej :
<span style="font-weight:bold; color:#AD0000;">słowo wyróżnione grubością i kolorem</span>
Znaczniki podane niżej kończą kod strony. 

   </body>
   </html>

Po tych znacznikach umieszcza się jedynie kod licznika osób odwiedzających stronę. Jest on dostępny pod adresem:   http://stat.4u.pl.   Jest to strona pierwszego w Polsce systemu statystyk, zrealizowana bardzo prosto i elegancko w oparciu o tabele z udziałem wewnętrznego arkusza CSS w celu nawigacji.

KASKADOWOŚĆ i SPECYFICZNOŚĆ  lub  SZCZEGÓŁOWOŚĆ

Kaskadowość rozwiązuje konflikty między stosowaniem selektorów zawartych w poszczególnych arkuszach stylów. Najważniejszy jest styl wewnętrzny, potem styl osadzony a na samym końcu styl zewnętrzny. Zawsze wygrywa styl najbliższy elementowi w znacznikach XHTML
Specyficzność lub szczegółowość rozwiązuje konflikty między selektorami. Najważniejsza jest reguła podana w atrybucie style czyli reguła wpisana w znacznik XHTML. Potem jest selektor identyfikatora, następnie selektor klasy i dalej selektor elementu. Na końcu jest selektor uniwersalny. Bardziej specyficzny od selektora identyfikatora jest selektor potomny np. #nagłowek h1 {font-size:24px; color:red;}. Specyficzność kumuluje się w selektorach potomnych, stąd w celu uniknięcia konfliktów należy je często stosować.

DOKUMENT

Dokument to zbiór informacji dla przeglądarki w skład którego wchodzą; Deklaracja z sekcją HTML w której znajdują się sekcje Head i Body. Całość przedstawiono ponizej: 

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   <html xmlns="http://www.3org/1999/xhtml" xml:lang="pl" lang="pl">
   <head>
   <title> Nazwa strony </title>	
   <meta http-equiv="Content-type" CONTENT="text/html; charset=UTF-8" />	
   <link rel="stylesheet" href="bib09.css" type="text/css">
   <style type="text/css">
      ...      
   </style>
   </head>
   <body>
	Tutaj znajduje się kod XHTML z przykładami oraz tekst strony.  
   </body>
   </html>

Podany wyżej kod najlepiej skopiować z pierwszych wierszy tej strony i wkleić do swego edytora. Niektórzy twierdzą że można o nim potem zapomnieć gdyż jest to zbędna teoria. Czasami jednak w czasie pracy nad stroną może dojść do uszkodzenia kodu w wyniku usunięcia lub wpisania jednego niepożądanego znaku co może wywołać różne nieprzewidziane i zaskakujące efekty. Wtedy należy przypomnieć sobie o tym kodzie nazywanym także szablonem strony XHTML i zbadać jego poprawność.

SŁOWNIK

Określenia anglojęzyczne i ich odpowiedniki stosowane przez różnych tłumaczy i autorów opisujących CSS, głównie E.A.Meyera.

Arkusze stylów CSS
external - zewnętrzne, dołączone, umieszczone w osobnym pliku z rozszerzeniem .css  typu  nazwa.css
embedded - osadzone, zagnieżdżone, umieszczone na stronie w sekcji  head  między <style type="text/css"> a </style>
inline - wewnętrzne, wpisane, lokalne, bezpośrednie, umieszczone w wierszu kodu XHTML
cascading - kaskadowość, waga arkusza stylów rozstrzygająca pierszeństwo w wyborze selektora
specificity - specyficzność, szczegółowość, waga selektora rozstrzygająca pierszeństwo w razie konfliktu
heirdom - dziedziczenie, przejmowanie pewnych wartości CSS np. kroju i wielkości czcionek od przodków np. body do elementów potomnych, czyli wszystkich tekstów na stronie.