div#inicjal1 {font-size:5em; font-weight:bold; font-family:Georgia; color:#003366; float:left; background:#DEFFFF; padding: 0 10px 3px 10px;} Podany kod inicjału wraz z opisem każdej deklaracji znajduje się w oryginalnym listingu, dostępnym po wybraniu w górnym pasku przeglądarki opcji: Widok/Żródło strony.
Arkusz stylów składa się z jednej lub większej ilości reguł opisujących sposób prezentacji elementów strony. W skład każdej reguły wchodzą dwie podstawowe części selektor i blok deklaracji.
selektor { deklaracja; deklaracja; }
Każda deklaracja składa sie z połączenia właściwości CSS i jej wartości. Selektor wskazuje do których części dokumentu zostanie zastosowana reguła.
Style CSS umożliwiają wcięcie każdego nowego akapitu dzięki deklaracji text-indent:3%;. Możliwe jest określanie wielkości wcięcia w pikselach px. Przy zbyt gęstym tekście zwiększenie odstępu między jego wyrazami jest możliwe w wyniku stosowania deklaracji word-spacing: 1px; gdzie wartość 1px określa zwiększenie dotychczasowej odległości o 1px. Dopuszcza się stosowanie jednostki punkt pt. Kolor tła zrealizowano deklaracją background:#FFFFCC; .
Możliwe jest także zwiększenie odstępu pomiędzy wierszami tekstu deklaracją line-heigh:120%; gdzie wartość 120% odpowiada wysokości stosowanej w tekście czcionki. Prezentowane trzy możliwości zastosowane w tych dwóch akapitach nie są dostępne w żadnej wersji HTML a zrealizowano je z pomocą selektora div#blok2.
Wstawienie pionowej linii w HTML-u można było wykonać z pomocą programu graficznego podobnie jak kiedyś realizowano inicjał lub zdefiniować dwukolumnową tabelę i wybrać kolor tła lewej kolumny. Stosując CSS wystarczy podanie deklaracji parametrów takich jak kolor borderu, szerokość lewego boku ramy 10px, margines 25px od lewej krawędzi strony i padding 20px określający odległość do lewej krawędzi tekstu. W tym akapicie zastosowano wyrównanie tekstu deklaracją text-align:justify;, stąd równość obu krawędzi tekstu. Realizację tego bloku tekstu wykonano używając selektora div#paspion3.
Pisząc teksty zawierające wzory matematyczne, fizyczne itp. możemy skorzystać z tzw. "pseudoelementów" stosując selektor p.wzór:first-letter {font-size:1.5em; font-weight:normal; margin-left:300px;} w celu uzyskania dużej litery symbolizującej wzór przebytej drogi. Jako mnożnik zastosowano znak specjalny × podniesiony nieco wyżej i mający inny kształt niż stosowana zwykle w tym celu mała litera x.
S = prędkość × czas
W tekstach prawnych znak paragrafu § uzyskujemy pisząc encje znaku §, a w artykułach kodeksu cywilnego art.3853 indeks górny tworzymy w kodzie źródłowym, tj. w sekcji BODY, z pomocą znaczników <sup>3</sup>. Można także stosować encje ³ co daje art.385ł. Kolor tła uzyskany deklaracją background:#CCFFCC; jest uzupełniany deklaracjami; padding: G P D L; pozycjonującą tekst na tle i margin: G 0 D 0; ustalającą marginesy G=20px i D=30px tj. odległości tła od górnego i dolnego tekstu. W tym tekście zastosowano deklaracje line-height:160%; zwiększającą odstęp wierszy ponieważ indeks górny w art.385 znacznie zwiększył odstęp w tym wierszu, co psuło wygląd tekstu. Wszystkie deklaracje znajdują się w selektorze div#blok5 .
Przy okazji zwracam uwagę na kolor czcionki. Czerń typu #000000 jest dobra do nagłówków i krótkich tekstów. Stosowana w długich tekstach męczy wzrok stąd tekst na tej stronie ma różne odcienie. Kolor czcionki powinien harmonizować z dominującym kolorem strony lub tła i ten szczegół może być także przedmiotem licznych eksperymentów. Duża litera P jest realizowana selektorem p.znak-pierwszy:first-letter. Takie obramowanie nadaje się do podsumowania tekstu strony a zostało wykonane z pomocą selektora div#rama11 .