Siła CSS leży nie tylko w możliwości dostarczania deklaracji z różnych źródeł, ale także w różnorodnych sposobach precyzyjnego określania konkretnych elementów w kodzie źródłowym dokumentu (X)HTML, którym będą przypisywane atrybuty formatowania, zmieniające ich wygląd. Umożliwiają to tzw. selektory. Ich wielość nie wynika ze złośliwości twórców języka CSS, którzy chcieli utrudnić Tobie drogi czytelniku naukę, ale z chęci dania większej swobody i elastyczności rozwiązań twórcom stron WWW podczas projektowania arkuszy CSS.

Reguły stylów

Atrybuty formatowania w języku CSS definiuje się za pomocą tzw. reguł stylów. Każda reguła odnosi się do konkretnego elementu (znacznika) i składa się z dwóch części: selektora i deklaracji. Selektor określa do jakich elementów ma zostać przypisane formatowanie, a deklaracja podaje to formatowanie i jest umieszczona w nawiasie klamrowym {...}. Każda deklaracja składa się przynajmniej z jednego zespołu cecha lub inaczej własność albo właściwość (ang. property) - wartość (ang. value), przy czym można podać dowolną liczbę, rozdzielając kolejne znakiem średnika (;). Średnik na końcu deklaracji nie jest konieczny.

Każda grupa elementów (znaczników) ma określony zespół cech CSS, które można jej przypisać, a każda cecha ma ściśle wyszczególnioną listę wartości, które może przyjąć. Na przykład: cecha text-align (wyrównanie tekstu) może być przypisana tylko i wyłącznie do elementów blokowych, ponieważ podanie jej dla elementów wyświetlanych w linii nie miałoby sensu. Z drugiej strony cecha ta może przyjmować tylko wartości takie jak: left, right, center, justify. Przypisanie do niej np. wartości koloru nie miałoby sensu.

Przykład:

/* Pierwsza reguła: */
p { color: red }
/* Druga reguła: */
p b { color: red; background-color: yellow }

Powyżej mamy przykład dwóch reguł stylów:

1. W pierwszej selektorem jest znacznik p, a deklaracja ma postać { color: red }. Cechą jest color, a wartością red.
2. W drugiej selektorem jest zestawienie znaczników p b. Deklaracja zawiera dwa zespoły cecha-wartość.

Dziedziczenie stylów

Z drzewem dokumentu związana jest własność dziedziczności stylów. Polega ona na tym, że elementy leżące niżej w hierarchii (potomkowie), jeśli nie zaznaczymy inaczej, dziedziczą (przejmują) atrybuty formatowania, które zostały nadane ich przodkom. Niestety w niektórych przeglądarkach internetowych zdarza się błędna interpretacja dziedziczenia stylów. Dlatego zawsze sprawdzaj w praktyce zastosowanie tej własności. Problemy stwarzają np. elementy tabeli: nawet jeśli zdefiniujemy określoną wielkość czcionki dla elementu wyżej w hierarchii, w Internet Explorerze 5 nie spowoduje to zmiany tej własności w poszczególnych komórkach (TD) ani w tytule tabeli (CAPTION). Natomiast w MSIE 6 wszystko jest w porządku, ale nie w trybie Quirks.

Przykład:

To jest akapit koloru zielonego, wewnątrz którego znajduje się: pochylenie oraz podkreślenie, którym nie zostały nadane żadne style, a więc dziedziczą je po przodku, czyli po akapicie (są również zielone).
A to jest pogrubienie, które znajduje się także wewnątrz tego samego akapitu, ale został mu nadany atrybut koloru czcionki (biały) oraz koloru tła (niebieski) i dlatego nie odziedziczył stylu po przodku.

Selektor typu

selektor { cecha: wartość }

Selektor typu jest podstawowym rodzajem selektora. Pozwala on wybrać pojedynczy zwykły element dokumentu (X)HTML podanego typu, czyli o określonej nazwie, a następnie nadać mu atrybuty (za pomocą cechy oraz wartości - opisane w następnych rozdziałach). Można powiedzieć, że selektor ten to inaczej element (znacznik), występujący w kodzie źródłowym strony.

UWAGA!
W języku XHTML wszystkie selektory muszą być pisane małymi literami.

Przykład:

Załóżmy że w arkuszu stylów została umieszczona następująca reguła:

h6 { color: red }

Jak widać jest to selektor typu (podstawowy). Dzięki niemu wystarczyłoby teraz napisać:

<h6>To jest tytuł rzędu szóstego</h6>

aby otrzymać tytuł, napisany czerwoną czcionką (red).

Selektor uniwersalny

(interpretuje Internet Explorer, Netscape 6/Mozilla/Firefox, Opera 5)

* { cecha: wartość }

Selektor taki pozwala ustalić określone atrybuty dla wszystkich elementów strony, a więc dla różnych selektorów typu. Możemy za pomocą tej komendy nadać to samo formatowanie dla wszystkich elementów na całej stronie, niezależnie od ich typu (p, h1, li itd.). Niestety jego działanie nie zawsze jest jednoznaczne, dlatego dużo bezpieczniej jest używać selektora typu dla elementu body, chyba że zastosujemy to polecenie w odniesieniu do klasy selektorów.

Jeśli selektor uniwersalny chcemy zastosować do selektora innego niż selektor typu (w połączeniu z selektorami: atrybutów, specjalnymi, pseudoelementów lub pseudoklas), to gwiazdkę można pominąć.

Selektor potomka

(interpretuje Internet Explorer, Netscape 6/Mozilla/Firefox, Opera 5)

przodek1 przodek2 ... potomek { cecha: wartość }

Selektor tego typu pozwala nadać atrybuty elementom, które leżą niżej w hierarchii drzewa dokumentu (zawierają się w innych zewnętrznych znacznikach). Dzięki temu możemy zmienić typ formatowania tylko dla określonych elementów, które są podrzędne w stosunku do innych (przodków). Potomek nie musi leżeć bezpośrednio wewnątrz znacznika przodka. Może być zawarty jeszcze w innych znacznikach, które z kolei zawierają się w rodzicu. Nie jest wtedy konieczne podawanie w deklaracji wszystkich rodziców, a jedynie przodka i potomka.

Selektor taki jest szczególnie przydatny, dla określenia wyglądu odsyłaczy wewnątrz bloku, ponieważ jeśli nie określimy dla nich tzw. pseudoklas odsyłaczowych, nie odziedziczą one formatowania po przodkach.

Przykład:

Załóżmy, że w arkuszu stylów strony została umieszczona następująca reguła:

p b { color: red }

Dzięki temu, jeśli wewnątrz znacznika p (akapit) znajdzie się znacznik b (czyli pogrubienie tekstu), to zostanie on automatycznie napisany czcionką koloru czerwonego:

To jest akapit, a to jest pogrubienie (czerwone), umieszczone wewnątrz tego akapitu oraz wewnątrz znacznika tekstu pochylonego. A to jest pogrubienie (czerwone)bezpośrednio w akapicie, które nie zawiera się w znaczniku pochylenia.
Zwróć uwagę, że pogrubienie (potomek) nie musi znajdować się bezpośrednio w akapicie (przodek).

p i b  { color: red }

To jest akapit, a to jest pogrubienie (czerwone), umieszczone wewnątrz tego akapitu oraz wewnątrz znacznika tekstu pochylonego. A to jest pogrubienie (nie powinno być czerwone) bezpośrednio w akapicie, które nie zawiera się w znaczniku pochylenia.

Inny przykład:

ol ul { color: red }

Taka deklaracja spodowuje, że każdy wykaz typu wypunktowanie (ul), który znajdzie się wewnątrz wykazu numerowanego (ol), będzie miał automatycznie nadany kolor czerowny:

<ol>
<li>Punkt pierwszy
	<ul>
	<li>Podpunkt pierwszy</li>
	<li>Podpunkt drugi</li>
	</ul>
</li>
<li>Punkt drugi</li>
</ol>

1. Punkt pierwszy
   • Podpunkt pierwszy
   • Podpunkt drugi
2. Punkt drugi

Dla porównania żaden z poniższych wykazów nie będzie czerwony:

<ul>
<li>Punkt pierwszy
	<ul>
	<li>Podpunkt pierwszy</li>
	<li>Podpunkt drugi</li>
	</ul>
</li>
<li>Punkt prugi
	<ol>
	<li>Podpunkt pierwszy</li>
	<li>Podpunkt drugi</li>
	</ol>
</li>
<li>Punkt trzeci</li>
</ul>

• Punkt pierwszy
  • Podpunkt pierwszy
  • Podpunkt drugi
• Punkt prugi
  1. Podpunkt pierwszy
  2. Podpunkt drugi
• Punkt trzeci

Selektor dziecka

(interpretuje Internet Explorer 7.0, Netscape 6/Mozilla/Firefox, Opera 5)

rodzic > dziecko { cecha: wartość }

Selektor tego typu pozwala nadać atrybuty elementom, które leżą o jeden rząd niżej w hierarchii drzewa dokumentu (zawierają się w innym zewnętrznym znaczniku). W odróżnieniu do poprzedniego przypadku, tutaj znacznik będący dzieckiem, musi znajdować się bezpośrednio wewnątrz znacznika rodzica.

UWAGA! Polecenie nie jest interpretowane przez MSIE 6.

Przykład:

Załóżmy, że w arkuszu stylów strony została umieszczona następująca reguła:

p > b { color: red }

Dzięki temu, jeśli bezpośrednio wewnątrz znacznika p (akapit) znajdzie się znacznik b(czyli pogrubienie tekstu), to zostanie on automatycznie napisany czcionką koloru czerwonego:

To jest akapit, a to jest pogrubienie (nie powinno być czerwone) umieszczone wewnątrz p, ale i wewnątrz znacznika pochylenia. Natomiast to jest pogrubienie (powinno być czerwone) umieszczone bezpośrednio wewnątrz znacznika akapitu.
Zwróć uwagę na różnice w stosunku do selektora potomka.

Jeśli używasz Internet Explorera 6, interpretacja powyższego przykładu prawdopodobnie nie będzie poprawna. Tylko pogrubienie, które zostało wpisane w drugiej kolejności, powinno być czerwone.

Selektor braci

(interpretuje Internet Explorer 7.0, Netscape 6/Mozilla/Firefox, Opera 5)

brat1 + brat2 { cecha: wartość }

Selektor ten umożliwia nadanie określonych atrybutów jednemu z sąsiadujących ze sobą braci - temu, który w deklaracji został podany jako drugi (czyli brat2). Zwykły tekst znajdujący się pomiędzy braćmi nie ma wpływu na działanie selektora, tzn. jest ignorowany.

UWAGA! Polecenie nie jest interpretowane przez MSIE 6.

Przykład:

Załóżmy, że w arkuszu stylów strony została umieszczona następująca reguła:

i + b { color: red }

Dzięki temu, jeśli wewnątrz tego samego znacznika (rodzica), będą znajdowały się po sobie znaczniki i oraz b, to ten drugi uzyska określone atrybuty:

To jest akapit, wewnątrz którego znajduje się: pochylenie (nie powinno być czerwone)oraz pogrubienie (powinno być czerwone) (zwróć uwagę, że pomiędzy znacznikami jest zwykły tekst - wyraz "oraz"; nie ma on wpływu na działanie selektora)... następne pogrubienie (nie powinno być czerwone). A to jest pogrubienie (nie powinno być czerwone) wewnąrz pochylenia (nie powinno być czerwone). Tutaj kończy się akapit.

To jest następny akapit, a w nim kolejne pogrubienie (nie powinno być czerwone), które nie sąsiaduje bezpośrednio z żadnym pochyleniem.

Jeśli używasz Internet Explorera 6, interpretacja powyższego przykładu prawdopodobnie nie będzie poprawna. Tylko pogrubienie, które zostało wpisane w pierwszym akapicie jako pierwsze w kolejności, powinno być czerwone.

Grupowanie selektorow

selektor1, selektor2, selektor3... { cecha: wartość }

Taka deklaracja stylu pozwala nadać te same wartości atrybutów kilku różnym selektorom jednocześnie (bez względu na ich położenie w hierarchii drzewa dokumentu).

Przykład:

Jeśli w arkuszu stylów strony została umieszczona następująca reguła:

b, i { color: red }

to po wpisaniu:

<b>pogrubienie</b>
<i>pochylenie</i>

otrzymamy tekst, napisany w całości czcionką koloru czerwonego:

pogrubienie pochylenie

Pole tekstowe

<form action="...">
	<input type="text" name="nazwa" />
</form>

lub

<form action="...">
	<input name="nazwa" />
</form>

Atrybut name="...", powinien być unikatowy w obrębie formularza, tzn. żadne dwa pytania w tym samym formularzu nie powinny mieć takiej samej nazwy.

Typ "text" jest podstawowym rodzajem pola tekstowego. Ma ono wysokość jednej linii tekstu i określoną długość. Można do niego wpisywać tekst, który później zostanie wysłany wraz z formularzem, jako odpowiedź na zadane pytanie.

UWAGA! Wszystkie pola (dowolnego typu), które mają się znaleźć w formularzu, należy umieszczać pomiędzy tymi samymiznacznikami <form> oraz </form> (zobacz: Ramy formularza). Oczywiście w pojedynczym dokumencie można umieścić kilka formularzy - wtedy wstawiamy klika znaczników <form>...</form>, dla każdego formularza osobno.

Wygląd pól formularza można zdefiniować bardziej precyzyjnie dzięki możliwościom CSS - np. przy pomocy zamieszczonego generatora.

Kaskadowe Arkusze Stylów CSS nie mogą funkcjonować samodzielnie, ponieważ definiują jedynie sposób formatowania (wygląd) elementów dokumentu, ale same ich nie tworzą. Elementy muszą zostać wstawione do dokumentu w postaci struktury znaczników np. za pomocą języka XHTML lub HTML. Dlatego aby poznać ogrom dodatkowych możliwości, jakie dają style CSS, konieczna jest wcześniejsza znajomość zasad języka (X)HTML.

Zapamiętaj zatem prostą zasadę: za pomocą języka (X)HTML wstawia się znaczniki do kodu źródłowego strony, a następnie dzięki CSS można nadać im potem określony sposób wyświetlania.

Sposoby wstawiania stylów do gotowych dokumentów są różne. Nie znaczy to, że jedne są lepsze od drugich. Każdy sposób jest przydatny w innych sytuacjach. Większość witryn stosuje jednocześnie wszystkie z przedstawionych metod osadzania CSS - w zależności od konkretnej potrzeby.

Styl lokalny

<selektor style="cecha: wartość; cecha2: wartość2...">...</selektor>

Styl lokalny pozwala na nadanie formatowania konkretnemu pojedynczemu elementowi strony. Dlatego właśnie styl tego rodzaju nazywa się także styl inline(ang. "w linii"), ponieważ jest wstawiany w tej samej linii, w której znajduje się element formatowany. O tym który to będzie element, decyduje słowo kluczowe "selektor" (widoczny powyżej, w deklaracji stylu).

Zwróć uwagę, że jednemu selektorowi możemy nadać kilka atrybutów (cech). Są one wtedy rozdzielone średnikami.

Przykład:

Po wpisaniu w edytorze:

<p style="color: red">To jest jakiś tekst</p>

Otrzymamy:

To jest jakiś tekst

Rozciąganie stylu

<span style="cecha: wartość; cecha2: wartość2...">...</span>

Znacznik <span>...</span> pozwala na objęcie pewnego większego fragmentu dokumentu. Pojedynczym znacznikiem <span>...</span> możemy objąć kilka różnych elementów, które są wyświetlane w linii (sam element SPAN tak właśnie jest wyświetlany), np. wytłuszczenie tekstu oraz kursywę. Element ten tak dobrze nadaje się do osadzania stylów, ponieważ sam w sobie nie ma określonego żadnego formatowania, które mogłoby kolidować z efektem, jaki chcemy uzyskać.

Zwróć uwagę, że jednemu selektorowi możemy nadać kilka atrybutów (cech). Są one wtedy rozdzielone średnikami.

Przykład:

Po wpisaniu w edytorze:

<span style="color: red">
	<b>To jest pogrubienie (element wyświetlany w linii) w ramach SPAN</b>,
	a to jest zwykły tekst - również wewnątrz span.
</span>

Otrzymamy:

To jest pogrubienie (element wyświetlany w linii) w ramach SPAN, a to jest zwykły tekst - również wewnątrz SPAN.

Wydzielone bloki

<div style="cecha: wartość; cecha2: wartość2...">...</div>

Fragment dokumentu wydzielony za pomocą bloku <div>...</div> możemy swobodnie formatować. Element ten tak dobrze nadaje się do osadzania stylów, ponieważ sam w sobie nie ma określonego żadnego formatowania, które mogłoby kolidować z efektem, jaki chcemy uzyskać. Metoda ta jest bardzo podobna do SPAN, lecz obejmuje zwykle większe fragmenty dokumentu (może zawierać w sobie różne znaczniki jak również inne bloki). Dodatkowo DIV domyślnie jest wyświetlany:

XXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXX 

natomiast SPAN: 

XXXXXXXXXXXXXXXXXXXXXXXXw liniiXXXXXXXXXXXXXXXXXXXXXXXX 

Generalnie element blokowy (DIV) może zawierać wewnątrz siebie zwykły tekst, jak również inne elementy blokowe. Został on pomyślany do tworzenia obszerniejszych struktur. Natomiast elementy wyświetlanie w linii (SPAN) nie mogą zawierać elementów blokowych, ale mogą inne elementy wyświetlane w linii oraz zwykły tekst. Wewnątrz DIV można oczywiście wpisać również SPAN [Aby dowiedzieć się więcej, zobacz: Wyświetlanie].

Zwróć uwagę, że jednemu selektorowi możemy nadać kilka atrybutów (cech). Są one wtedy rozdzielone średnikami.

Przykład:

Po wpisaniu w edytorze:

<div style="background-color: yellow">
	<span style="color: red">
		<b>To jest pogrubienie w ramach DIV oraz SPAN i dlatego jest czerwone na żółtym tle</b>,
		a to jest zwykły tekst - również wewnątrz DIV i SPAN.
	</span>
	To jest zwykły tekst, ale tylko wewnątrz DIV - dlatego nie jest czerwony, ale ma żółte tło.
	<p>A to jest akapit (element blokowy) w ramach DIV.</p>
</div>

Otrzymamy:

Wewnętrzny arkusz stylów

<head>
	(...)
<style type="text/css">
/* <![CDATA[ */
selektor { cecha: wartość; cecha2: wartość2... }
selektor2 { cecha: wartość; cecha2: wartość2... }
(...)
/* ]]> */
</style>
	(...)
</head>

Zwróć uwagę, że jednemu selektorowi możemy nadać kilka atrybutów (cech). Są one wtedy rozdzielone średnikami.

Wewnętrzny arkusz stylów wstawia się zawsze w części nagłówkowej dokumentu (pomiędzy znacznikami <head> a </head>). Można go zastosować, gdy elementy które pragniemy poddać formatowaniu, występują wielokrotnie na stronie i wszystkim chcemy nadać takie same atrybuty (inne niż domyślne). Na przykład chcemy, aby wszystkie wykazy miały automatycznie kolor niebieski. Wystarczy wpisać odpowiednią deklarację stylów w arkuszu (w treści nagłówkowej) i nie trzeba już nic dopisywać przy samym elemencie.

Komentarze w arkuszu stylów pisze się używając znaków: /* (otworzenie komentarza) oraz */ (zamknięcie komentarza), np.: /*12345*/. Wszystko pomiędzy tymi znakami jest ignorowane przez przeglądarkę. Komentarzy takich nie można zagnieżdżać, tzn. niedozwolony jest zapis: /*123/*000*/456*/. Komentarz może składać się z wielu linii, np.:

/* Ten tekst zostanie zignorowany przez przeglądarkę,
ale może zawierać informacje cenne dla projektanta arkusza CSS */

Ponadto w języku HTML całą zawartość arkusza stylów, tzn. wnętrze znacznika <style type="text/css">...</style> można ująć w komentarz HTML:

<style type="text/css">
<!--
/* To jest arkusz stylów kompatybilny wstecz */
-->
</style>

Dzięki nim treść arkusza nie będzie widoczna na ekranie starszych przeglądarek, które nie obsługują stylów. Aktualnie jednak trudno znaleźć przeglądarkę, która nie potrafiłaby zinterpretować znacznika STYLE. Oczywiście znaki <!-- oraz -->znajdujące się na początku i na końcu arkusza, nie są znakami komentarza stylówlecz HTML i nie można ich używać wewnątrz arkusza w innych miejscach niż podane!

W języku XHTML ukrywanie arkusza CSS w komentarzach <!-- ... -->jest niezalecane. XHTML jest zgodny z XML, gdzie panuje zasada, że przed etapem właściwego parsowania dokumentu, można z niego usunąć wszystkie komentarze. Oznaczałoby to, że tego typu skrypty i arkusze w ogóle nie byłyby brane pod uwagę przy renderowaniu strony!

Znacznik STYLE może znajdować się tylko i wyłącznie w nagłówku dokumentu.

Przykład:

Jeśli w treści nagłówkowej strony zostałby umieszczony następujący wewnętrzny arkusz stylów:

<style type="text/css">
/* <![CDATA[ */
h6 { color: red }
/* ]]> */
</style>

to po wpisaniu w dowolnym miejscu strony po prostu:

<h6>To jest tytuł rzędu 6</h6>

otrzymalibyśmy tytuł rzędu szóstego koloru czerwonego (color: red) i to niezależnie od tego, ile będzie na stronie takich tytułów. Wygodne, prawda? :-)

Zewnętrzny arkusz stylów

<head>
	(...)
	<link rel="Stylesheet" type="text/css" href="/style.css" />
	(...)
</head>

Możliwość wstawiania zewnętrznego arkusza jest chyba jedną z największych zalet stosowania stylów. Pozwala nam to zdefiniować takie samo formatowanie określonych elementów na wielu stronach jednocześnie. Dzięki temu, za pomocą tego jednego arkusza, wszystkie nasze strony w obrębie całego serwisu mogą mieć pewne wspólne cechy. Dodatkowo jeśli w ostatniej chwili zdecydujemy się zmienić np. rodzaj czcionki na wszystkich stronach, możemy to zrobić, modyfikując jedynie zewnętrzny arkusz stylów, bez konieczności zmiany każdej strony osobno. Pozwala to zaoszczędzić mnóstwo czasu (zwłaszcza niezdecydowanym ;-)

Wstawienie takiego zewnętrznego arkusza stylów jest bardzo proste. Wystarczy wpisać w treści nagłówkowej każdego z dokumentów (pomiędzy znacznikami <head>a </head>), przedstawioną powyżej linijkę. Deklaracje stylów zawarte w zewnętrznym arkuszu, zostaną automatycznie przeniesione do podanej strony (podczas jej wyświetlania).

A teraz kilka słów o tym, jak napisać taki zewnętrzny arkusz stylów. Wystarczy do tego zwykły edytor tekstu, w którym piszemy takie same deklaracje stylów selektor { cecha: wartość }, jak w przypadku wewnętrznego arkusza stylów. Oczywiście można się posłużyć specjalnym edytorem CSS. Należy jedynie pamiętać, że plik będący zewnętrznym arkuszem stylów musi mieć rozszerzenie *.css!

Wstawienie białych znaków (spacje, tabulacje, znaki nowej linii) w arkuszu CSS nie ma wpływu na jego działanie. Dlatego możesz ułożyć wpisywane reguły CSS w taki sposób, aby były bardziej czytelne.

Znacznik LINK może znajdować się tylko i wyłącznie w nagłówku dokumentu.

Przykład:

A oto przykładowy zewnętrzny arkusz stylów:

/* SELEKTORY: */
body
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10pt;
	color: #003868;
	background-color: #80B8E8;
	margin: 6mm;
}

p
{
	text-align: justify;
}

pre, code
{
	font-size: 8pt;
}

Ciekawostka
Przeglądarki zwykle umożliwiają formatowanie wszystkich oglądanych stron (bez względu na ich pochodzenie), przy użyciu arkusza stylów dostarczonego przez użytkownika. Pozwala to np. określić odpowiadającą nam wielkość czcionki, jej rodzaj, kolor tła oraz tekstu itd. Przykładowo, aby zaimplementować taką funkcję w przeglądarce Microsoft Internet Explorer, należy wybrać polecenie z menu programu: Narzędzia/Opcje internetowe... i kliknąć przycisk: Dostępność.... Następnie w otwartym oknie dialogowym należy zaznaczyć: Formatuj dokumenty używając mojego arkusza stylów, a poniżej wpisać ścieżkę do pliku arkusza (można również użyć przycisku Przeglądaj...).

Import arkusza stylów

<style type="text/css">
/* <![CDATA[ */
@import url(adres zewnętrznego arkusza stylów);
/* ]]> */
</style>

Polecenie można wstawić zarówno w wewnętrznym jak i zewnętrznym arkuszu stylów. Pozwala wczytać zewnętrzny arkusz stylów, przy czym może się on znajdować na tym samym serwerze (wtedy można podać względną ścieżkę dostępu) lub w dowolnym miejscu w obrębie całego Internetu (wtedy podajemy adres internetowy). Po wczytaniu, zostanie on automatycznie dołączony do strony. Rozwiązanie takie pozwala, np. na ujednolicenie wyglądu kilku serwisów internetowych. Przykładowo, jeśli spodobał Ci się sposób formatowania elementów na stronie Twojego znajomego, możesz poprosić Go, aby udostępnił Ci adres arkusza, z którego korzysta i w ten sposób wygląd Twoich stron będzie podobny.

Jedna uwaga: nie zapomnij postawić średnika na końcu przedstawionej powyżej linijki (po adresie arkusza), a także znaku @ na jej początku!

Oprócz importu arkusza, możesz umieścić pomiędzy znacznikami <style> a </style> dodatkowo własne reguły stylów, a nawet polecenie importu drugiego arkusza (ich działania zostaną połączone, a w przypadku konfliktów pierwszeństwo będzie miała ostatnia w kolejności deklaracja importu).

Jeżeli polecenie importu znajduje się w zewnętrznym arkuszu stylów, to relatywną ścieżkę dostępu do arkusza importowanego należy konstruować względem położenia arkusza CSS, w którym jest wstawione polecenie @import, a nie względem dokumentu (X)HTML!

UWAGA!
Wszystkie polecenia importu (może ich być kilka) muszą się znajdować zaraz na początku arkusza stylów, tzn. przed właściwymi regułami CSS, znajdującymi się w arkuszu, do którego następuje import!

Kaskadowość stylów

Kaskadowość stylów określa pierwszeństwo w oddziaływaniu na te same elementy strony stylów z różnych źródeł. Na przykład: na naszej stronie używamy zewnętrznego arkusza stylów, deklaracji stylów w nagłówku strony, a także stylów typu inline, przy czym dotyczą one formatowania dokładnie tego samego elementu (np. kroju czcionki). Co się stanie w takim przypadku? Czy nie powstaną konflikty? A może komputer się "zawiesi"? Nic z tych rzeczy! A to właśnie ze względu na kaskadowość. To od niej wzięły swoją nazwę style: CSS - (ang. Cascading Style Sheets) KaskadoweArkusze Stylów.

Jeśli w dokumencie znajduje się kilka źródeł stylów, pierwszeństwo mają te, które znajdują się "bliżej" formatowanego elementu. Oddziaływanie stylów z arkuszy zewnętrznych może być modyfikowane przez style zdefiniowane w nagłówku dokumentu, to z kolei może być zmieniane przez style zdefiniowane bezpośrednio w ciele dokumentu (inline). Zatem priorytet ważności stylów (pierwszeństwo) wyglądałby tak:

1. Styl lokalny (inline)
2. Rozciąganie stylu (SPAN)
3. Wydzielone bloki (DIV)
4. Wewnętrzny arkusz stylów
5. Import stylów do wewnętrznego arkusza
6. Zewnętrzny arkusz stylów
7. Import stylów do zewnętrznego arkusza

Style o wyższym priorytecie ważności (na początku listy) mają pierwszeństwo w modyfikowaniu elementów dokumentu. Style niżej w hierarchii mogą zmienić formatowanie jakiegoś elementu, tylko jeśli style o wyższym priorytecie nie dotyczą tego konkretnego elementu.

Kaskadowość stylów pozwala zatem pracować z kilkoma źródłami stylów, bez obawy o wystąpienie konfliktów. Takie rozwiązanie jest bardzo wygodne, ponieważ możemy np. zdefiniować ogólny wygląd naszego serwisu w zewnętrznym arkuszu i dodatkowo zmienić nieco wybrane strony poprzez wewnętrzny arkusz, a jeśli zajdzie konieczność zmodyfikować pojedyncze elementy za pomocą stylu lokalnego.

UWAGA! Polecenie dołączenia zewnętrznego arkusza powinno znajdować się w dokumencie wcześniej niż wewnętrzny arkusz. Odwrotna kolejność złamie zasady kaskadowości!

Jeżeli natomiast chodzi o zasady kaskadowości wewnątrz tego samego arkusza CSS, tzn. w przypadku, kiedy znajduje się w nim kilka osobnych reguł CSS o jednakowym stopniu ważności, odnoszących się do tej samej cechy tego samego elementu, to ostateczny wpływ na formatowanie będą miały reguły umieszczone na końcu.

Łamanie kaskadowości

Można świadomie zmienić zasady kaskadowości. Służy do tego polecenie !important. Jeżeli pojawi się ono w deklaracji stylu po wartości cechy, spowoduje to, że taka cecha będzie miała pierwszeństwo przed innymi, nawet jeśli ma niższy priorytet. Natomiast inne cechy takiej deklaracji będą interpretowane normalnie, chyba że również przy nich postawimy !important. Nie należy jednak przesadzać ze stosowaniem tej metody, ponieważ jawnie łamie ona zasadę kaskadowości i po jakimś czasie może Ci znacznie utrudnić analizę sposobu formatowania elementów.

Przykład:

Gdyby w arkuszu stylów tej strony została umieszczona następująca reguła:

h6 { color: blue !important; background-color: green }

to pomimo wpisania następującego stylu inline (który ma pierwszeństwo przed arkuszami stylów)

<h6 style="color: red; background-color: yellow">
	Ten tytuł nie jest napisany czcionką koloru czerwonego, lecz niebieskiego, mimo wstawienia stylu inline.
	Natomiast tło pozostaje żółte.
</h6>

otrzymalibyśmy tytuł koloru niebieskiego (blue) jednak nadal na żółtym (yellow) tle.

Obrazek#

1. Zwykły (domyślnie):

   <img src="/ścieżka dostępu" alt="Tekst alternatywny" />

   gdzie jako "ścieżka dostępu" należy podać lokalizację na dysku, gdzie znajduje się żądany obrazek.
   Natomiast w miejsce "Tekst alternatywny" wpisuje się krótką informację, która pojawi się w przypadku, kiedy obrazek nie zostanie wyświetlony (np. jeśli użytkownik wyłączy wyświetlanie grafiki w swojej przeglądarce internetowej). Ponadto w MSIE może zostać wyświetlona po wskazaniu obrazka myszką.

   Informacja alternatywna jest przydatna w przeglądarkach, które nie wyświetlają grafiki lub kiedy użytkownik wyłączył jej wyświetlanie albo dla osób niewidomych, które korzystają ze specjalnych syntezatorów mowy.

   UWAGA!
   Bardzo ważne: w nazwach plików lepiej nie używać:

   • wielkich liter
   • znaków, np.: \ / : * ? " < > |
   • spacji (jeśli musisz, w zamian używaj podkreślnika "_")
   • polskich liter (ą, ć, ę, ł, ń... itd.)

   Jeśli nie zastosujesz się do tych zaleceń, może się okazać, że po wprowadzeniu strony do Internetu, pliki takie nie wczytają się (nawet jeśli na Twoim komputerze wszystko jest w porządku)!

   PRZYKŁAD:

   
2. O określonych rozmiarach:

   <img src="/ścieżka dostępu" alt="Tekst alternatywny" width="x" height="y" />

   lub

   <img src="/ścieżka dostępu" alt="Tekst alternatywny" width="x%" height="y%" />

   gdzie jako "x" oraz "y" należy wpisać odpowiednio: długość i wysokość obrazka w pikselach.
   Natomiast jako "x%" oraz "y%" należy wpisać odpowiednio: długość i wysokość obrazka w procentach ekranu.

   Podawanie rozmiarów grafik może być przydatne przynajmniej z kilku powodów. Jeśli obrazek nie zostanie wczytany, symbol który zajmie jego miejsce będzie miał inne wymiary i może tym samym popsuć ułożenie innych elementów strony. Poza tym jeśli nie wstawimy rozmiarów grafik na stronie, to podczas wczytywania cała treść będzie się "rozjeżdżać". Jeżeli komuś to szczególnie przeszkadza, powinien zawsze określać te atrybuty - to bardzo dobry nawyk. Oczywiście aby obraz nie był zniekształcony, należy podać jego prawdziwe rozmiary w pikselach a nie w procentach (można je sprawdzić w dowolnym programie graficznym).

   PRZYKŁAD:

   width="300" height="150"

   
3. Z obramowaniem:

   <img src="/ścieżka dostępu" alt="Tekst alternatywny" border="n" />

   gdzie jako "n" należy wpisać grubość obramowania (w pikselach).

   Atrybut BORDER jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.

   PRZYKŁAD:

   border="10"

   
4. O określonym ustawieniu względem tekstu:

   <img src="/ścieżka dostępu" alt="Tekst alternatywny" align="rodzaj" />

   gdzie jako "rodzaj" należy wpisać:

   • "left" - obrazek ustawiony po lewej stronie względem otaczającego go tekstu
   • "right" - obrazek po prawej stronie względem tekstu
   • "top" - tekst ustawiony na górze obrazka
   • "middle" - tekst ustawiony na średniej wysokości względem obrazka
   • "bottom" - tekst ustawiony na dole obrazka (domyślnie)

   Atrybut ALIGN jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.

   PRZYKŁAD:

   align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left"...

   align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right"...

    align="top"

    align="middle"

    align="bottom"

5. O określonej odległości od tekstu:

   <img src="/ścieżka dostępu" alt="Tekst alternatywny" hspace="x" vspace="y" />

   gdzie "x" oznacza poziomą odległość w pikselach, a "y" pionową odległość (również w pikselach).

   Atrybuty HSPACE oraz VSPACE są zdeprecjonowane przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.

Edytory (X)HTML posiadają często specjalny generator, który wspomaga wstawianie multimediów na strony WWW (nie tylko obrazków). Należy jednak pamiętać, że multimedia bardzo wyraźnie zwiększają objętość strony, a co za tym idzie, wydłużają czas wczytywania.

Większość bardziej zaawansowanych programów graficznych udostępnia funkcję kompresji obrazów, co pozwala zmniejszyć ich objętość bez wyraźnego spadku jakości. Czasami zysk z użycia takiej kompresji jest dość znaczny, dlatego warto się tym zainteresować.

Przed wstawieniem obrazka radzę zastanowić się, czy jest on absolutnie konieczny. Jeżeli chcesz umieścić na swojej stronie grafikę o znacznych rozmiarach, zawsze staraj się wcześniej pokazać miniaturkę, aby użytkownik mógł ocenić, czy chce czekać na załadowanie pełnowymiarowego obrazu (można to zrobić np. za pomocą galerii zdjęć).

Wszystkie obrazki najlepiej powinny być zapisane w jednym z trzech formatów:

• GIF - dla rysunków składających się z mniej niż 256 kolorów, np. przyciski menu i inne "ręcznie" rysowane ozdobniki. Format ten obsługuje przezroczystość.
• JPG - dla zdjęć wielokolorowych. Nie obsługuje przezroczystości.
• PNG - pozwala zapisywać z bardzo dobrą jakością zarówno ręcznie rysowane grafiki jak i zdjęcia. Obsługuje kompresję oraz zarówno pełną przezroczystość jak i półprzezroczystość. Niestety zwłaszcza ta ostatnia własność może nie być interpretowana przez starsze przeglądarki (np. MSIE 6.0).

Format BMP może nie być wcale lub jest bardzo słabo skompresowany, dlatego należy unikać jego stosowania! Nieodpowiedni dobór formatu graficznego może być przyczyną nawet kilkukrotnego zwiększenia rozmiaru pliku albo znacznego pogorszenia jakości obrazu. Dlatego jeśli nie wiesz który wybrać, przetestuj wszystkie.

Jeżeli chcesz wstawić obrazek, który nie jest prostokątem, można w tym celu użyć formatu GIF (lub PNG). Obszary, które mają być niewidoczne, należy narysować innym kolorem, a następnie w programie graficznym ustawić ten kolor jako przezroczysty (transparent). Uwaga: format JPG (oraz BMP) nie obsługuje przezroczystości! Podobny efekt można co prawda uzyskać, rysując "niewidoczne" części kolorem tła strony WWW. Jednak jeśli zmienimy kolor tła na stronie, będzie trzeba zmienić również wszystkie takie obrazki. Natomiast jeżeli ustalimy przezroczystość na obrazku, zawsze będzie ona niewidoczna.

Przy przeglądaniu większej ilości dużych obrazków, pomocne mogą okazać się galeria lub przeglądarka zdjęć.

Animowany banner

Animowany banner można stworzyć przy użyciu takich programów jak np. Animation Shop, Ulead GIFAnimator czy GIMP i inne. Jest to po prostu specjalny plik GIF, który wstawiamy na stronę, tak jak zwykły obrazek. Może on mieć przykładowo rozmiary 400x50. Pamiętaj, że im więcej klatek animacji, tym większe rozmiary pliku i dłuższe wczytywanie strony!