>>Spis treści
- Czym jest CSS?
- Sposoby załączania CSS do HTML
- Podstawowe selektory CSS
- Podstawowe właściwości CSS
- Zadania do wykonania
>>Czym jest CSS?
CSS (Cascading Style Sheets, Kaskadowe Arkusze Stylów) to język służący do opisywania wyglądu i formatu dokumentu HTML. Dzięki CSS możesz oddzielić strukturę strony (HTML) od jej prezentacji (wyglądu i stylu). Pozwala to tworzyć estetyczne, przejrzyste i łatwe do utrzymania strony internetowe. CSS umożliwia m.in. definiowanie kolorów, czcionek, układów, odstępów, ramek, tła czy efektów specjalnych.
>>Sposoby załączania CSS do HTML
>>>Inline CSS
Stylowanie pojedynczych elementów bezpośrednio w atrybucie style w kodzie 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>
Stosuj wyłącznie do bardzo prostych i pojedynczych przypadków.
>>>Internal CSS
Umieszczanie stylów wewnątrz dokumentu HTML, w sekcji <head>, za pomocą tagu <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>
Dobre do małych stron lub prototypów.
>>>External CSS
Tworzenie osobnego pliku .css i dołączanie go do strony za pomocą tagu <link>. To najbardziej zalecana metoda.
<!-- 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;
}
Umożliwia łatwą aktualizację stylów i ponowne ich wykorzystanie na wielu stronach.
>>Podstawowe selektory CSS
>>>Selektory elementów
Najprostszy selektor – wybiera wszystkie elementy danego typu (np. wszystkie nagłówki <h1>).
h1 {
color: blue;
}
>>>Selektory klas
Selektor, który styluje elementy z określoną klasą. Klas można używać wielokrotnie na różnych elementach.
<h1 class="naglowek">Witaj, świecie!</h1>
.naglowek {
color: blue;
}
>>>Selektory identyfikatorów
Selektor, który styluje element z unikalnym identyfikatorem (id).
<h1 id="naglowek-glowny">Witaj, świecie!</h1>
#naglowek-glowny {
color: blue;
}
Identyfikator (id) powinien być unikalny na stronie.
>>Podstawowe właściwości CSS
>>>Kolory
Definiowanie kolorów może odbywać się na kilka sposobów: nazwy, wartości szesnastkowe, RGB, czy HSL.
h1 {
color: red; /* Nazwa koloru */
color: #ff0000; /* Wartość szesnastkowa */
color: rgb(255, 0, 0); /* RGB */
color: hsl(0, 100%, 50%); /* HSL */
}
>>>Tło
Możesz ustawić kolor tła, obrazek, powtarzanie, pozycję i rozmiar.
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) określają odstęp na zewnątrz elementu, a wypełnienia (padding) – wewnątrz.
p {
margin: 20px; /* Odstęp na zewnątrz */
padding: 10px; /* Odstęp wewnątrz */
}
>>>Ramki
Dzięki właściwościom ramek możesz dodać obramowanie oraz zaokrąglić jego rogi.
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ć coraz bardziej zaawansowane i estetyczne strony internetowe.