Jak tworzyć CSS

Jak wstawić tabelę stylów

Kiedy przeglądarka czyta tabelę stylów, formatuje dokument HTML na jej podstawie. Sposoby wstawiania tabeli stylów to trzy:

Zewnętrzna tabela stylów

Kiedy style muszą być zastosowane na wielu stronach, zewnętrzna tabela stylów jest idealnym wyborem. W przypadku użycia zewnętrznej tabeli stylów, możesz zmienić jeden plik, aby zmienić wygląd całej witryny. Każda strona używa znacznika <link> do połączenia się z tabelą stylów. Znacznik <link> znajduje się w nagłówku dokumentu (header):

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

Przeglądarka odczyta deklaracje stylów z pliku mystyle.css i sformatuje dokument na podstawie tego.

Zewnętrzne tabele stylów można edytować w dowolnym edytorze tekstowym. Plik nie może zawierać żadnych znaczników HTML. Tabela stylów powinna być zapisywana z rozszerzeniem .css. Oto przykład pliku tabeli stylów:

hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}

Nie zostawiaj pustych przestrzeni między wartością a jednostką. Jeśli używasz "margin-left: 20 px" zamiast "margin-left: 20px", działa to tylko w przeglądarce Internet Explorer 6, ale nie działa w Mozilla/Firefox lub Netscape.

Wewnętrzna tabela stylów

Kiedy pojedynczy dokument wymaga specjalnych stylów, powinieneś użyć wewnętrznej tabeli stylów. Możesz użyć znacznika <style> w nagłówku dokumentu, aby zdefiniować wewnętrzną tabelę stylów, tak jak tutaj:

<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>

Wewnętrzne style

Ponieważ łączy się wyświetlanie z treścią, wewnętrzne style tracą wiele zalet tabel stylów. Używaj tej metody ostrożnie, na przykład gdy styl ma być zastosowany tylko do jednego elementu.

Aby użyć wewnętrznego stylu, musisz użyć atrybutu (style) w odpowiednich znacznikach. Atrybut stylu może zawierać każdą właściwość CSS. W tym przykładzie pokazano, jak zmienić kolor akapitu i lewy margines zewnętrzny:

<p> style="color: sienna; margin-left: 20px">
This is a paragraph
</p>

Wielokrotne style

Jeśli niektóre atrybuty są zdefiniowane przez ten sam selektor w różnych arkuszach stylów, wartości atrybutów będą dziedziczone z bardziej specyficznego arkusza stylów.

Na przykład, zewnętrzny arkusz stylów ma trzy atrybuty dla selektora h3:

h3 {
  color: red;
  text-align: left;
  font-size: 8pt;
  }

Wewnętrzny arkusz stylów ma dwa atrybuty dla selektora h3:

h3 {
  text-align: right; 
  font-size: 20pt;
  }

Jeśli strona z wewnętrznym arkuszem stylów jest również połączone z zewnętrznym arkuszem stylów, styl h3 będzie wyglądał następująco:

color: red; 
text-align: right; 
font-size: 20pt;

Kolor atrybutu zostanie dziedziczony z zewnętrznego arkusza stylów, podczas gdy ustawienia wyważenia tekstu (text-alignment) i rozmiar czcionki (font-size) będą zastępowane przez reguły wewnętrznego arkusza stylów.