Tematy:
Pokażmy od razu przykład stylu, obejmującego wybrany fragment tekstu. Jest to jeden ze sposobów wstawiania tzw. stylu lokalnego.
Przykład 1
<p style="font-size: 20pt; font-weight: bold; background: darkseagreen; color: white; width: 75%; ">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 }).
Zawartość nawiasów klamrowych, czyli cechę i wartość, określamy także łącznie mianem deklaracji stylu.
Inne przykłady, ilustrujące użycie stylów definiowanych w części nagłówkowej dokumentu lub w zewnętrznym arkuszu stylów.
Przykład 2
p {font-family: Times New Roman}
Selektorem jest p, cechą - rodzina czcionek, wartością - Times New Roman.
To jest czcionka Times New Roman
Przykład 3
h1 {font-size: 30pt}
Selektorem jest h1, cechą - wielkość czcionki, wartością - 30 punktów.
Przykład 4
ul {font-weight: bold}
Selektorem jest ul, cechą - waga czcionki, wartością - pogrubienie.
Przykład 5
h2 {color: #FF0000}
Selektorem jest h2, cechą - kolor, wartością - kolor czerwony.
Przykład 6
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: green; font-family: Courier}
Jak widać, konstrukcja stylu jest prosta i nie powinna sprawiać kłopotów nawet początkującemu webmasterowi.
Ze względu na fakt, że przeglądarki interpretują ciągle nie wszystkie style, zaleca się uważne ich wykorzystywanie. Należy uważnie sprawdzić zachowanie 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 błędnie w innej - zaskakujące bywają niekiedy interakcje stylów.