Tematy: metody wstawiania stylów | styl lokalny | rozciąganie stylu | wydzielone bloki
zagnieźdżanie arkusza | zewnętrzny arkusz | import arkusza
Bardzo często spotykanym sposobem definiowania stylów na stronie jest zagnieżdżanie definicji w nagłówkowej części dokumentu. W tym celu wystarczy wpisać odpowiedni blok informacji między poleceniami <head> i </head>.
Przykładowo, niniejsza strona zawiera krótki zestaw stylów, zdefiniowany następująco w części nagłówkowej:
<head>
<style type="text/css">
<!--
body {margin-left: 1cm; margin-right: 1cm; }
p {font-size: 10pt; font-family: Arial, Helvetica; font-weight: normal; }
-->
</style>
</head>
Zdefiniowano w nim 1-centymetrowe marginesy strony oraz 10-punktową czcionkę Arial (oraz inne czcionki "rezerwowe") dla akapitów. Proszę zwrócić uwagę na wiersz <!-- i -->, czyli znaki komentarza obejmujące definicję. "Chowają" one definicję przed przeglądarkami nie interpretującymi stylów, co zapobiega niepotrzebnemu wyświetleniu treści definicji stylów w tych przeglądarkach.
Style definiujemy w "klasyczny" sposób, za pomocą zestawu Selektor { cecha: wartość}. Na przykład p {font-family: Helvetica} czy ul {font-size: 10pt; font-family: Times}.
Zagnieżdżanie arkusza zaleca się w przypadku tych stron, w których stosuje się unikatowe style. Gdy kilka stron jest formatowanych za pomocą tego samego zestawu stylów, lepiej jest oczywiście stosować dołączanie wspólnego, zewnętrznego arkusza stylów (opisujemy to tutaj), co skraca czas przygotowania i zmniejsza wielkość plików.