Przez Kasia Furtak w JavaScript — 28 lis 2025

CSS

CSS - "Cascading Style Sheets", czyli kaskadowe arkusze stylów.
CSS służy do kontrolowania wyglądu (kolory, czcionki, rozmieszczenie elementów, proste animacje, etc). Umożliwia niezależną modyfickację wyglądu strony bez zmiany samej struktury opisanej w HTML. To oznacza, ze zdefiniowane style mogą być używane do wielu elementów.

CSS (Cascading Style Sheets) to język służący do opisu sposobu, w jaki elementy HTML mają być wyświetlane przez przeglądarkę internetową. Podczas gdy HTML odpowiada za strukturę i treść strony, CSS definiuje jej wygląd, w tym kolory, czcionki, marginesy, pozycjonowanie i układ. Istnieją trzy główne metody dodawania kodu CSS do dokumentu HTML:

Zewnętrzny arkusz stylów (External CSS): Jest to najbardziej zalecana metoda, polegająca na przechowywaniu wszystkich reguł CSS w osobnym pliku z rozszerzeniem .css. Plik ten jest następnie łączony z dokumentem HTML za pomocą elementu <link> umieszczonego w sekcji <head>.
- Zalety: Umożliwia centralne zarządzanie wyglądem wielu stron internetowych z jednego miejsca, co ułatwia modyfikacje i konserwację.
Wewnętrzny arkusz stylów (Internal CSS): Style są definiowane bezpośrednio w dokumencie HTML, wewnątrz elementu <style> umieszczonego w sekcji <head>.
- Zalety: Przydatny, gdy style dotyczą tylko jednej konkretnej strony i nie są używane w innych miejscach serwisu.
Style wbudowane (Inline CSS): Styl jest dodawany bezpośrednio do pojedynczego elementu HTML za pomocą atrybutu style.
- Zalety: Stosowany do szybkiej zmiany stylu pojedynczego elementu.
- Wady: Sprawia, że kod HTML staje się mniej czytelny i trudniejszy w zarządzaniu, ponieważ styl jest wymieszany ze strukturą.

Przykład:html

<h1 style="color:blue; text-align:center;">To jest nagłówek</h1>

Use code with caution.

Przykład:html

<head>
  <style>
    body {
      background-color: lightblue;
    }
    h1 {
      color: blue;
    }
  </style>
</head>

Przykład: W pliku index.html

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

W pliku style.css:css

body {
  background-color: lightblue;
}
h1 {
  color: blue;
}

Najlepszą praktyką, zapewniającą czystość kodu i łatwość konserwacji, jest użycie zewnętrznego arkusza stylów

Jak style sa interpretowane i jaka jest ich waznosc?
Najważniejszy styl jaki jest to Inline!
Właściwości są dziedziczone w kaskadowy sposób.
UWAGA - W CSS JEST INNY STYL KOMENTARZA!!! /*...*/

SELEKTORY W CSS
Podstawowe selektory CSS służą do wskazywania konkretnych elementów HTML, które mają zostać ostylowane. Można je podzielić na kilka głównych typów:

Selektor typu (elementu): wybiera wszystkie elementy danego typu HTML, np. wszystkie akapity (p) lub nagłówki (h1).
- Przykład: p { color: blue; } ostyluje wszystkie elementy <p> na niebiesko.
Selektor klasy (ang. class selector): wybiera elementy, które mają przypisaną określoną klasę (atrybut class). Selektor ten jest oznaczany kropką (.) przed nazwą klasy.
- Przykład: .intro { font-size: 16px; } ustawi czcionkę o rozmiarze 16px dla wszystkich elementów z klasą intro.
Selektor identyfikatora (ang. ID selector): wybiera konkretny, unikalny element z określonym identyfikatorem (atrybut id). Identyfikator powinien być unikalny na danej stronie HTML. Selektor ten jest oznaczany znakiem krzyżyka (#) przed nazwą identyfikatora.
- Przykład: #firstname { background-color: yellow; } ustawi żółte tło dla elementu o identyfikatorze firstname.
Selektor uniwersalny (ang. universal selector): wybiera wszystkie elementy na stronie. Oznaczany jest gwiazdką (*).
- Przykład: * { margin: 0; } usunie domyślne marginesy ze wszystkich elementów.
Selektor grupowy (ang. group selector): pozwala zgrupować wiele selektorów i zastosować do nich te same style. Selektory w grupie są oddzielone przecinkami (,).
- Przykład: h1, h2, p { font-family: sans-serif; } ustawi czcionkę bezszeryfową dla nagłówków h1, h2 i akapitów p.

*{} Universal selector --> dotyka absolutnie wszystkiego!

"Resetowanie" pliku CSS:

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

Pseudoklasy, przykłady
:hover

CSS CHEAT SHEET

FONTY W CSS

Stylizowanie fontów (czcionek) w CSS obejmuje kilka kluczowych właściwości. Oto najważniejsze z nich wraz z przykładami użycia:

1. Rodzina fontów (font-family)Ta właściwość określa, która czcionka powinna zostać użyta. Zawsze podawaj listę alternatywnych czcionek (tzw. "stos czcionek" lub "font stack") na wypadek, gdyby pierwsza nie była dostępna w systemie użytkownika. Ostatnia pozycja powinna być nazwą generycznej rodziny (np. serif, sans-serif, monospace).css

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

h1 {
  font-family: Georgia, serif;
}

2. Rozmiar fontu (font-size)Określa wielkość tekstu. Możesz używać różnych jednostek, najpopularniejsze to piksele (px), względne jednostki em lub rem, czy też procenty (%).css

p {
  font-size: 16px; /* Dokładny rozmiar */
}

h2 {
  font-size: 2em; /* 2 razy większy niż domyślny rozmiar rodzica */
}

3. Waga (grubość) fontu (font-weight)Kontroluje grubość liter. Można używać słów kluczowych (normal, bold) lub wartości numerycznych od 100 do 900 (gdzie 400 to normal, a 700 to bold).css

.cienki-tekst {
  font-weight: 300; /* Cienka czcionka (jeśli dostępna w pliku fontu) */
}

.pogrubiony {
  font-weight: bold; /* Pogrubiony tekst */
}

4. Styl fontu (font-style)Służy do ustawiania tekstu jako kursywy (pochyłego).css

.kursywa {
  font-style: italic; /* Tekst pochylony */
}

.normalny {
  font-style: normal; /* Resetuje styl na normalny */
}

5. Kolor fontu (color)Mimo że technicznie nie jest to właściwość z grupy font-*, jest niezbędna do stylizacji wyglądu tekstu.css

p {
  color: #333; /* Ciemnoszary kolor */
}

.error {
  color: red;
}

6. Wariant fontu (font-variant)Używana głównie do formatowania tekstu jako kapitalików (małe litery wyglądają jak zmniejszone duże litery).

css

h3 {
  font-variant: small-caps;
}

7. Skrócony zapis (font)Możesz połączyć wiele z powyższych właściwości w jednym, skróconym zapisie font, co jest bardzo wygodne. Wymagana kolejność to: font-style, font-variant, font-weight, font-size/line-height, font-family.css

/* Styl, waga, rozmiar, rodzina */
p.skrot {
  font: italic bold 14px "Roboto", sans-serif;
}

/* Można też dodać wysokość linii (line-height) po ukośniku przy rozmiarze fontu */
.duzy-akapit {
  font: normal 1.2em/1.5 Georgia, serif;
  /* Rozmiar 1.2em, wysokość linii 1.5 (bez jednostki, względna) */
}

Przykład kompleksowy w arkuszu stylówcss

body {
  font-family: sans-serif;
  color: #444;
  line-height: 1.5; /* Poprawia czytelność tekstu */
}

h1 {
  font: bold 2.5em Georgia, serif;
  color: #000;
  text-transform: uppercase; /* Dodatkowy efekt: zamiana na wielkie litery */
}

EM I REM

Jednostki em i rem w CSS to jednostki względne oparte na rozmiarze czcionki, ale różnią się źródłem bazowym. em zależy od rozmiaru czcionki najbliższego elementu nadrzędnego, co tworzy skalowalną zależność dziedziczną, a rem (root em) zawsze odnosi się do rozmiaru czcionki elementu <html> (elementu głównego), niezależnie od zagnieżdżenia. Dzięki temu rem ułatwia zarządzanie układem strony i zapewnia spójność skalowania, podczas gdy em pozwala na bardziej precyzyjne, kontekstowe dostosowanie rozmiarów. Jednostka em

Działanie: Wartość em jest wielkością czcionki elementu nadrzędnego.
Przykładowe użycie: font-size: 1.2em; sprawi, że rozmiar czcionki będzie 1,2 raza większy niż czcionka rodzica.
Zalety: Pozwala na tworzenie hierarchicznych skalowalnych typografii, gdzie zmiana rozmiaru rodzica wpływa na wszystkie jego dzieci.
Wady: Może prowadzić do „zagnieżdżonego” skalowania, gdzie wartość em jest wielokrotnie mnożona w głąb zagnieżdżonych elementów, co utrudnia przewidywanie ostatecznych rozmiarów.

Jednostka rem

Działanie: rem oznacza „root em”. Wartość jest zawsze obliczana na podstawie rozmiaru czcionki elementu <html> (korzenia dokumentu).
Przykładowe użycie: font-size: 2rem; sprawi, że rozmiar czcionki będzie dwa razy większy niż domyślny rozmiar czcionki elementu <html> (zwykle 16px).
Zalety: Zapewnia spójność skalowania na całej stronie, ponieważ wszystkie elementy rem są proporcjonalne do jednego, bazowego rozmiaru czcionki. Ułatwia tworzenie responsywnych układów, ponieważ zmiana bazowego rozmiaru czcionki w elementach <html> automatycznie dostosuje wszystkie inne wymiary zdefiniowane w rem.
Wady: Jest mniej elastyczna przy tworzeniu złożonych, kontekstowych układów w porównaniu do em.

Podsumowanie

Użyj em, gdy chcesz, aby rozmiar elementu skalował się proporcjonalnie do rozmiaru czcionki jego bezpośredniego rodzica, tworząc hierarchiczny układ.
Użyj rem, gdy chcesz skalować wszystkie elementy strony w oparciu o jedną, spójną wartość bazową (rozmiar czcionki elementu <html>), co jest idealne do globalnego skalowania i tworzenia responsywnych interfejsów.

PRZYKŁADOWE WŁAŚCIWOŚCI CSS

Właściwości Typograficzne (Tekst i Czcionki)

color: Ustawia kolor tekstu.
font-family: Określa rodzaj czcionki.
font-size: Ustawia rozmiar tekstu.
font-weight: Definiuje grubość (wagę) czcionki, np. pogrubienie.
text-align: Wyrównuje tekst (do lewej, prawej, do środka, wyjustowany).
text-decoration: Dodaje dekoracje, takie jak podkreślenie czy przekreślenie.
line-height: Określa odstęp między wierszami.

Właściwości Tła

background-color: Ustawia kolor tła elementu.
background-image: Definiuje obraz tła.
background-repeat: Kontroluje powtarzanie obrazu tła.
background-size: Określa rozmiar obrazu tła.

Właściwości Modelu Pudełkowego (Box Model)

margin: Definiuje zewnętrzny margines (przestrzeń na zewnątrz elementu).
padding: Określa wewnętrzny margines (przestrzeń wewnątrz elementu, między treścią a obramowaniem).
border: Ustawia obramowanie elementu (skrót dla szerokości, stylu i koloru).
width / height: Określa szerokość i wysokość elementu.
box-sizing: Kontroluje sposób obliczania całkowitej szerokości i wysokości elementu.

Właściwości Układu (Layout)

display: Kontroluje sposób renderowania elementu (np. block, inline, flex, grid).
position: Określa metodę pozycjonowania elementu (np. static, relative, absolute, fixed).
float: Ustawia opływanie elementu przez inne elementy.
flexbox (np. justify-content, align-items) i CSS Grid (np. grid-template-columns): Zaawansowane systemy układu strony.

Inne Ważne Właściwości

opacity: Ustawia przezroczystość elementu.
z-index: Określa kolejność nakładania się (warstw) elementów pozycjonowanych.
transition: Umożliwia płynne przejścia między stanami CSS.
animation: Definiuje animacje CSS.

CSS

CSS CHEAT SHEET

EM I REM

HTML: Formularze

JavaScript podstawy

CSS CHEAT SHEET

EM I REM

HTML: Formularze

JavaScript podstawy

To też może cię zaciekawić...