Wprowadzenie do CSS - Wstęp i podstawy

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!