CSS od podstaw — w stronę INF.03

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <title>Test</title>
  <style>
    h1 {
      color: teal;
    }
  </style>
</head>
<body>
  <h1>Cześć!</h1>
</body>
</html>

SPOSÓB 2 — CSS ZEWNĘTRZNY (INF.03)

To ten sposób stosujemy w kursie i na egzaminie — style trzymamy w osobnym pliku .css, a stronę tylko do niego podłączamy.

<!-- index.html -->
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Cześć!</h1>
</body>

A plik CSS wygląda tak (bez żadnych tagów HTML):

/* style.css */
h1 {
  color: teal;
}

Zasada: index.html + style.css + script.js w jednym folderze. Link do CSS zawsze w <head>.

<div class="karta">Pierwsza karta</div>
<div class="karta">Druga karta</div>

.karta {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 16px;
}

TWOJE ZADANIE — ID

Nadaj jednemu, wybranemu elementowi atrybut id="glowny-naglowek" (id musi być unikalny — tylko jeden element na stronie może go mieć). W CSS napisz selektor #glowny-naglowek, który ustawi mu inny kolor tła niż pozostałym nagłówkom.

<div class="karta wyrozniona">Karta wyróżniona</div>

.karta {
  border: 1px solid #ccc;
  padding: 16px;
}

.wyrozniona {
  border-color: #E8A33D;
  background: #2a2213;
}

TWOJE ZADANIE

Do przycisku dodaj dwie klasy naraz: .przycisk (wspólny wygląd — padding, border-radius) oraz .niebezpieczny (czerwone tło, biały tekst — tylko dla przycisków usuwania). Sprawdź w przeglądarce, że efekty obu klas się łączą na jednym elemencie.

p {
  color: navy;
}

TWOJE ZADANIE

Zaznacz wszystkie nagłówki <h2> i ustaw im zielony kolor tekstu.

<p class="ostrzezenie">Uwaga!</p>

.ostrzezenie {
  background-color: red;
  color: white;
  padding: 10px;
}

TWOJE ZADANIE

Utwórz klasę .sukces z zielonym tłem i białym tekstem. Zastosuj ją do diva z tekstem „Zapisano!”.

<div id="naglowek">Tytuł strony</div>

#naglowek {
  background-color: #e0e0e0;
  text-align: center;
  padding: 20px;
}

TWOJE ZADANIE

Nadaj elementowi o id="stopka" ciemne tło (#222) i biały kolor tekstu.

<div class="karta">
  <a href="#">Link w karcie</a>
</div>
<a href="#">Link poza kartą</a>

.karta a {
  color: orange;
}

TWOJE ZADANIE

Za pomocą selektora potomka pokoloruj na biało wszystkie linki wewnątrz elementu <nav>, bez wpływu na linki poza nawigacją.

<div class="pudelko">Treść</div>

.pudelko {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 2px solid black;
}

TWOJE ZADANIE

Stwórz pudełko 150×150 px z wewnętrznym odstępem 10px i czerwonym obramowaniem 3px.

.pudelko {
  margin: 30px;
}

TWOJE ZADANIE

Ustaw różne marginesy z każdej strony innego pudełka: górny 10px, prawy 20px, dolny 10px, lewy 20px (podpowiedź: cztery osobne właściwości albo skrót margin: góra prawo dół lewo;).

<div class="content-box">content-box</div>
<div class="border-box">border-box</div>

.content-box {
  box-sizing: content-box;
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  /* rzeczywista szerokość = 200 + 2*20 + 2*5 = 250px */
}

.border-box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  /* rzeczywista szerokość = 200px — padding i border mieszczą się w środku */
}

TWOJE ZADANIE

Ustaw regułę * { box-sizing: border-box; } na całej stronie. W komentarzu w CSS zapisz własnymi słowami, dlaczego ta reguła jest tak często stosowana na początku projektu.

.a { background-color: red; }
.b { background-color: #ff0000; }
.c { background-color: rgb(255, 0, 0); }

TWOJE ZADANIE

Ustaw kolor tekstu na półprzezroczysty czarny za pomocą rgba(0, 0, 0, 0.5). W komentarzu opisz, czym różni się to od zwykłego color: black;.

<div class="rodzic">
  Rodzic (20px)
  <span class="em-dziecko">Tekst 1.5em</span>
  <span class="rem-dziecko">Tekst 1.5rem</span>
</div>

.rodzic { font-size: 20px; }
.em-dziecko { font-size: 1.5em; }   /* 1.5 * 20px = 30px */
.rem-dziecko { font-size: 1.5rem; } /* 1.5 * 16px (html) = 24px */

TWOJE ZADANIE

Zagnieźdź trzy divy jeden w drugim, każdemu ustaw font-size: 1.2em. Sprawdź w przeglądarce, jak rozmiar tekstu „mnoży się” z każdym kolejnym poziomem zagnieżdżenia — i zanotuj obserwację w komentarzu.

p {
  font-family: 'Georgia', serif;
  font-size: 18px;
  line-height: 1.6;
  font-weight: 400;
}

TWOJE ZADANIE

Ustaw nagłówkowi <h1> czcionkę bezszeryfową (np. 'Arial', sans-serif), rozmiar 32px, grubość 700 i interlinię 1.2.

.baner {
  background-image: url("tlo.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 300px;
}

TWOJE ZADANIE

Ustaw divowi tło w postaci drobnego, powtarzającego się wzoru (background-repeat: repeat), z dowolnym adresem obrazka.

.karta {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

TWOJE ZADANIE

Zrób przycisk w pełni zaokrąglony (kształt „pigułki”, np. border-radius: 999px), z mocniejszym cieniem pojawiającym się po najechaniu myszką (:hover).

.zakladka {
  border-bottom: 3px solid #4FD1C5;
  padding-bottom: 8px;
}

TWOJE ZADANIE

Zrób element z obramowaniem tylko z lewej strony (border-left), grubości 4px, symulujący wygląd cytatu (blockquote).

.przesuniety {
  position: relative;
  top: 20px;
  left: 10px;
}

TWOJE ZADANIE

Przesuń element o 15px w górę i 30px w lewo względem jego normalnej pozycji.

<div class="karta">
  <span class="odznaka">Nowe</span>
  Treść karty
</div>

.karta {
  position: relative;
}

.odznaka {
  position: absolute;
  top: 8px;
  right: 8px;
  background: red;
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
}

TWOJE ZADANIE

Umieść ikonkę zamknięcia „✕” w lewym górnym rogu okna modalnego (.modal, z position: relative), za pomocą position: absolute.

.pasek-nawigacji {
  position: sticky;
  top: 0;
  background: white;
  z-index: 100;
}

TWOJE ZADANIE

Zrób nagłówek długiej tabeli, który pozostaje widoczny na górze podczas przewijania listy w dół (podpowiedź: position: sticky na elemencie <thead> lub jego komórkach).

.kontener {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

TWOJE ZADANIE

Rozłóż cztery elementy w rzędzie, wyśrodkowane poziomo (justify-content: center), z odstępem 16px między nimi (gap).

.kontener {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

TWOJE ZADANIE

Tą samą metodą wyśrodkuj kartę logowania (formularz) na całej wysokości ekranu (height: 100vh).

.galeria {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.galeria img {
  width: 150px;
}

TWOJE ZADANIE

Zbuduj pasek nawigacji z wieloma linkami ułożonymi w rzędzie, które przy węższym oknie mają zawijać się do kolejnych wierszy zamiast wychodzić poza ekran.

.przycisk {
  background: #4FD1C5;
  transition: background 0.2s;
}

.przycisk:hover {
  background: #38a89d;
}

TWOJE ZADANIE

Zmień kolor obramowania pola tekstowego na niebieski, gdy jest ono aktywne — skorzystaj z pseudoklasy :focus.

tr:nth-child(even) {
  background-color: #f2f2f2;
}

TWOJE ZADANIE

Wyróżnij co trzeci element listy innym kolorem tła, korzystając z :nth-child(3n).

blockquote::before {
  content: "❝ ";
  color: #E8A33D;
  font-size: 1.4em;
}

TWOJE ZADANIE

Za pomocą ::after dodaj strzałkę „→” na końcu każdego linku wewnątrz elementu o klasie .czytaj-wiecej.

.galeria {
  display: flex;
  gap: 12px;
}

.galeria .element {
  flex: 1;
}

@media (max-width: 600px) {
  .galeria {
    flex-direction: column;
  }
}

TWOJE ZADANIE

Ukryj element o klasie .tylko-desktop (np. dodatkowe menu boczne), gdy szerokość ekranu jest mniejsza niż 768px (podpowiedź: display: none wewnątrz @media).

h1 {
  font-size: 48px;
}

@media (max-width: 480px) {
  h1 {
    font-size: 28px;
  }
}

TWOJE ZADANIE

Zmniejsz wewnętrzny odstęp karty (.karta) z 40px do 16px na ekranach węższych niż 500px.

.pasek {
  display: flex;
  flex-direction: column;
}

@media (min-width: 900px) {
  .pasek {
    flex-direction: row;
  }
}

TWOJE ZADANIE

W podejściu mobile-first: domyślnie przyciski mają pełną szerokość (width: 100%), a od szerokości ekranu 768px mają szerokość automatyczną (width: auto) i wyświetlają się obok siebie.