#1 CSS
CSS (Cascading Style Sheets) – kaskádové styly – slouží k zápisu stylů pro HTML prvky na webové stránce. Naučit CSS se s námi můžete v CSS tutoriálu.
Pomocí CSS se dá ovládat rozložení (flexbox, grid, float…), formátování a stylizace textů, pozadí, ovládat viditelnost, nastavovat správnou respozivitu a další.
#2 Použití CSS
CSS se dá použít třema způsoby:
- Inline s použitím atributu style v prvcích
- Interně – použitím prvku <style> vně HTML hlavičky
- Externě – použitím prvku <link>, který propojuje soubory
Nejčastěji se používá třetí možnost, díky které jsou styly v odděleném souboru. Jsou díky tomu přehlednější, jelikož se tam nacházejí sami, bez dalších prvků z HTML.
Inline CSS
Používá se k aplikování stylů k lokálnímu prvku. Používá se zejména k testování nebo kvůli jednoduchosti, aby se nemusel deklarovat prvek v CSS.
<p style="color: gray;">Šedivý odstavec textu</p>
CSS vložené interně
CSS lze také vložit pomocí prvku <style> do hlavičky stránky. Obsah prvku <style> funguje totožně jako CSS s rozdílem, že se nachází ve stejném souboru jako HTML.
<!DOCTYPE html>
<html>
<head>
<style>
<!-- Stylování se nachází zde -->
</style>
</head>
<body>
<!-- Obsah stránky -->
</body>
</html>
Externí CSS
Externě vložené CSS funguje totožně jako interně vložené CSS s rozdílem, že se nenachází v prvku <style>, ale v jiném souboru.
Externí styly se propojují do HTML souboru pomocí nepárového prvku <link>.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!-- Obsah stránky -->
</body>
</html>
V příkladu výše se nachází prvek <link> v hlavičce stránky. Obsahuje atribut rel, který definuje o jaký typ souboru se jedná, atribut type, který není povinný a spíše se vynechává, ale specifikuje více do hloubky o jaký soubor se jedná a povinný atribut href, který definuje cestu k souboru v rámci adresáře.
body {
background-color: gray;
color: white;
}
V druhém boxu se nachází již daný CSS soubor, který v tomto případě definuje, že tělo stránky má šedé pozadí a bílé písmo.