Osadzanie arkuszy stylów na stronie

Istnieją dwa rodzaje osadzania stylów CSS w dokumencie internetowym czyli na stronie WWW. Kaskadowy arkusz stylów można umieścić albo wewnątrz konkretnego dokumentu, albo też dołączyć go do strony z osobnego pliku. Pierwsze rozwiązanie to tzw. style wewnętrzne – stosowane jest do prostych stron internetowych, z małą liczbą elementów których wygląd chcemy kształtować za pomocą CSSa. Natomiast drugie rozwiązanie – style zewnętrzne – jest rozwiązaniem dedykowanym do większych projektów.
Style wewnętrzne:
• Styl lokalny – umieszcza się go wewnątrz konkretnego znacznika formatowanego
elementu. Działanie stylu obejmuje tylko ten jeden, konkretny element.
<p style=”color:green; font-size:14px; font-variant: small-caps;”> Treść akapitu </p>
• Styl zagnieżdzony – umieszcza się go w nagłówku strony WWW. Swoim
działaniem obejmuje cały dokument, a nie tylko pojedyncze elementy.
<html> <head>

<style type=”text/css”> P
{
color:green; font-size:14px; font-variant: small-caps;
} </style>
</head>
<body> Treść strony
<p> Treść akapitu do którego odnosi się styl CSS </p> </body> </html>
• Styl zewnętrzny – umieszczany jest w zewnętrznym pliku o rozszerzeniu .css. Oczywiście plik ten powinien być  umieszczony w tym samym katalogu co projektowany dokument internetowy. W nagłówku strony WWW umieszczany jest odnośnik do arkusza CSS.
<html>
<head>
<link href=”arkusz.css” rel=”stylesheet” type=”text/css” >
</head>
<body> Treść strony
<p> Treść akapitu do którego odnosi się styl CSS </p> </body> </html>
Natomiast sam dokument .css jest zwykłym plikiem tekstowym, w którym zapisano reguły wyglądu (prezentacji) strony WWW. Ważne jest jednak aby miał on odpowiednie rozszerzenie, np. możemy nazywać go arkusz.css bądź style.css!