Tematy: metody wstawiania stylów | styl lokalny | rozciąganie stylu | wydzielone bloki
zagnieżdżanie arkusza | zewnętrzny arkusz | import arkusza

Zewnętrzny arkusz stylów

Każdą stronę można dołączyć do zewnętrznego arkusza stylów, w którym są zdefiniowane własności różnych elementów - interpretują to polecenie Internet Explorer 4, Netscape 6 i Opera 5. Na przykład, strony są dołączane do zewnętrznego arkusza, pliku tekstowego o nazwie arkusz.css (rozszerzenie .css). Arkusz został zapisany następująco:

body {text-align: justify; margin-left: 1cm; margin-right: 1cm; margin-top: 1cm; }
p {font-family: Arial, Helvetica; font-size: 10pt; font-weight: normal; text-indent: 3 em; }
a, a:active, a:visited, a:hover {text-decoration: none; color: blue; }
h1 {font-size: 24pt; }
h2 {font-size: 20pt; }
h3 {font-size: 16pt; }
h1, h2, h3 {font-family: Arial, Helvetica; font-weight: bold; color: #808000; }
td {font-family: Arial, Helvetica; font-size: 10pt; font-weight: normal; }
li {font-family: Arial, Helvetica; font-size: 10pt; font-weight: normal; }

Uwaga: arkusz powinien zawierać wyłącznie same definicje stylów.


Aby dołączyć arkusz do strony, trzeba podać polecenie w ramach head:

<head>
<link rel="stylesheet" href="arkusz.css" type="text/css">
</head>

href wskazuje ścieżkę do katalogu, w którym jest umieszczony arkusz. Może on być, oczywiście, ulokowany w tym samym folderze, co strony zawierające odniesienie do niego. Wszystkie definicje zewnętrzego arkusza stylów są automatycznie przyjmowane przez elementy danej strony.

Stosowanie zewnętrznego arkusza ma tę zaletę, że nie jest konieczne wprowadzanie stylów na konkretnej stronie, zmniejszamy objętość plików, a także możemy za pomocą zmiany jednego parametru w arkuszu stylów zmienić wygląd wszystkich stron, które się odwołują do tego arkusza (np. kolor tytułu czy wielkość czcionki akapitów).