Wprowadzenie do CSS – kaskadowe arkusze stylów odpowiadają za prezentację poszczególnych elementów strony. Co więcej CSS oddziela część graficzną od części definiującej strukturę witryny – HTML. Dzięki temu ilość kodu na stronie ulega zmniejszeniu co wpływa na czytelność i szybsze działanie serwisu. Ponadto praca w oddzielnych dokumentach jest znacznie łatwiejsza.
Do przygotowania takiego dokumentu wystarczy dowolny edytor tekstowy np. notatnik.
Dodatkowo w dokumencie CSS opisujemy wygląd znaczników utworzonych w HTML. Dlatego dzięki kilku linijkom dodatkowych deklaracji sprawimy, że wygląd naszej strony internetowej nabierze nowego – ciekawego charakteru.
W tym kursie zajmiemy się podstawami CSS, wprowadzając Cię krok po kroku w świat stylowania stron internetowych. Dowiesz się, jak za pomocą CSS nadawać styl i wygląd elementom HTML, tworząc estetyczne i funkcjonalne strony www.
CSS pozwala kontrolować różne aspekty wizualne, takie jak kolory, czcionki, marginesy, odstępy między elementami i wiele innych.
W tej lekcji zaczniemy od stworzenia środowiska, w którym w kolejnych lekcjach będziemy opisywać wygląd strony internetowej.
Podstawy składni CSS
Składnia CSS składa się z selektorów i deklaracji. Selektor określa, który element HTML ma być stylowany, a deklaracja zawiera parę właściwość-wartość, która definiuje styl dla tego elementu. W kolejnej lekcji budowa stylu – selektor cecha wartość szczegółowo omówię budowę selektora.
Przykład składni CSS
p {
color: blue;
font-size: 16px;
}
W powyższym przykładzie p
to selektor, który wskazuje na wszystkie elementy p
(paragrafy) w dokumencie HTML. W deklaracji ustawiono kolor tekstu na niebieski (color: blue;
) i rozmiar czcionki na 16 pikseli (font-size: 16px;
).
Metody wstawiania stylów CSS
Istnieją trzy główne metody wstawiania stylów CSS do dokumentu HTML: styl zewnętrzny, styl wewnętrzny i styl inline.
Wstawianie stylów z zewnętrznego pliku
Styl zewnętrzny jest najbardziej zalecany, gdyż pozwala na trzymanie kodu HTML i CSS w oddzielnych plikach, co ułatwia zarządzanie i organizację kodu. Plik CSS jest zapisany jako osobny plik z rozszerzeniem .css
, a następnie dołączany do dokumentu HTML za pomocą elementu <link>
w sekcji <head>
.
<head>
<link rel="stylesheet" href="style.css">
</head>
W pliku HTML będzie to wyglądało następująco:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Moja strona</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>Tekst będzie koloru czerwonego, pogrubiony.</p>
</body>
</html>
W zewnętrznym arkuszu stylów możemy zdefiniować wygląd globalnie – dla wszystkich akapitów z dokumentu HTML, przy pomocy deklaracji zapisanej w jednej linii (inline.)
Jak zatem przygotować formatowanie akapitu z dokumentu HTML w CSS?
W pliku HTML wstawiamy akapit:
<p>Tekst będzie koloru czerwonego, pogrubiony.</p>
Dla pliku CSS przygotujemy następującą deklarację:
p { color: red; font-weight: bold; }
W przeglądarce internetowej otrzymamy taki efekt:
Tekst będzie pogrubiony, w kolorze czerwonym.
Styl wewnętrzny
Styl wewnętrzny pozwala na umieszczenie kodu CSS bezpośrednio w dokumencie HTML, w sekcji <head>
, za pomocą elementu <style>
. Ta metoda jest przydatna, gdy chcemy dodać style do jednej konkretnej strony.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Moja strona</title>
<style>
p {
color: blue;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<p>To jest przykładowa strona z użyciem wewnętrznego stylu CSS.</p>
</body>
</html>
To jest przykładowa strona z użyciem wewnętrznego stylu CSS.
Styl lokalny – inline
Wygląd poszczególnych elementów definiujemy bezpośrednio w pliku HTML.
Styl inline (w linii) polega na dodawaniu stylów bezpośrednio do elementów HTML za pomocą atrybutu style
. Ta metoda jest najmniej zalecana, ponieważ sprawia, że kod HTML staje się mniej przejrzysty i trudniejszy do utrzymania spójności w ramach całej strony.
<p style="color: green; font-weight: bold;">Tekst będzie pogrubiony, w kolorze czerwonym.</p>
W pliku HTML całość będzie prezentować się następująco:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Moja strona</title>
</head>
<body>
<p style="color: green; font-weight: bold;">Tekst będzie pogrubiony, w kolorze zielonym.</p>
</body>
</html>
Efekt
Tekst będzie pogrubiony, w kolorze zielonym.
Kaskadowość w CSS
Kaskadowość stylu CSS oznacza, że występuje kolejność ważności czytania stylu. Im styl bliżej znacznika tym ma on pierwszeństwo nad kolejnym. W naszym przypadku styl zdefiniowany w pliku zewnętrznym będzie nadpisany przez styl lokalny.
Dodatkowo style są dziedziczone co oznacza, że styl zadeklarowany dla „rodzica” ma wpływ także na „potomków”.
<div style="text-align: center;"><p>Tekst będzie wyśrodkowany.</p></div>
Przykład
Tekst będzie wyśrodkowany.
Wprowadzenie do CSS – podsumowanie
Przede wszystkim CSS umożliwia pełną kontrolę nad wyglądem stron internetowych. W tym artykule poznaliśmy podstawy CSS, w tym różne metody wstawiania stylów, takie jak zewnętrzne pliki CSS, style wewnętrzne i inline. Dlatego opanowanie tych podstawowych technik jest pierwszym krokiem do tworzenia atrakcyjnych i funkcjonalnych stron www. Teraz czas na praktykę i dalsze poznawanie możliwości CSS!
2 odpowiedzi na “Wprowadzenie do CSS – Wstęp i podstawy”
Bardzo fajny kurs
Super, że mogłem pomóc 🙂