Do formatowania elementów przy użyciu stylów musimy nadać identyfikatory:
<p id="naglowek"> <p class="wazne">
lub umieścić definicję stylu bezpośrednio w znaczniku języka html:
<p style="color:red;">
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
.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"
#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
<!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> </div> </div> <div id="contentleft"> <div> </div> </div> <div id="contentcenter"> <div> </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
<!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> </div> </div> <div id="contentleft"> <div> </div> </div> <div id="contentcenter"> <div> </div> </div> </div> </body> </html>
<body style="background-image:url('tlo_01.jpg')">