Wprowadzenie do CSS - Jakub Szpil

CSS (Cascading Style Sheets) to język służący do opisywania wyglądu i formatu dokumentu HTML. CSS pozwala na oddzielenie treści od prezentacji, co umożliwia tworzenie estetycznych i spójnych stron internetowych. W tym kursie omówimy podstawy CSS, w tym selektory, właściwości, sposoby załączania CSS do HTML oraz JavaScript, a także przedstawimy kilka zadań do wykonania.

#Sposoby załączania CSS do HTML

#Inline CSS

Inline CSS jest stosowany bezpośrednio w atrybucie style elementu HTML.

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Inline CSS</title>
  </head>
  <body>
    <h1 style="color: blue;">Witaj, świecie!</h1>
  </body>
</html>

#Internal CSS

Internal CSS jest umieszczony w sekcji <head> dokumentu HTML, wewnątrz elementu <style>.

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Internal CSS</title>
    <style>
      h1 {
        color: blue;
      }
    </style>
  </head>
  <body>
    <h1>Witaj, świecie!</h1>
  </body>
</html>

#External CSS

External CSS jest zapisany w osobnym pliku z rozszerzeniem .css i dołączony do dokumentu HTML za pomocą elementu <link>.

<!-- index.html -->
<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>External CSS</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>Witaj, świecie!</h1>
  </body>
</html>

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

#Podstawowe selektory CSS

#Selektory elementów

Selektor elementu stosuje style do wszystkich elementów danego typu.

h1 {
  color: blue;
}

#Selektory klas

Selektor klasy stosuje style do elementów, które mają określoną klasę.

<h1 class="naglowek">Witaj, świecie!</h1>

.naglowek {
  color: blue;
}

#Selektory identyfikatorów

Selektor identyfikatora stosuje style do elementu z określonym identyfikatorem.

<h1 id="naglowek-glowny">Witaj, świecie!</h1>

#naglowek-glowny {
  color: blue;
}

#Podstawowe właściwości CSS

#Kolory

Kolory można definiować za pomocą nazw kolorów, wartości szesnastkowych, RGB lub HSL.

h1 {
  color: red; /* Nazwa koloru */
  color: #ff0000; /* Wartość szesnastkowa */
  color: rgb(255, 0, 0); /* RGB */
  color: hsl(0, 100%, 50%); /* HSL */
}

#Tło

Właściwości tła pozwalają na ustawienie koloru tła, obrazka tła, powtarzania obrazka tła, pozycji obrazka tła itp.

body {
  background-color: lightgray; /* Kolor tła */
  background-image: url("tlo.jpg"); /* Obrazek tła */
  background-repeat: no-repeat; /* Brak powtarzania obrazka */
  background-position: center; /* Pozycja obrazka */
  background-size: cover; /* Rozmiar obrazka */
}

#Marginesy i wypełnienia

Marginesy (margin) i wypełnienia (padding) pozwalają na kontrolowanie odstępów wokół elementów.

p {
  margin: 20px; /* Margines wokół elementu */
  padding: 10px; /* Wypełnienie wewnątrz elementu */
}

#Ramki

Właściwości ramek pozwalają na dodanie obramowania wokół elementów.

div {
  border: 1px solid black; /* Obramowanie */
  border-radius: 10px; /* Zaokrąglone rogi */
}

#Zadania do wykonania

#Zadanie 1

Stwórz stronę HTML z elementem <h1>, który ma kolor czerwony przy użyciu External CSS.

Pokaż rozwiązanie

<!-- index.html -->
<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Zadanie 1</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1 class="red">Witaj, świecie!</h1>
  </body>
</html>

/* style.css */
.red {
  color: red;
}

#Zadanie 2

Utwórz paragraf (<p>), który ma zielone tło, 20 pikseli wypełnienia i zaokrąglone rogi o promieniu 10 pikseli.

Pokaż rozwiązanie

<!-- index.html -->
<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Zadanie 2</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <p class="green-bg">To jest paragraf</p>
  </body>
</html>

/* style.css */
.green-bg {
  background-color: green;
  padding: 20px;
  border-radius: 10px;
}

#Zadanie 3

Stwórz div, który ma niebieską ramkę o grubości 2 pikseli, a wewnątrz niego umieść tekst "To jest div".

Pokaż rozwiązanie

<!-- index.html -->
<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Zadanie 3</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="blue-border">To jest div</div>
  </body>
</html>

/* style.css */
.blue-border {
  border: 2px solid blue;
}

#Zadanie 4

Utwórz stronę HTML z trzema nagłówkami (<h1>, <h2>, <h3>) o różnych kolorach za pomocą selektorów klas.

Pokaż rozwiązanie

<!-- index.html -->
<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Zadanie 4</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1 class="red">Nagłówek 1</h1>
    <h2 class="blue">Nagłówek 2</h2>
    <h3 class="green">Nagłówek 3</h3>
  </body>
</html>

/* style.css */
.red {
  color: red;
}

.blue {
  color: blue;
}

.green {
  color: green;
}

To tyle na temat podstaw CSS! Zachęcam do dalszego eksperymentowania i zgłębiania tego tematu, aby tworzyć bardziej zaawansowane i estetyczne strony internetowe.