Lekcja 4 – Wprowadzenie do CSS

Co to jest CSS i jak działa?

CSS to język, który umożliwia rozdzielenie treści (HTML) od wyglądu (stylizacji). Dzięki CSS możesz zdefiniować, jak elementy na stronie mają wyglądać i reagować na różne rozmiary ekranu.

Przykład CSS:

CSS (Cascading Style Sheets) to arkusze stylów, które pozwalają kontrolować wygląd elementów HTML. Możesz dzięki nim definiować kolory, tła, rozmiary czcionek, układy i wiele innych rzeczy. Co ważne, CSS oddziela wygląd strony od jej struktury – HTML określa zawartość strony, a CSS kontroluje jej wygląd.

CSS działa na zasadzie selektorów, czyli wskazywania elementów HTML, które chcesz stylizować. Każdy selektor jest połączony z zestawem reguł, które definiują styl dla wybranego elementu.

h1 {
  color: blue;
  font-size: 24px;
}
p {
  color: black;
  font-family: Arial, sans-serif;
}

W powyższym przykładzie zmieniamy kolor i rozmiar czcionki dla nagłówka <h1>, a także kolor i rodzaj czcionki dla akapitu <p>.

Sposoby dodawania CSS do HTML

Istnieją trzy główne sposoby na dodanie CSS do strony HTML:

Wewnątrz atrybutu „style” – Możesz dodać stylizację bezpośrednio do elementu HTML za pomocą atrybutu style. Jest to najprostszy, ale mniej zalecany sposób na dodawanie stylów, ponieważ trudniej zarządzać wieloma stylami w ten sposób.

Przykład:

<h1 style="color: red; font-size: 20px;">Nagłówek</h1>

W sekcji <style> w dokumencie HTML – Stylizację można dodać bezpośrednio w sekcji <head> za pomocą tagu <style>. To lepsze rozwiązanie, ponieważ wszystkie style są zebrane w jednym miejscu.

<head>
  <style>
    h1 {
      color: blue;
      font-size: 24px;
    }
  </style>
</head>
  1. Zewnętrzny plik CSS – Najlepszym sposobem zarządzania stylami jest użycie zewnętrznego pliku CSS. Plik CSS jest oddzielony od kodu HTML, co ułatwia zarządzanie wyglądem całej strony. W pliku HTML linkujemy zewnętrzny plik CSS za pomocą tagu <link>.

Przykład w HTML:

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

Przykład w pliku CSS (style.css):

h1 {
  color: green;
  font-size: 28px;
}
p {
  color: grey;
}

Podstawowe właściwości CSS

CSS oferuje wiele właściwości, które pozwalają dostosować wygląd elementów na stronie. Oto najważniejsze właściwości, które warto znać na początek:

  • color – Ustawia kolor tekstu.
  • background-color – Ustawia kolor tła elementu.
  • font-size – Ustawia rozmiar czcionki.
  • font-family – Określa rodzaj czcionki, np. Arial, Times New Roman itp.
  • text-align – Ustawia wyrównanie tekstu (np. left, right, center).
  • margin – Ustawia zewnętrzne odstępy wokół elementu.
  • padding – Ustawia wewnętrzne odstępy wewnątrz elementu.
  • border – Dodaje obramowanie wokół elementu.

Przykład:

p {
  color: blue;
  font-size: 16px;
  text-align: center;
  padding: 10px;
  margin: 20px;
  border: 1px solid black;
}

W tym przykładzie akapit ma niebieski kolor, wyśrodkowany tekst, odstępy wewnętrzne i zewnętrzne oraz czarną ramkę o grubości 1px.

Ćwiczenie – Dodajemy style do strony

Teraz czas na praktyczne zastosowanie CSS. Spróbujemy dodać stylizację do prostej strony HTML.

Zadanie: Otwórz swoją stronę HTML i dodaj stylizację dla nagłówków, akapitów i obrazków. Możesz skorzystać z wewnętrznego arkusza CSS lub stworzyć zewnętrzny plik.

Przykład kodu HTML z wbudowanym CSS:

<!DOCTYPE html>
<html>
<head>
  <title>Moja stylizowana strona</title>
  <style>
    body {
      background-color: lightgrey;
    }
    h1 {
      color: darkblue;
      font-size: 30px;
    }
    p {
      color: black;
      font-size: 18px;
    }
    img {
      border: 2px solid black;
      padding: 10px;
    }
  </style>
</head>
<body>
  <h1>Witaj na mojej stronie!</h1>
  <p>To jest akapit z tekstem.</p>
  <img src="https://example.com/obrazek.jpg" alt="Obrazek">
</body>
</html>
https://www.youtube.com/watch?v=76a3NHbgatk

Przetestuj różne właściwości CSS, aby zobaczyć, jak wpływają na wygląd strony.

Gratulacje! Ukończyłeś lekcję 4.
Przejdź teraz do lekcji 5 >> Rozszerzenie podstawowych właściwości CSS


Spis Treści - darmowy kurs HTML i CSS

Podstawy:
Wprowadzenie: Jak przygotować środowisko pracy
Lekcja 1: Podstawowe tagi HTML i struktura dokumentu
Lekcja 2: Formatowanie tekstu, linki i obrazki
Lekcja 3: Listy, tabele i formularze w HTML
Lekcja 4: Wprowadzenie do CSS
Lekcja 5: Rozszerzenie podstawowych właściwości CSS

Zaawansowane:
Lekcja 6: Semantyczne HTML5
Lekcja 7: Zaawansowane formularze w HTML5
Lekcja 8: Multimedia w HTML5
Lekcja 9: Flexbox – Elastyczny układ stron
Lekcja 10: CSS Grid Layout – Potężny system układów
Lekcja 11: CSS Animacje i przejścia (transitions)
Lekcja 12: Responsywność i Media Queries
Lekcja 13: CSS Variables (Custom Properties)

Dodatki: 
- Spis tagów HTML
- Spis Właściwości CSS

Jeśli chciałbyś być poinformowany o następnych kursach to zapisz się do naszego newslettera: