Představte si webovou stránku jako stavbu. HTML je jako kostra domu – definuje, kde jsou stěny, okna, dveře. Ale HTML samo o sobě nevypadá nijak hezky. Právě zde přichází na řadu CSS. CSS je jako interiérový designér a architekt, který se stará o barvy stěn, typ a velikost oken, polohu nábytku, a celkový dojem. Bez CSS by webové stránky byly jen holé, neozdobené textové dokumenty.
Hlavním cílem CSS je oddělit strukturu (HTML) od prezentace (CSS). Toto oddělení má mnoho výhod:
Pro psaní CSS budete potřebovat jen obyčejný textový editor. Pro vývoj webu se však doporučují pokročilejší editory s funkcemi jako zvýrazňování syntaxe, automatické doplňování a ladění. Mezi nejoblíbenější patří VS Code, Sublime Text nebo Atom.
CSS styly můžete do svých HTML dokumentů vkládat třemi hlavními způsoby:
Inline styly se aplikují přímo na konkrétní HTML element pomocí atributu style. Jsou nejméně doporučené pro větší projekty, protože mísí obsah s prezentací a snižují flexibilitu. Používají se spíše pro rychlé testování nebo malé, izolované změny.
<p style="color: blue; font-size: 16px;">Tento odstavec má modrou barvu a velikost písma 16px.</p>Výhody: Rychlá a přímá aplikace stylu.
Nevýhody: Špatná udržovatelnost, styly se opakují, nelze je snadno měnit globálně.
Interní styly se vkládají do <head> sekce HTML dokumentu pomocí značky <style>. Tyto styly platí pro celou danou HTML stránku. Jsou vhodné pro styly, které jsou specifické pouze pro jednu stránku a nebudou použity jinde na webu.
<!DOCTYPE html>
<html>
<head>
<title>Moje stránka</title>
<style>
body {
background-color: lightblue;
}
h1 {
color: navy;
text-align: center;
}
</style>
</head>
<body>
<h1>Vítejte na mé stránce!</h1>
<p>Toto je odstavec.</p>
</body>
</html>Výhody: Styly jsou na jednom místě pro celou stránku, snadné pro rychlé prototypování.
Nevýhody: Pokud chcete stejné styly na více stránkách, musíte je kopírovat.
Externí styly jsou nejčastěji a nejvíce doporučené pro vývoj webu. Vytvoříte samostatný soubor s příponou .css (např. styles.css), do kterého napíšete veškerý svůj CSS kód. Tento soubor pak propojíte s HTML dokumentem pomocí značky v sekci
.Příklad HTML souboru (index.html):
<!DOCTYPE html>
<html>
<head>
<title>Moje stránka</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Vítejte na mé stránce!</h1>
<p>Toto je odstavec.</p>
</body>
</html>Příklad CSS souboru (styles.css):
body {
background-color: lightcoral;
font-family: sans-serif;
}
h1 {
color: darkred;
text-align: center;
}
p {
font-size: 18px;
line-height: 1.5;
}Výhody: Úplné oddělení struktury a stylu, snadná údržba, styly lze snadno sdílet mezi mnoha stránkami, lepší pro výkon webu (prohlížeč si stáhne CSS soubor jen jednou a uloží ho do mezipaměti).
Nevýhody: Při velmi malých projektech může být zpočátku trochu "navíc" práce (ale rychle se vyplatí).
Abychom mohli aplikovat styly, musíme CSS říct, na které HTML elementy chceme styly použít. K tomu slouží selektory. Existuje mnoho typů selektorů, ale ty nejpoužívanější jsou:
Cílí na všechny elementy daného typu. Například, pokud chcete stylovat všechny odstavce na stránce, použijete selektor p.
p {
color: green;
}
h1 {
font-size: 32px;
}Cílí na jeden konkrétní HTML element, který má unikátní atribut id. V HTML musí být každé id unikátní (nelze mít dvě stejná ID na jedné stránce). V CSS se ID vybírá pomocí znaku hash (#) následovaného názvem ID.
HTML:
<div id="hlavicka">Moje hlavní hlavička</div>CSS:
#hlavicka {
background-color: #3498db;
color: white;
padding: 20px;
}Cílí na jeden nebo více HTML elementů, které sdílejí stejný atribut class. Na rozdíl od ID, třídy mohou být použity na mnoha elementech. V CSS se třída vybírá pomocí tečky (.) následované názvem třídy.
HTML:
<p class="zdurazneny-text">Tento text je důležitý.</p>
<span class="zdurazneny-text">A tento taky!</span>CSS:
.zdurazneny-text {
font-weight: bold;
color: purple;
}