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).
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;
}
Z wykorzystaniem CSS:
Bez użycia arkuszy stylów: