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>

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>