Jak już wcześniej wspominałem na wstępie tego działu, praktycznie każdemu znacznikowi HTML można przypisać atrybut style, któremu można a nawet trzeba przypisać pewną wartość. Tą wartością są style zmieniające sposób, w jaki sam znacznik lub zawartość znacznika jest wyświetlana. Oto przykładowy kod:
<p style="margin: 10px;background: #bbbbbb;">Jakiś tam tekst</p>
W powyższym kodzie:
margin: 10px;
oznacza ustawienie marginesu znacznika <p> (akapitu)) na 10px z każdej strony (lewa, prawa, dolna i górna). Druga część:
background: #bbbbbb;
ustawia kolor tła w tym przypadku w formacie szesnastkowym jako trzy pary liczb szesnastkowych składających się na składowe koloru: #bbbbbb.
Tego typu formatowania powinno się używać jak najrzadziej i tylko w wyjątkowych sytuacjach, gdy wiadomo, że bardzo rzadko kiedy tego typu formatowanie będzie używane na stronie/podstronach.
Koniec końców wynik działania powyższego kodu będzie następujący:
Jakiś tam tekst
Style globalne
Na danej stronie znacznik <p> będzie wykorzystywany prawdopodobnie wielokrotnie, w związku z czym kod:
style="margin: 10px;background: #bbbbbb;"
trzeba będzie powielać wielokrotnie, za każdym razem, gdy użyty zostanie znacznik <p>. Gdyby istniał tylko jakiś przebiegły (żeby nie powiedzieć sprytny) sposób na uporanie się z tym problemem. Na szczęście, taki przebiegły (żeby nie powiedzieć: sprytny) sposób istnieje. Otóż tak się bowiem składa, że można wstawić style oddzielnie w nagłówku strony wewnątrz specjalnie do tego celu przeznaczonego znacznika <style>. Oto przykład dla HTML-5:
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="Description" content="opis strony" />
<meta name="Keywords" content="klucz1, klucz2, klucz3" />
<meta http-equiv="Content-Language" content="pl" />
<meta name="Author" content="autora nazwisko i imię" />
<link rel="Shortcut icon" href="adres ikony" />
<style>
p{ /* p - jest selektorem (nazwą) znacznika akapitu użytą by określić dla jakich elementów będą przypisane style wymienione pomiędzy klamrami {} */
margin: 10px;
background: #bbbbbb;
}
</style>
</head>
<body>
<!-- tutaj wstawiana będzie zawartość strony -->
</body>
</html>
W ten sposób, dla wszystkich akapitów na danej stronie zostaną ustawione wymienione w kodzie style wyświetlania.
Zewnętrzne style CSS
Globalne style są fajne, ale co jeżeli ja mam np. 100 podstron! I teraz dla każdej z nich muszę te wszystkie style umieścić w nagłówku, jeżeli chcę, aby one działały? Otóż nie, albowiem poszedł ktoś po rozum do głowy i wymyślił, że można by te style przechowywać oddzielnie w innym pliku i je ładować tylko na każdej z tych stron w nagłówku w taki oto sprytny sposób (dla HTML-5):
