← Lekcje
CSS · lekcja 01

Wprowadzenie do CSS

Kaskadowe arkusze stylów: jak wygląda strona, nie co na niej jest

  1. Czym jest CSS i jak wygląda pojedyncza reguła?
  2. Trzy sposoby dołączenia stylów do HTML
  3. Dlaczego zewnętrzny plik jest najlepszym wyborem?
  4. Ćwiczenie: pierwszy plik style.css podłączony do Waszej strony
Rozgrzewka · 3 minuty

Trzy pytania z HTML

Zanim dołożymy wygląd, wracamy do tego, co już opisuje Wasza strona.

  1. Czym różni się head od body?
  2. Co wpisujecie w atrybucie href znacznika a?
  3. Po co znacznik img ma atrybut alt?
MDN: developer.mozilla.org/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax · .../Creating_links · .../HTML_images
Część 1 · czym jest CSS

Czym jest CSS?

CSS to skrót od Cascading Style Sheets, po polsku „kaskadowe arkusze stylów”. Do tej pory HTML (Wasze pliki index.html i inne) opisywał tylko treść i strukturę strony: nagłówki, akapity, listy, łącza. CSS mówi przeglądarce, jak to ma wyglądać: jaki kolor, jaka czcionka, gdzie co stoi.

HTML: szkielet i treść → CSS: kolor i wykończenie

Ten sam dom, ta sama konstrukcja: różnica to tylko farba, dach i okna, czyli CSS.

MDN: „CSS (Cascading Style Sheets) allows you to create great-looking web pages” · developer.mozilla.org/docs/Learn_web_development/Core/Styling_basics/What_is_CSS
Część 2 · reguła CSS

Anatomia reguły CSS

Reguła CSS mówi: „ten element” (selektor), „ma taką cechę” (właściwość), „o takiej wartości”. Całość zamykacie w klamrach; każdą deklarację kończycie średnikiem.

h1 { color : red ; } selektor klamra właściwość dwukropek wartość średnik klamra Razem: jedna reguła CSS

Klamry { } tworzą blok deklaracji, dwukropek dzieli właściwość od wartości, średnik kończy deklarację. Tu jest jedna deklaracja; w prawdziwym CSS zwykle jest ich kilka, jedna pod drugą.

MDN: „the CSS rule opens with a selector… We then include a set of curly braces to create a declaration block. The declaration block contains one or more declarations, which take the form of property and value pairs” · developer.mozilla.org/docs/Learn_web_development/Core/Styling_basics/What_is_CSS
Część 3 · trzy sposoby dołączenia

Trzy sposoby dołączenia stylów

Style można zapisać w trzech miejscach. Każdy sposób robi to samo: ustawia wygląd. Różni się tylko tym, gdzie ten kod stoi i ile stron obejmuje.

style="" styl wbudowany atrybut na jednym elemencie działa tylko tam <style> w <head> styl wewnętrzny jeden blok w tym dokumencie działa na całą tę stronę <link href="style.css"> styl zewnętrzny osobny plik .css można podłączyć do wielu stron tego dziś używamy

Ciekawostka z Wikipedii: CSS zaproponował Håkon Wium Lie 10 października 1994 roku, pracując z Timem Bernersem-Lee w CERN. Zanim powstał CSS, wygląd strony zapisywano wprost w kodzie HTML, co utrudniało zmiany. Pierwszy oficjalny standard, CSS1, W3C wydało w 1996 roku.

MDN: „Inline styles are CSS declarations that affect a single HTML element” · „Internal stylesheets are contained within <style> elements” · „An external stylesheet contains CSS in a separate file… This is the most common and useful method” · developer.mozilla.org/docs/Learn_web_development/Core/Styling_basics/Getting_started · ciekawostka: en.wikipedia.org/wiki/CSS
Część 4 · dlaczego zewnętrzny plik

Dlaczego zewnętrzny plik wygrywa?

Jeden plik style.css można podłączyć do wielu stron naraz: index.html, contact.html, wszystkich podstron. Zmieniacie kolor raz, w jednym pliku, a zmienia się wszędzie. Przy stylu wbudowanym i wewnętrznym musielibyście poprawiać każdą stronę osobno.

<head>
  <title>Moja strona</title>
  <link rel="stylesheet" href="style.css">
</head>

To ten sam znacznik, który za chwilę wpiszecie w swoim pliku index.html.

MDN: „This is the most common and useful method of bringing CSS to a document. You can link a single CSS file to multiple web pages, styling all of them with the same CSS stylesheet” · developer.mozilla.org/docs/Learn_web_development/Core/Styling_basics/Getting_started
CSS · egzamin

Tak pytają na egzaminie

1. Aby dołączyć kaskadowy arkusz stylów zapisany w zewnętrznym pliku, należy użyć następującego fragmentu kodu HTML

  1. <meta charset="styl.css" />
  2. <div id="styl.css" relation="css" />
  3. <option value="styl.css" type="text/css" />
  4. <link rel="stylesheet" type="text/css" href="styl.css" />

2. Jak nazywa się metoda dołączania arkusza stylów do dokumentu HTML użyta w przedstawionym kodzie?

<p style="color: red;">tekst paragrafu</p>

  1. Styl zewnętrzny.
  2. Styl wewnętrzny.
  3. Styl wpisany, lokalny.
  4. Styl alternatywny, zewnętrzny.
CKE, E.14 czerwiec 2020, zad. 5 · CKE, E.14 czerwiec 2019, zad. 9
Ćwiczenie · przy komputerze · 15 minut

Ćwiczenie: pierwszy plik CSS

  1. Nowy plik style.css w tym samym folderze co index.html.
  2. W index.html, w <head>, dopisz: <link rel="stylesheet" href="style.css">.
  3. W style.css napisz jedną regułę: body { background-color: lightblue; } (kolor po angielsku, dowolny).
  4. Zapisz oba pliki, F5 w przeglądarce: tło strony ma zmienić kolor.

Ma się pojawić: kolorowe tło całej strony. Ctrl+U pokaże link w head; samego pliku style.css tam nie widać, bo to osobny plik.

Pytania kontrolne

Trzy pytania na koniec

  1. Co robi znacznik link w head?
  2. Czym różni się styl wewnętrzny od zewnętrznego?
  3. Z jakich elementów zawsze składa się reguła CSS?

To tyle na dziś: na następnej lekcji selektory i to, kto wygrywa, gdy style się kłócą.

Z realnych wdrożeń

A jak to wygląda w produkcji?

Na lekcjiW produkcjiStatus
Jedna reguła, jeden plik style.cssW dużych projektach dziesiątki plików CSS, dzielonych tematycznie i łączonych narzędziami przed wysłaniem do przeglądarki.rozbudowane
Styl wbudowany style="" do testuW produkcji stylu wbudowanego unika się niemal zawsze: trudno go zmienić, a nadpisuje inne reguły.unikane
Ręcznie pisane reguły CSSFramework Bootstrap (gotowe klasy zamiast własnych reguł) jest używany przez 13,6% wszystkich stron; to 74,8% wśród stron korzystających z jakiegoś frameworka CSS.narzędzia
Styl wewnętrzny <style>Bywa używany do jednorazowych poprawek (np. e-mail w HTML), rzadko na dużych stronach.ograniczone zastosowanie
w3techs.com/technologies/overview/css_framework (Bootstrap, wrzesień 2026)