07 – CSS – składnia, dodawanie stylów do strony www

https://www.w3schools.com/css/default.asp

🧱 2. Składnia CSS

Podstawowa składnia wygląda tak:

selektor {
  właściwość: wartość;
}

🔹 Selektor — określa, do jakich elementów HTML styl ma być zastosowany.
🔹 Właściwość — mówi, co chcesz zmienić (np. kolor, margines, czcionkę).
🔹 Wartość — definiuje, jak ta zmiana ma wyglądać.

Przykład:

p {
  color: blue;
  font-size: 16px;
}

➡️ Wszystkie akapity <p> na stronie będą mieć niebieski tekst o rozmiarze 16 pikseli.

🧩 3. Sposoby dodawania CSS do strony

1️⃣ Zewnętrzny arkusz stylów (najlepsza praktyka)

Tworzysz plik .css, np. style.css, i łączysz go z HTML-em:

Plik HTML:

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

Plik style.css:

body {
  background-color: #f5f5f5;
  font-family: Arial, sans-serif;
}

✅ Zalety:

czysty i uporządkowany kod
łatwa edycja stylów dla wielu stron jednocześnie

2️⃣ Wewnętrzny styl (w sekcji `<style>`)

Styl umieszczasz bezpośrednio w pliku HTML:

<head>
  <style>
    h1 {
      color: darkgreen;
      text-align: center;
    }
  </style>
</head>

3️⃣ Styl inline (w atrybucie `style`)

Styl dodajesz do konkretnego elementu:

<p style="color: red; font-size: 20px;">To jest czerwony tekst.</p>

❗️Używaj tylko wyjątkowo — np. do testów. Kod staje się trudny w utrzymaniu.

🧠 4. Przykład kompletnej strony z CSS

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <title>Moja pierwsza strona</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Witaj w mojej piekarni!</h1>
  <p>Nasze chleby na zakwasie są wypiekane z pasją i tradycją.</p>
</body>
</html>

style.css

body {
  background-color: #fff8e1;
  font-family: 'Georgia', serif;
  color: #4e342e;
}

h1 {
  color: #8d6e63;
  text-align: center;
}

⚙️ 5. Dodatkowe uwagi

Kolejność ma znaczenie: styl zapisany później nadpisuje wcześniejszy (kaskadowość).

Możesz używać klas i identyfikatorów:

.klasa { color: green; }
#identyfikator { color: red; }