ZAWODNIK

Dołączanie stylów i kaskada: lokalne, wewnętrzne, zewnętrzne, specyficzność

INF.03 · teoria
autor: redakcja · 08.09.2026
Trzy sposoby dołączenia stylów CSS do strony: zewnętrzny plik przez link, wewnętrzny znacznik style i styl lokalny w atrybucie, a do tego reguła import, kaskada, dziedziczenie, !important i liczenie specyficzności selektora. Lekcja 4.1 kursu INF.03.

[ INF.03: PYTANIA Z TEGO DZIAŁU ]

Przejrzyj pytania: cssĆwicz dział: css
CSS (Cascading Style Sheets, ka­ska­do­we ar­ku­sze stylów) to język opi­su­ją­cy wygląd ele­men­tów HTML: kolory, kroje czcio­nek, roz­mia­ry, ob­ra­mo­wa­nia i roz­miesz­cze­nie bloków. HTML mówi, czym jest frag­ment strony, CSS mówi, jak ten frag­ment ma wy­glą­dać. W części pi­sem­nej wra­ca­ją py­ta­nia „który styl ma naj­wyż­szy prio­ry­tet", „jak do­łą­czyć ze­wnętrz­ny arkusz stylów", „w której części do­ku­men­tu umiesz­cza się arkusz we­wnętrz­ny" i „czym wy­mu­sić regułę w roz­bu­do­wa­nym sys­te­mie stylów". W części prak­tycz­nej arkusz CKE wymaga stylów w ZEWNĘTRZNYM pliku do­łą­czo­nym przez <link> i ocenia „styl CSS wi­try­ny in­ter­ne­to­wej" jako osobny re­zul­tat, więc reguła scho­wa­na w atry­bu­cie style kosz­tu­je punkt.

Budowa reguły

Reguła CSS to se­lek­tor i sto­ją­cy za nim blok de­kla­ra­cji w na­wia­sach klam­ro­wych. Se­lek­tor wska­zu­je, KTÓRE ele­men­ty strony reguła obej­mu­je, a blok mówi, co im zmie­nia. Po­je­dyn­cza de­kla­ra­cja składa się z czte­rech części: wła­ści­wo­ści, dwu­krop­ka, war­to­ści i śred­ni­ka.
h1 { color: Tomato; font-size: 150%; }
Ta reguła obej­mu­je każdy na­głó­wek pierw­sze­go stop­nia w do­ku­men­cie: h1 to se­lek­tor, color i font-size to wła­ści­wo­ści, Tomato i 150% to ich war­to­ści. Każda de­kla­ra­cja stoi w osob­nym wier­szu, wcięta o dwie spacje. Śred­nik po ostat­niej de­kla­ra­cji jest for­mal­nie zbędny, ale zo­sta­wia się go, bo przy do­pi­sy­wa­niu ko­lej­nej łatwo o nim za­po­mnieć i zepsuć obie.
Ko­men­tarz za­czy­na się od /*, kończy się */ i może objąć kilka wier­szy. Prze­glą­dar­ka go pomija, więc służy do opisu sekcji ar­ku­sza albo do tym­cza­so­we­go wy­łą­cze­nia reguły. Kilka se­lek­to­rów roz­dzie­lo­nych prze­cin­ka­mi do­sta­je jeden wspól­ny blok de­kla­ra­cji, co skraca arkusz wszę­dzie tam, gdzie kilka róż­nych ele­men­tów ma wy­glą­dać tak samo.
/* wspólny krój dla banera i stopki */ header, footer { font-family: Helvetica; text-align: center; }

Trzy spo­so­by do­łą­cze­nia stylów

Do­łą­cze­nie stylów to wska­za­nie prze­glą­dar­ce, skąd ma wziąć reguły dla do­ku­men­tu. Spo­so­by są trzy i różnią się miej­scem, w którym stoi kod, oraz za­się­giem.
  • ›
    Styl ze­wnętrz­ny leży w osob­nym pliku z roz­sze­rze­niem .css, w którym stoją same reguły, bez jed­ne­go znacz­ni­ka HTML. Do­ku­ment do­łą­cza go znacz­ni­kiem <link> w części na­głów­ko­wej, czyli we­wnątrz <head>. Jeden plik ob­słu­gu­je wszyst­kie pod­stro­ny wi­try­ny, a prze­glą­dar­ka trzyma go w pa­mię­ci pod­ręcz­nej (cache), więc przy ko­lej­nej pod­stro­nie nie po­bie­ra go po­now­nie.
  • ›
    Styl we­wnętrz­ny, na­zy­wa­ny też na­głów­ko­wym, to reguły wpi­sa­ne między <style> i </style> w części na­głów­ko­wej do­ku­men­tu. Obo­wią­zu­je w tym jednym pliku i ni­g­dzie in­dziej.
  • ›
    Styl lo­kal­ny to atry­but style w otwie­ra­ją­cym znacz­ni­ku ele­men­tu. W środku stoją same de­kla­ra­cje, bez se­lek­to­ra i bez klamer, bo wia­do­mo, o który ele­ment chodzi: do­kład­nie o ten jeden.
<head> <link rel="stylesheet" type="text/css" href="styl.css"> <style> h1 { color: Teal; } </style> </head> <body> <h1 style="color: Navy;">Sklep komputerowy</h1> </body>
Trzy miej­sca opi­su­ją tu ten sam na­głó­wek, więc któreś musi ustą­pić. Roz­strzy­ga to ka­ska­da z na­stęp­nej sekcji: na­głó­wek będzie gra­na­to­wy, bo styl lo­kal­ny bije oba ar­ku­sze.
Znacz­nik <link> nie ma wersji za­my­ka­ją­cej i nie obej­mu­je żadnej treści; atry­but rel mówi, czym jest do­łą­cza­ny plik (stylesheet, arkusz stylów), href podaje jego adres, a type="text/css" bywa w ar­ku­szach do­pi­sa­ny, choć dziś nie jest wy­ma­ga­ny.
Czwar­ty zapis, o który pyta bank, to reguła @import. Wsta­wio­na na POCZĄTKU ar­ku­sza, przed wszyst­ki­mi re­gu­ła­mi, do­kła­da do niego za­war­tość innego pliku CSS: @import url("kolory.css"); działa tak samo we­wnątrz znacz­ni­ka <style>. Nadaje się do dzie­le­nia dużego ar­ku­sza na części, ale ładuje się wol­niej niż osobny <link>, bo prze­glą­dar­ka po­zna­je adres pliku do­pie­ro po po­bra­niu ar­ku­sza nad­rzęd­ne­go.
Adres w href jest zwykle ścież­ką względ­ną, czyli li­czo­ną od po­ło­że­nia pliku HTML. Gdy index.html leży bez­po­śred­nio w ka­ta­lo­gu Strona, a arkusz w jego pod­ka­ta­lo­gu style, po­praw­ny zapis to href="style/default.css" albo href="./style/default.css". Gdy ka­ta­log www ma dwa pod­ka­ta­lo­gi, html z do­ku­men­ta­mi i style z ar­ku­sza­mi, do­ku­ment musi naj­pierw wyjść ka­ta­log wyżej: href="../style/styl.css". Ścież­ka z literą dysku, na przy­kład C:/style/styl.css, działa tylko na jednym kom­pu­te­rze i po wy­sła­niu wi­try­ny na serwer prze­sta­je co­kol­wiek zna­czyć.
Sposób
Gdzie stoi
Kiedy się go używa
ze­wnętrz­ny
osobny plik .css, do­łą­czo­ny przez <link> w <head>
zawsze na eg­za­mi­nie prak­tycz­nym i w każdej wie­lo­stro­ni­co­wej wi­try­nie
we­wnętrz­ny
znacz­nik <style> w <head>
jedna strona z wła­snym wy­glą­dem, szybki test reguły
lo­kal­ny
atry­but style w znacz­ni­ku ele­men­tu
po­je­dyn­czy wy­ją­tek, w prak­ty­ce prawie nigdy
@import
po­czą­tek ar­ku­sza CSS albo bloku <style>
po­dzie­le­nie dużego ar­ku­sza na mniej­sze pliki

Ka­ska­da: która reguła wy­gry­wa

Ka­ska­da to zestaw zasad roz­strzy­ga­ją­cych, która z kilku reguł opi­su­ją­cych tę samą wła­ści­wość tego samego ele­men­tu zo­sta­nie użyta. Nazwa bierze się stąd, że reguły spły­wa­ją z kilku źródeł naraz i na­kła­da­ją się na siebie war­stwa­mi, a ele­ment bierze z każdej war­stwy to, czego nie dostał wyżej.
Ta sama reguła color dla h1 w trzech miejscach: wygrywa styl lokalny, a niżej drabinka specyficzności od selektora elementu po regułę !important
Źródła są trzy: naj­słab­sze są do­myśl­ne style prze­glą­dar­ki (dzięki nim <h1> bez żad­ne­go CSS i tak jest duży oraz po­gru­bio­ny), nad nimi stoją usta­wie­nia użyt­kow­ni­ka w prze­glą­dar­ce, a naj­wy­żej reguły autora strony, czyli twój arkusz. We­wnątrz ar­ku­sza autora roz­strzy­ga się w trzech kro­kach: naj­pierw !important, potem spe­cy­ficz­ność se­lek­to­ra, a na końcu ko­lej­ność zapisu.
p { color: DarkSlateGray; } p { color: Tomato; }
Oba se­lek­to­ry są jed­na­ko­wo silne, więc aka­pi­ty będą po­ma­rań­czo­we: przy równej sile wy­gry­wa reguła póź­niej­sza. Styl lo­kal­ny bije oba ar­ku­sze, bo stoi przy samym ele­men­cie i nie da się go prze­bić żadnym zwy­kłym se­lek­to­rem. Między ar­ku­szem ze­wnętrz­nym a we­wnętrz­nym nie ma za to stałej hie­rar­chii: przy równej spe­cy­ficz­no­ści de­cy­du­je ko­lej­ność w <head>, a po­nie­waż <style> stawia się zwykle pod <link>, arkusz we­wnętrz­ny w prak­ty­ce nad­pi­su­je ze­wnętrz­ny i tak wła­śnie od­po­wia­da się w teście.
De­kla­ra­cja z do­pi­skiem !important (ważne) przed śred­ni­kiem wy­cho­dzi ponad wszyst­ko inne, łącz­nie ze stylem lo­kal­nym. W za­da­niu prak­tycz­nym nie jest po­trzeb­na ani razu i utrud­nia póź­niej­sze po­praw­ki, bo prze­bi­ja ją tylko ko­lej­ny !important. Py­ta­nie te­sto­we o nią brzmi zawsze tak samo: roz­bu­do­wa­ny system stylów ze­wnętrz­nych, we­wnętrz­nych i lo­kal­nych, a cecha opi­sa­na w ar­ku­szu ze­wnętrz­nym ma po­zo­stać nie­na­ru­szo­na.
Dzie­dzi­cze­nie to przej­mo­wa­nie war­to­ści wła­ści­wo­ści od ele­men­tu nad­rzęd­ne­go. Dzie­dzi­czą się wła­ści­wo­ści tekstu: color, font-family, font-size, line-height, text-align, więc krój usta­wio­ny raz na body obo­wią­zu­je w całym do­ku­men­cie. Nie dzie­dzi­czą się wła­ści­wo­ści pu­deł­ka: margin, padding, border, background-color, width. War­tość inherit (odzie­dzicz) wy­mu­sza prze­ję­cie war­to­ści od ro­dzi­ca tam, gdzie samo z siebie nie za­cho­dzi.
Pu­łap­ka: dzie­dzi­cze­nie i ka­ska­da to nie to samo. Ka­ska­da wy­bie­ra zwy­cięz­cę spo­śród reguł dla TEGO ele­men­tu, dzie­dzi­cze­nie działa do­pie­ro wtedy, gdy żadnej takiej reguły nie ma.

Spe­cy­ficz­ność se­lek­to­ra

Spe­cy­ficz­ność to licz­bo­wa miara siły se­lek­to­ra, za­pi­sy­wa­na jako trójka liczb. Pierw­sza to liczba iden­ty­fi­ka­to­rów w se­lek­to­rze, druga to liczba klas, pseu­do­klas i se­lek­to­rów atry­bu­tu, trze­cia to liczba se­lek­to­rów ele­men­tów i pseu­do­ele­men­tów. Trójki po­rów­nu­je się od lewej: je­dyn­ka w lewej ko­lum­nie prze­bi­ja do­wol­ną war­tość w ko­lum­nach na prawo.
Se­lek­tor
Spe­cy­ficz­ność
*
0,0,0
p
0,0,1
nav ul li a
0,0,4
.tytul
0,1,0
p.uwaga
0,1,1
#baner
1,0,0
#menu a
1,0,1
Stąd wnio­sek, który myli naj­czę­ściej: #menu a wy­gry­wa z nav ul li a, choć jest krót­szy. Cztery nazwy znacz­ni­ków dają 0,0,4 i prze­gry­wa­ją z jednym iden­ty­fi­ka­to­rem, bo 1 z pierw­szej ko­lum­ny bije każdą liczbę z trze­ciej. Se­lek­tor uni­wer­sal­ny * ma zero we wszyst­kich trzech po­zy­cjach i prze­gry­wa z każdym innym se­lek­to­rem, więc obej­mu­je wpraw­dzie cały do­ku­ment, ale nadaje się wy­łącz­nie na for­ma­to­wa­nie do­myśl­ne, nad­pi­sy­wa­ne póź­niej re­gu­ła­mi szcze­gó­ło­wy­mi. Styl lo­kal­ny stoi ponad całą tą dra­bin­ką, a !important ponad stylem lo­kal­nym.

Arkusz sklepu na start

Cały dział sty­lu­je tę samą stronę sklepu kom­pu­te­ro­we­go, którą zbu­do­wa­ła lekcja o znacz­ni­kach sekcji: baner header, menu nav, panel boczny aside, blok main i stopka footer. Pierw­sze reguły tra­fia­ją do pliku styl.css le­żą­ce­go obok index.html i do­łą­czo­ne­go jednym <link>.
body { background-color: #f4f4f4; color: #222; font-family: Helvetica; } header { background-color: DarkSlateGray; color: #f4f4f4; } h1 { font-size: 150%; text-align: center; }
Reguła dla body usta­wia tło i krój czcion­ki dla całego do­ku­men­tu, a dwie ko­lej­ne tylko po­pra­wia­ją to, co ele­men­ty odzie­dzi­czy­ły: baner do­sta­je ciemne tło, więc po­trze­bu­je ja­sne­go tekstu, a na­głó­wek zo­sta­je przy odzie­dzi­czo­nym kroju i zmie­nia sam roz­miar oraz wy­rów­na­nie. Kolory podaje się nazwą CSS (Tomato, DarkSlateGray) albo szes­nast­ko­wo (#f4f4f4), bo obie formy stoją w po­le­ce­niach ar­ku­szy CKE. Który zapis osta­tecz­nie wygrał, widać w na­rzę­dziach de­we­lo­per­skich prze­glą­dar­ki (kla­wisz F12): panel ze sty­la­mi wy­pi­su­je reguły od naj­sil­niej­szej, a de­kla­ra­cje prze­kre­ślo­ne to te, które prze­gra­ły ka­ska­dę.

Na eg­za­mi­nie

Py­ta­nia pi­sem­ne o do­łą­cza­nie stylów mają kilka sta­łych kształ­tów. Pierw­szy to prio­ry­tet: naj­wyż­szy ma styl lo­kal­ny, a pra­wi­dło­wa ko­lej­ność od naj­sil­niej­sze­go brzmi lo­kal­ny, we­wnętrz­ny, ze­wnętrz­ny. Drugi to po­praw­ny zapis do­łą­cze­nia ar­ku­sza ze­wnętrz­ne­go, gdzie wśród od­po­wie­dzi z <meta>, <div> i <option> pra­wi­dło­wy jest <link rel="stylesheet" type="text/css" href="styl.css">, a w innym wa­rian­cie py­ta­nia trzeba wska­zać sam znacz­nik <link> za­miast <style>, <meta> albo nie­ist­nie­ją­ce­go <css>. Trzeci do­ty­czy stylu we­wnętrz­ne­go: umiesz­cza się go w części na­głów­ko­wej do­ku­men­tu, znacz­ni­kiem <style>. Czwar­ty to !important jako sposób na to, by cecha z roz­bu­do­wa­ne­go sys­te­mu stylów zo­sta­ła za­cho­wa­na. Piąty pyta o po­le­ce­nie za­łą­cza­ją­ce arkusz we­wnątrz CSS i wśród od­po­wie­dzi open, require oraz include pra­wi­dło­wa jest import. Szósty do­ty­czy se­lek­to­ra uni­wer­sal­ne­go *: for­ma­to­wa­nie nim za­pi­sa­ne obej­mu­je cały do­ku­ment HTML jako usta­wie­nie do­myśl­ne, które póź­niej­sze reguły mogą nad­pi­sać. Wraca też ścież­ka względ­na do pliku CSS oraz sym­bo­le se­lek­to­rów, gdzie klasa to kropka, a iden­ty­fi­ka­tor krzy­żyk.
W za­da­niu prak­tycz­nym pierw­szą czyn­no­ścią po zbu­do­wa­niu strony jest utwo­rze­nie pliku CSS o nazwie po­da­nej w ar­ku­szu, znak w znak, razem z pod­kre­śle­niem i cyfrą, na przy­kład styl_1.css, i do­łą­cze­nie go przez <link> w części na­głów­ko­wej. Nazwa z li­te­rów­ką znaczy, że eg­za­mi­na­tor otwo­rzy stronę bez stylów. Styl lo­kal­ny w atry­bu­cie style nie jest błędem skła­dnio­wym, ale nie speł­nia po­le­ce­nia „styl CSS wi­try­ny in­ter­ne­to­wej za­pi­sa­ny w ze­wnętrz­nym pliku", więc re­zul­tat prze­pa­da. Zdanie „for­ma­to­wa­nie wy­łącz­nie przy pomocy se­lek­to­ra dla danego znacz­ni­ka" ozna­cza se­lek­to­ry takie jak header, nav, h1 czy td, bez klas i bez iden­ty­fi­ka­to­rów, więc do­pi­sa­nie class="baner" od­bie­ra punkt, choć strona wy­glą­da po­praw­nie.

Ściąga

Sposób albo se­lek­tor
Zapis
Siła
arkusz ze­wnętrz­ny
<link rel="stylesheet" href="styl.css">
naj­słab­szy z trzech, w <head>
do­kle­je­nie ar­ku­sza
@import url("kolory.css");
jak arkusz, w którym stoi
arkusz we­wnętrz­ny
<style> w <head>
bije ze­wnętrz­ny, gdy stoi za nim
styl lo­kal­ny
style="color: Tomato;"
bije oba ar­ku­sze
wy­mu­sze­nie
color: Tomato !important;
bije wszyst­ko
se­lek­tor uni­wer­sal­ny
* { }
0,0,0, cały do­ku­ment
se­lek­tor ele­men­tu
h1 { }
0,0,1
se­lek­tor klasy
.tytul { }
0,1,0
se­lek­tor iden­ty­fi­ka­to­ra
#baner { }
1,0,0
Pobierz ściągę PDF

[ W TYM DZIALE ]

poprzednia: CSS na egzaminie INF.03następna: Selektory CSS: element, klasa, id, atrybut, potomek, dziecko, bratspis działu: CSS

[ INF.03: INNE ARTYKUŁY ]

Hub INF.03Zakres materiałuBazy danych i SQL na egzaminie INF.03CSS na egzaminie INF.03Formularze HTML na egzaminie INF.03Grafika i multimedia na egzaminie INF.03HTML na egzaminie INF.03pokaż więcej (39)
ZAWODNIK
egzamin zawodowy INF.02 · INF.03 · INF.04
Serwer Discord›
Egzaminy zawodowe IT/Matury/Studia
@yastor
Polityka prywatnościRegulamin
© 2026 Zawodnik · by Yastor
Arkusze i zasady oceniania pochodzą z CKE. Serwis nie jest powiązany z Centralną Komisją Egzaminacyjną.