Co je CSS
CSS (zkratka pro Cascading Style Sheets) je stylovací jazyk, který se používá k definování vzhledu a rozložení webových stránek.
Zatímco HTML určuje strukturu stránky (co se zobrazí), CSS určuje, jak to bude vypadat – například barvy, písma, velikosti, mezery, zarovnání a další vizuální vlastnosti.
Jak CSS funguje?
CSS odděluje obsah od prezentace, což umožňuje snadnou úpravu designu webu bez změny samotného HTML. CSS pravidla se obvykle zapisují do samostatných souborů nebo přímo do HTML.
Příklad použití CSS:
<!DOCTYPE html>
<html>
<head>
<title>Příklad CSS</title>
<style>
body {
background-color: lightblue;
font-family: Arial, sans-serif;
}
h1 {
color: darkblue;
text-align: center;
}
p {
color: darkgray;
font-size: 18px;
}
</style>
</head>
<body>
<h1>Vítejte na mém webu</h1>
<p>Toto je příklad použití CSS ke stylování textu a pozadí.</p>
</body>
</html>
Co se stane? CSS nastyluje pozadí webu (světle modrá), nadpis (tmavě modrá) a text (šedá) a určí font a velikosti písma.
Hlavní úkoly CSS
- Vizuální formátování: CSS umožňuje měnit barvy, velikosti písma, pozadí, okraje, mezery a další vizuální vlastnosti.
- Rozvržení stránky: CSS umožňuje vytvářet složitá rozvržení pomocí vlastností jako flexbox nebo grid, což zajišťuje responsivitu a uspořádání prvků.
- Responzivita webu: Pomocí media queries lze přizpůsobit design webu různým velikostem obrazovky (například mobilům, tabletům a desktopům).
- Animace: CSS dokáže vytvářet jednoduché přechody a animace bez nutnosti použít JavaScript.
Typy CSS
1.Inline CSS je stylování konkretního elementu v HTML.
<h1 style=“color: red;“>Toto je červený nadpis</h1>
2 .Interní CSS (v hlavičce stránky):
- Stylování v bloku <style> přímo v HTML dokumentu.
- Příklad:
<style>
h1 { color: blue; }
</style>
3. Externí CSS (samostatný soubor):
- Stylování uložené v souboru .css, které je připojeno k HTML.
- Příklad:
<link rel=“stylesheet“ href=“styles.css“>
Proč je CSS důležité?
- Oddělení obsahu a stylu: Díky CSS můžete měnit vzhled webu, aniž byste museli upravovat HTML.
- Snadná údržba: Úpravy v jednom CSS souboru mohou ovlivnit vzhled celé webové stránky.
- Responsivita: CSS umožňuje přizpůsobit web pro různá zařízení a velikosti obrazovek.
- Moderní design: Pomocí CSS lze vytvořit atraktivní, profesionálně vypadající weby s minimálním úsilím.
Shrnutí
CSS je klíčový jazyk pro stylování webových stránek. Umožní vám při tvorbě webu snadno měnit vzhled, rozložení a chování prvků na stránce. Je základem moderního webdesignu a nezbytným nástrojem pro vytvoření responzivních a esteticky příjemných webových stránek.