Zewnętrzne arkusze stylów

Dotychczasowe arkusze stylów znajdowały się w dokumencie HTML. Witryna jednakże składa się z wielu stron i dobrze byłoby zdefiniować style dla całej witryny w jednym pliku. Pozwala to na łatwą kontrolę wyglądu witryny, ponieważ chcąc dokonać pewnych zmian, robimy to jedynie w jednym pliku a nie we poszczególnych wszystkich plikach HTML. Nie stanowi to problemu jeśli witryna liczy 10 stron, ale może się to okazać problematyczne i nnardzo czasochłonne jeśli mamy 1000 czy 10000 stron.

Plik arkusz styłów CSS ma rozrzerzenie .css. Wszystkie nasze style możemy umieścić w pliku o nazwie np.: style.css. Będzie on niezależnym plikiem określającym nasze wszystkie style.

Może on wyglądać następująco:

html, body {line-height: 1}

hr {display: none}
blockquote:before, blockquote:after, q:before, q:after {content: ”}
blockquote, q {quotes: “” “”}

ul {list-style-type: none}

ol {list-style-type: decimal}
.clear {clear: both}

/*
Layout CSS Information
*/

body {
background: #fff;
text-align: justify;
}
#container {
width: 1000px;
background: #fff;
margin-right: auto;
margin-left: auto;
text-align: left;
}
/*
Very Top Bar
*/
#top {
width: 1000px;
background: #c5effe;
border-bottom: 3px solid #e0f5fc;
height: 24px;
}
#pagemenu {
float: left;
height: 24px;
display: inline;
background: #fff;
z-index: 20;
}
#pagemenu li {
float: left;
display: block;
height: 24px;
}
.extra {
text-align: center;}

Plik CSS możemy podłączy do dowolnej strony naszej witryny. Do tego celu używamy następującej składnii:

<link rel=”stylesheet” href=”style.css” type=”text/css” media=”screen”>

Powyższy kod mówi przeglądarkom, że arkuszem stylów jest plik o nazwie ‘style.css’. Jest typem tekstu zwykłego. Style zoptymalizowane są na odpowiedni typ mediów, w tym wypadku monitor.