Zewnętrzny arkusz stylów
<head> (...) <link rel="Stylesheet" href="/style.css"> (...) </head>
Możliwość wstawiania zewnętrznego arkusza jest chyba jedną z największych zalet stosowania stylów. Pozwala nam to zdefiniować takie samo formatowanie określonych elementów na wielu stronach jednocześnie. Dzięki temu, za pomocą tego jednego arkusza, wszystkie nasze strony w obrębie całego serwisu mogą mieć pewne wspólne cechy. Dodatkowo jeśli w ostatniej chwili zdecydujemy się zmienić np. rodzaj czcionki na wszystkich stronach, możemy to zrobić, modyfikując jedynie zewnętrzny arkusz stylów, bez konieczności zmiany każdej strony osobno. Pozwala to zaoszczędzić mnóstwo czasu (zwłaszcza niezdecydowanym ;-)
Wstawienie takiego zewnętrznego arkusza stylów jest bardzo proste. Wystarczy wpisać w treści nagłówkowej każdego z dokumentów (pomiędzy znacznikami <head> a </head>), przedstawioną powyżej linijkę. Deklaracje stylów zawarte w zewnętrznym arkuszu, zostaną automatycznie przeniesione do podanej strony (podczas jej wyświetlania). Wszystkie podstrony serwisu z osadzonym w swoim nagłówku takim poleceniem, uzyskają wygląd, określony w załączonym arkuszu stylów.
W pojedynczym dokumencie HTML można dołączyć dowolną liczbę zewnętrznych arkuszy stylów - każdy jako osobny element <link rel="Stylesheet">. W przypadku konfliktów, ważniejsze będą deklaracje z arkusza dołączonego później. Zwykle tworzy się pojedynczy zewnętrzny arkusz i załącza go w całym serwisie, czyli na wszystkich podstronach. Czasami jednak dodatkowo poza nim projektuje się osobne arkusze, ustalające wygląd np. odrębnych kategorii tematycznych serwisu. Mamy wtedy sytuację, gdy na stronie głównej jest dołączony tylko jeden arkusz stylów, a na podstronach kategorii tematycznych - po dwa.
A teraz kilka słów o tym, jak napisać taki zewnętrzny arkusz stylów. Jest on po prostu zwykłym plikiem tekstowym. Aby go utworzyć, wystarczy zwykły edytor tekstu, w którym piszemy takie same deklaracje stylów selektor { cecha: wartość }, jak w przypadku wewnętrznego arkusza stylów. Oczywiście można się posłużyć specjalnym edytorem CSS. Należy jedynie pamiętać, że plik będący zewnętrznym arkuszem stylów musi mieć rozszerzenie *.css!
Wstawienie białych znaków (spacje, tabulacje, znaki nowej linii) w arkuszu CSS nie ma wpływu na jego działanie. Dlatego możesz ułożyć wpisywane reguły CSS w taki sposób, aby były bardziej czytelne.
Znacznik LINK może znajdować się tylko i wyłącznie w nagłówku dokumentu.
W MSIE 8.0 i starszych można osadzić tylko 31 zewnętrznych arkuszy CSS - deklaracje z następnych plików zostaną pominięte!
PRZYKŁAD:
A oto przykładowy zewnętrzny arkusz stylów:
/* SELEKTORY: */
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #003868;
background-color: #80B8E8;
margin: 6mm;
}
p {
text-align: justify;
}
pre, code {
font-size: 8pt;
}