Kaskadowe arkusze stylów (Cascading style sheets)

Główne cechy:

wpływają na wygląd stron WWW, w szczególności na:

kolor tekstu i tła dowolnego elementu
obramowania wokół elementów oraz ilość wolnego miejsca wokół nich
wielkość i rodzaj używanej czcionki
sposób dekoracji tekstu - np. podkreślenie lub pogrubienie

ułatwiają powiązanie formy dokumentu ze strukturą logiczną
pozwalają na "centralizacje zarządzania wyglądem" dokumentu - informacja na temat wyglądu zawarta jest w użytym stylu, a nie "rozsiana" po dokumencie
dają możliwość szybkiego nadania jednolitego wyglądu wielu stronom

Do formatowania elementów przy użyciu stylów musimy nadać identyfikatory:

id - unikatowy (w dokumencie) identyfikator elementu - tylko jeden element o danym id może wystąpić na stronie
class - klasa elementu (w sensie CSS) - gdy chcemy kilka elementów sformatować w identyczny sposób

<p id="naglowek">
<p class="wazne">

lub umieścić definicję stylu bezpośrednio w znaczniku języka html:

<p style="color:red;">

Podstawowe rodzaje selektorów - przykłady
(style umieszczone w osobnym pliku, np. styl.css)

Selektor znacznika:

h1 { color: red; }

- nakazuje użyć koloru czerwonego do wszystkich nagłówków poziomu 1

{ background: grey; }

- definiuje kolor tła wszystkich akapitów jako szary

Selektor klasy:

.ważne { color: red; }

- nakazuje użyć koloru czerwonego do wszystkich elementów, których atrybut class ma wartość "ważne"

h1.wazne { color: red; }

- nakazuje użyć koloru czerwonego jedynie do nagłówków poziomu 1, których atrybut class ma wartość "ważne"

Selektor identyfikatora:

#opis { border: 2px; }

- poleca umieścić dowolny element, którego atrybut id ma wartość "wazne" w ramce o grubości 2 pikseli

p#opis { border: 2px; }

- nakazuje umieścić w ramce element o identyfikatorze "wazne", ale jedynie wówczas, gdy jest on akapitem

Umieszczanie stylów w dokumencie

1. Style zewnętrzne - w nagłówku umieszczamy odnośnik do pliku ze stylem

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
         "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
    <title>strona g3ówna</title>
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
	<meta name="language" content="PL">
	<meta name="keywords" content="szablon strony">
	<meta name="description" content="Strona Marty. Znajdziesz na niej fascynujace
		informacje o mnie, moich zaiteresowaniach i galerie ze zdjeciami zwierzaków.">
	<meta name="author" content="Marta (marta@marta.pl)">
  	<link rel="stylesheet" type="text/css" href="styl.css">
</head>
<body>
	<div id="frame">
		<div class="contentheader">
			<div>&nbsp;</div>
			</div>
		<div id="contentleft">
			<div>&nbsp;</div>
			</div>
		<div id="contentcenter">
			<div>&nbsp;</div>
			</div>
		</div>
</body>
</html>

A oto przykładowa zawartość pliku styl.css :

body {	
		text-align:center;
		background-color:#FFFFFF;
		}
	#frame {
		width:800px;
		margin-right:auto;
		margin-left:auto;
		text-align:left;
		}
	.contentheader {
		height: 175px;
		background-color:#009900;
		}
	#contentleft {
		width:175px;
		height: 625px;
		float:left;
		background-color:#FFFF00;
		}
	#contentcenter {
		width:625px;
		height: 625px;
		float:left;
		background-color:#FF0000;
		}
a:link	{color:#C5C5C8; text-decoration:none } 
a:visited {color:#C5C5C8; text-decoration:none}
a:hover	{color: #ECECEC; background: #15106A; text-decoration:none}

Widzimy, że do elementów oznaczonych odpowiednim "id" w pliku ze stylami odwołujemy się przez znak "#", a do elementów danej klasy przez znak kropki ".". Dla odwołania się do elementu całej strony, jak body, albo hiperłącza (pod warunkiem, że w obrębie całej strony mają być sformatowane identycznie, odwołujemy się po prostu praz wpisanie "body" lub a:link i odpowiednich stylów w nawiasach klamrowych

2. Style wewnętrzne - element nagłówka dokumentu

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
         "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
    <title>strona główna</title>
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
	<meta name="language" content="PL">
	<meta name="keywords" content="szablon strony">
	<meta name="description" content="Strona Marty. Znajdziesz na niej fascynujace
		informacje o mnie, moich zaiteresowaniach i galerie ze zdjeciami zwierzaków.">
	<meta name="author" content="Marta (marta@marta.pl)">
<style>
	body {	
		text-align:center;
		background-color:#FFFFFF;
		}
	#frame {
		width:800px;
		margin-right:auto;
		margin-left:auto;
		text-align:left;
		}
	#contentheader {
		height: 175px;
		background-color:#009900;
		}
	#contentleft {
		width:175px;
		height: 625px;
		float:left;
		background-color:#FFFF00;
		}
	#contentcenter {
		width:625px;
		height: 625px;
		float:left;
		background-color:#FF0000;
		}
	</style>
</head>
<body>
	<div id="frame">
		<div id="contentheader">
			<div>&nbsp;</div>
			</div>
		<div id="contentleft">
			<div>&nbsp;</div>
			</div>
		<div id="contentcenter">
			<div>&nbsp;</div>
			</div>
		</div>
</body>
</html>

3. Style zintegrowane - wartość atrybutu style umieszczamy bezpośrednio w znaczniku html, np:

<body style="background-image:url('tlo_01.jpg')">