W miarę tworzenia strony www pojawia się na niej coraz więcej elementów. Taki dokument będzie zawierał powtarzające się znaczniki takie jak elementy blokowe – div, nagłówki, akapity.
Każdy z tych elementów będzie miał wspólny wygląd zdefiniowany w pliku CSS. Zatem co zrobić w sytuacji, gdy zajdzie potrzeba zastosowania odrębnego stylu dla określonego znacznika? W takim przypadku poszczególnym elementom możemy nadać atrybuty.
Atrybuty możemy zdefiniować lokalnie, czyli bezpośrednio w dokumencie HTML lub w pliku zewnętrznym. Zalecam tę drugą metodę, gdyż oddzielenie struktury strony od jej wyglądu uporządkuje i ułatwi pracę nad stroną.
Styl lokalny
W pierwszym przykładzie przygotujemy formatowanie lokalnie.
<p style="padding: 10px; background-color: blue; color: white;">Styl dla akapitu
zdefiniowany lokalnie.</p>Przykład
Styl dla akapitu zdefiniowany lokalnie.
Styl z pliku zewnętrznego
Teraz ten sam efekt przygotujemy w pliku zewnętrznym. Wcześniej, aby plik CSS wiedział do którego akapitu ma zastosować formatowanie nadamy akapitowi klasę atrybut.
W pliku HTML umieścimy następujący zapis:
<p class="atrybut">Styl dla akapitu z zewnętrznego pliku CSS.</p>W pliku CSS przygotujemy deklarację definiującą wygląd naszego akapitu.
p.atrybut { padding: 10px; background-color: blue; color: white; }W rezultacie otrzymamy efekt taki jak w przypadku stylu lokalnego.
Przykład
Styl dla akapitu z zewnętrznego pliku CSS.