Element <span> umożliwia nadanie innego stylu (np. wyróżnienie ) swojej zawartości którą może stanowić nawet jeden znak. Aby sformatować tekst należy go oznaczyć znacznikiem <span> </span> i przypisać mu jakąś klasę, na przykład 'wyróżnienie':

<p>fragment niezaznaczony i <span class="wyróżnienie">fragment który jest zaznaczony</span>.</p>

Klasie 'wyróżnienie' możemy przypisywać różne cechy, np. kolor, podkreślenie itp.

Znacznikiem o podobnych funkcjach jest znacznik <div>. Jednak jego zawartość umieszczana jest w innym akapicie. Używa się go w celu nadania jednakowego wyglądu różnym grupom elementów.

Tworzenie:
1. W Notatniku zawierającym osadzony arkusz stylu należy otworzyć plik HTML, który ma być wspólnym arkuszem łączonym.
2. Należy usunąć kod strony zawierający się przed znacznikiem </style> (włącznie) oraz za znacznikiem kończącym </style> (włącznie) jak również znaczniki komentarza, które do tej pory otaczały definicje stylu.
3. Plik należy zapisać pod nową nazwą z rozszerzeniem nazwy pliku .css.

Przykładowo zdefiniowany arkusz stylów, mogący posłużyć jako szkic do różnych przekształceń:

<style type="text/css">
<!--

body { background-color: red; margin: 0 0 0 0 : padding: 0 0 0 0; }
p { font-family: Arial; font size: 12pt; color: green; }
h1 { font - family: Verdana, Arial, sans-serif; font-size: 12pt color: blue; }
h2 { font-family: Verdana, Arial, sans-serif; font-size: 20pt; color: blue; }
table { border: 3px solid black; padding: 3pt 3pt 3pt 3pt; }
th { background-color: #FFFCCC: color: black; }
.verdana { font-family: Verdana, Arial, sans-serif; }

-->
</STYLE>




1) Tło strony jest koloru czerwonego, brak marginesów dostosowuje stronę do podzielenia jej za pomocą tabeli.
2) Podstawowym rodzajem czcionki jest Arial w kolorze zielonym
3) Nagłówki pisane są czcionką Verdana, są w kolorze niebieskim; nagłówek pierwszy został napisany czcionką o rozmiarze wynoszącym 12 punktów drukarskich* , natomiast drugi 20 punktów drukarskich
4) Tabele o szerokości 3 pikseli posiadają czarne obramowanie, którego odległość od tekstu wynosi 3 punkty drukarskie
5) Tekst nagłówka (w kolorze czarnym) tabeli umieszczony jest na jasnożółtym tle
6) Zdefiniowana została klasa verdana co pozwala na używanie jej w dowolnym miejscu
7) Definicja umieszczona została w granicach znacznika komentarza, dzieki czemu będzie ona ignorowana przez przeglądarki nie obsługujących arkuszy CSS

* punkt drukarski to odcinek o długości około 1/72 cala, często stosowany do określenia rozmiaru czcionki

Aby obiektom jednego typu, w treści tej samej strony, móc przyporządkowywać inne właściwości stosowane są klasy.
Oto przykładowy sposób zastosowania:

<style type="text/css">
<!--
p.blue {
color: blue:
}
-->
</style>

Aby każdy element stał się niebieski należy zaznaczyć akapit, który ma być pokazany w danym kolorze. Polega to na wstawieniu atrybutu class do właściwego znacznika <p>
Na przykład:

<p class="blue">wyswietlony akapit jest niebieski</p>


Atrybut id dopuszcza narzucanie stylu pojedynczym wystąpieniom elementów dowolnego typu. Definiując style o danych nazwach:


<style type="text/css">
#id-nazwa1 {definicja_stylu }
#id-nazwa2 { definicja_stylu }
</style>

Możemy przyporządkowywać styl do elementu za pomocą atrybutu id znacznika HTML:

<li id="id-nazwa1">

Różniące się od siebie dwie definicje stylu o jednakowej nazwie (pierwsza odnosząca się do jednego elementu <h1>, druga do elementu innego typu) tworzy kod:

<style type="text/css">
#id-nazwa1 { definicja_stylu }
H1#id-nazwa { definicja_stylu }
</style>

Kaskadowe arkusze stylów ( Cascading Style Sheets - CSS ) to język służący do opisu formy prezentacji stron WWW. Pozwala twórcy na kreowanie swojej strony w dowolny sposób, poprzez wprowadzanie najdrobniejszych szczegółów do dokumentu. Wykorzystanie arkuszy stylów daje znacznie większe możliwości pozycjonowania elementów na stronie. CSS został stworzony w celu odseparowania struktury dokumentu od formy jego prezentacji. Kaskadowe arkusze stylów są obsługiwane przez większość przeglądarek WWW takich jak np. Internet Explorer, Mozilla Firefox, Opera. Wyróżniamy trzy odmiany arkuszy stylów : osadzone, łączone oraz wpisane.

Arkusz osadzony ma postać:


(style type="text/css")
(!- -
Znacznik { właściwość: wartość; }
- - >
(/style)


Pomiędzy znacznikami (style) i (/style) autor umieszcza listę znaczników HTML oraz właściwości arkusza. Wszystkie te właściwości musza być zamieszczone w nawiasach klamrowych {} , oddzielone średnikami. Kaskadowe arkusze stylów posiadaja bardzo szeroki zakres parametrow definiujących wyglad strony. Dotycza one miedzy innymi :

-czcionki ( np. wielkość, rodzaj, styl, rozciągnięcie, proporcje)
-tła (np. kolor, tło obrazkowe, pozycja, zaczepienie,)
-tekstów (np. kolor, dekoracja, wyrównanie, wcięcie, cień)
-marginesów
-obramowania (np. styl , szerokość, kolor )
-tabel
-filtrów ( np. cien, lustro, jastrzenie, maska, fala, światło)

Style CSS można pisać "ręcznie" ( ponieważ jest to zwykły tekst), ale można również użyć do tego specjalnego edytora. Stosowanie edytorów zarówno przyspiesza pracę jak i zmniejsza ryzyko popełnienia błędów.