Budowa stylu

Pokażmy od razu przykład stylu, obejmującego wybrany fragment tekstu. Jest to jeden z dwóch sposobów wstawiania stylu in-line.

<P STYLE="font-size: 20pt; font-weight: bold; background: yellow; color: red">Style to doskonałe narzędzie dla autora witryny</P>.

Style to doskonałe narzędzie dla autora witryny

.

Ogólne polecenie stylu ma postać selektor { cecha: wartość } (w jęz. angielskim selector { property: value }). Selektorem jest po prostu polecenie języka, np. P, LI, TD, BODY itd. Cechą jest pewna własność danego znacznika, np. wielkość i styl czcionki dla akapitu. Wartość konkretyzuje cechę, np. 12pt czy bold dla czcionki. Zawartość nawiasów klamrowych, czyli cechę i wartość, określamy także mianem deklaracji stylu.

Przykłady:

P {font-family: Times}
Selektorem jest P, cechą - rodzina czcionek, wartością - Times.

To jest czcionka Times

H1 {font-size: 30pt}
Selektorem jest H1, cechą - wielkość czcionki, wartością - 30 punktów.

To jest 30-punktowy tytuł stopnia pierwszego

UL {font-weight: bold}
Selektorem jest UL, cechą - waga czcionki, wartością - pogrubienie. H2 {color: #FF0000}
Selektorem jest H2, cechą - kolor, wartością - kolor czerwony.

Czerwony tytuł stopnia drugiego

Możemy oczywiście łączyć ze sobą różne cechy i wartości, zgodnie ze schematem:

Selektor { cecha1: wartość1; cecha2: wartość2 }

Proszę zwrócić uwagę na średnik rozdzielający pary cech-wartości.

H3 {font-variant: small-caps; font-size: 15pt; color: yellow; font-family: Courier}

Tytuł stopnia trzeciego, 15-punktowy, żółty, kapitaliki


UWAGA:
Ze względu na fakt, że przeglądarki interpretują jedynie część stylów, a ponadto Navigator i Internet Explorer robią to niekiedy "po swojemu", zaleca się ostrożne wykorzystywane stylów. Należy uważnie sprawdzić zachowanie obu głównych przeglądarek, zanim poślemy naszą stronę na serwer, gdyż interpretacje są niekiedy odmienne i poprawnie skonstruowana strona może być bez kłopotu wyświetlana w jednej z nich, a całkowicie błędnie w drugiej - zaskakujące bywają niekiedy interakcje stylów.