Czym są CSS?

Kaskadowe arkusze stylów (CSS) służą do definiowania układów graficznych dokumentów HTML.

Arkusz stylów CSS zawiera reguły opisujące w jaki sposób przeglądarka internetowa ma wyświetlać zawartość dokumentów HTML lub XML. Za pomocą arkuszy CSS można opisać wiele właściwości prezentacji elementów strony: wybrać kolor tekstu, wypełnienie tła, rodzaj czcionki, ustawić odstępy między elementami czy zdefiniować położenie jednego elementu względem drugiego.

Podobne informacje można umieścić w samym dokumencie HTML, jednak separacja opisu stylu dokumentów od ich treści znacznie zwiększa przejrzystość kodu oraz przyspiesza i ułatwia dalsze modyfikacje dokumentu (aby wpłynąć na wiele elementów wystarczy wprowadzenie jednej zmiany).

Dlaczego CSS?

  • Arkusze stylów są podstawowym narzędziem do formatowania wyglądu stron WWW.
  • Kontrola układu graficznego wielu dokumentów z poziomu jednego zewnętrznego arkusza stylów.
  • Krótsze i bardziej przejrzyste dokumenty (oddzielenie treści strony od prezentacji graficznej).
  • Dużo nowych możliwości niedostępnych w czystym HTML: różne wartości pogrubienia czcionki, tekst nadkreślony lub przekreślony, pozycjonowanie elementów strony, zmiana wyglądu po najechaniu kursorem.
  • Klasy selektorów - możliwość dodawania do elementów strony parametru “class”, w którym podajemy nazwę klasy. W arkuszu stylów określamy atrybuty formatowania dla klasy o zadanej nazwie. W ten sposób wszystkie elementy wybranej klasy mają wspólny kod odpowiedzialny za ich wygląd.
  • Decydowanie o wyglądzie strony na podstawie używanego medium - możemy nadać dokumentowi różne style w zależności od tego czy będzie wyświetlany na ekranie komputera, telefonu czy tabletu. Możemy zdecydować też o wyglądzie wydruku dokumentu.

Przykładowe użycie CSS

Plik index.html:


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <article>
      <header>
        <h1>Vavatech</h1>
        <p class="example-class">Czym się zajmujemy:</p>
      </header>
      <p>
        Firma Vavatech ukierunkowana jest na tworzenie zaawansowanych 
        systemów opartych na www oraz dostarczania specjalistycznych 
        szkoleń informatycznych.
      </p>
    </article>
  </body>
</html>
  
      

Plik style.css:


h1 {
  background: #32c5d2;
  color: white;
  padding: 20px 0;
  font-size: 30px;
  text-align: center;
}

article {
  background: #424242;
  color: white;
  padding: 40px 0;
}

p {
  padding: 0 30px;
}

.example-class {
  width: 100%;
  text-align: center;
  font-size: 20px;
  padding: 0;
}
  
      

Wygląd strony z przykładu

Z wykorzystaniem CSS:

Bez użycia arkuszy stylów: