CSS/Umieszczanie stylów w dokumencie

Arkusz stylów CSS może być osadzony na trzy sposoby: jako arkusz zewnętrzny, zagnieżdżony oraz 'inline'. Najlepszą metodą z punktu widzenia przejrzystości kodu jest podpięcia arkusza zewnętrznego, pozostałe sposoby są najbardziej przydatne na etapie projektowania strony.

Metoda 'inline'

Polega na bezpośrednim przypisaniu stylu do elementu (X)HTML poprzez atrybut style

<p style="color:blue;">Akapit na niebiesko</p>

Metoda raczej niezalecana, gdyż powoduje wymieszanie w kodzie strony treści i wyglądu w sposób niewiele różniący się od starych metod. Należy stosować wyłącznie wtedy, gdy poniższe sposoby okażą się niewystarczające bądź niedostępne.

Arkusz zagnieżdżony

Jest to arkusz umieszczony wewnątrz znacznika style w części nagłówkowej strony (wewnątrz znacznika <head>).

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
  <head>
   <title>Przykład działania CSS</title>
   <style type="text/css">                 <!-- początek stylu zagnieżdżonego... -->
    p {
     font-weight:bold;
    }
   </style>                                <!-- ...a tu jego koniec -->
  </head>
  <body>
   <p>Paragraf pogrubiony przez arkusz zagnieżdżony.</p>
  </body>
 </html>

Arkusz ten definiuje style dla elementów w całym dokumencie.

Arkusz zewnętrzny

Najbardziej zalecany. Polega na umieszczeniu definicji stylów w oddzielnym pliku o rozszerzeniu .css, a w dokumencie go używającym umieszczeniu instrukcji importującej w części nagłówkowej strony.

W HTML arkusz zewnętrzny jest dołączany przez element <link>. Posiada on trzy atrybuty: rel informuje przeglądarkę o rodzaju linkowanego zasobu, type wskazuje rodzaj arkusza stylu. Atrybut href zawiera adres URL arkusza.

<head>
  <title>Przykład działania CSS</title>
  <link rel="stylesheet" type="text/css" href="styl.css" />
</head>

Innym, nowszym sposobem jest skorzystanie z dyrektywy @import w zagnieżdżonym arkuszu:

<style type="text/css">
 	@import url('styl.css');
 	/* pozostałe atrybuty */
</style>

Zaletą takiego rozwiązania jest kompletne oddzielenie kodu zawartości od wyglądu. Ponadto przypisanie jednego arkusza do wielu dokumentów oznacza łatwiejszą kontrolę nad wyglądem całości serwisu. Wystarczy zmodyfikować jeden plik .css a znajdzie to odbicie we wszystkich dokumentach w których jest dołączony.

Kaskadowość


    
edytuj

Ze sposobem umieszczania stylów wiąże się pojęcie kaskadowości. Definiuje ona hierarchię źródeł stylów. 
Kaskadowość określa, iż w pierwszej kolejności brane są pod uwagę style pochodzące z arkusza zewnętrznego. Te z kolei mogą zostać nadpisane przez style zdefiniowane w arkuszu zagnieżdżonym. Style zdefiniowane 'inline' znajdują się na końcu tego "łańcuszka" jako znajdujące się najbliżej opisywanego elementu strony.