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).
W pojedynczym dokumencie (X)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.
A teraz kilka słów o tym, jak napisać taki zewnętrzny arkusz stylów. Wystarczy do tego 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!
Listing
(...)
<link rel="Stylesheet" type="text/css" href="style.css" />
(...)
</head>