Język HTML udostępnia nam kilka elementów przeznaczonych do formatowania wyglądu tekstu. Pod spodem zostały omówione niektóre z nich.

  • Element b pogrubi tekst, który zostanie w nim umieszczony.
  • Element i pochyli tekst, który zostanie w nim umieszczony.
  • Element u podkreśli tekst, który zostanie w nim umieszczony.
  • Element span sam w sobie nie zawiera żadnych cech, które zmieniają wygląd tekstu, ponieważ to my sami musimy te cechy, czyli właściwości CSS, dla niego określić, za pomocą języka CSS.

Kaskadowe arkusze stylów służą do definiowania sposobu wyświetlania elementów HTML. Pozwalają określać rozmiar i kolor czcionki, definiować odstępy i rozmieszczenie tekstu oraz obrazów na stronie, a pełna lista ich możliwości jest znacznie dłuższa.

Jednym ze sposobów formatowania właściwości wyglądu elementu HTML jest dodanie do niego atrybutu style wraz z właściwościami i wartościami jakie chcemy zmienić w wyglądzie danego elementu HTML.

Składnia CSS

Zestaw reguł CSS składa się z selektora oraz bloku deklaracji. Przykładowo:

Składnia CSS

Selektor odnosi się do elementu HTML, który będzie stylizowany. Blok deklaracji zawiera jedną lub więcej deklaracji oddzielonych średnikami. Każda deklaracja zawiera parę właściwość – wartość, oddzielone dwukropkiem. Każda deklaracja kończy się średnikiem, a każdy blok deklaracji jest otoczony znakami nawiasu { i }.

Bardziej złożony wzór reguł CSS wygląda następująco:

selektor, selektor {
  właściwość:wartość;
  właściwość:wartość;
  właściwość:wartość;
}

W poniższym przykładzie wszystkie elementy akapitu

zostaną wyśrodkowane, a tekst będzie pisany kolorem czerwonym.

p {
color: red;
text-align: center;
}

Rodzaje arkuszy stylów

Wyróżniamy trzy rodzaje arkuszy stylów:

  • zewnętrzny
  • osadzony
  • wpisany.

Dzięki zewnętrznym arkuszom stylów można zmienić wygląd całej strony poprzez zmianę  tylko w jednym pliku!

Każda strona musi zawierać odniesienie do pliku zewnętrznego arkusza w elemencie znajdującym się w sekcji :

Zewnętrzny arkusz stylów może być edytowany w dowolnym edytorze tekstowym. Plik nie powinien zawierać żadnych znaków HTML. Musi on mieć rozszerzenie .css.

Osadzony arkusz stylów może zostać użyty, jeśli każda strona ma swój unikalny wygląd. Takie arkusze stylów definiowane są wewnątrz elementu <style>, znajdującego się wewnątrz sekcji <head>

Styl wpisany może zostać użyty, aby nadać unikalny styl pojedynczemu elementowi. Aby móc użyć stylu wpisanego, do odpowiedniego elementu należy dodać atrybut style, który może zawierać każdą właściwość CSS:
<h1 style="color: blue; margin-left: 30px;">To jest nagłówek</h1>

Styl wpisany traci wiele zalet arkuszy stylów, poprzez mieszanie treści ze sposobem prezentacji. Dlatego też doradza się jak najrzadsze używanie tej metody.

Jeśli niektóre właściwości zostały zdefiniowane dla tego samego selektora (elementu) w różnych arkuszach stylów, użyta zostanie wartość z ostatniego wczytanego pliku.

Priorytety w kaskadowych arkuszach stylów:

  • wpisany
  • zewnętrzny i osadzony
  • domyślny przeglądarki.

Oznacza to, że styl wpisany (wewnątrz konkretnego elementu HTML) ma najwyższy priorytet, a więc nadpisze styl zdefiniowany wewnątrz znacznika <head>, zewnętrzny arkusz stylów i wartości domyślne przeglądarki.


  • / - oznacza "wejście" do folderu (przesunięcie się o jeden poziom "do przodu" w drzewie katalogów)
  • ../ - oznacza "wyjście" z folderu (przesunięcie się o jeden poziom "do tyłu" w drzewie katalogów)


Ostatnia modyfikacja: środa, 9 września 2020, 01:52