Čo je CSS
CSS (skratka pre Cascading Style Sheets) je štýlovací jazyk, ktorý sa používa na definovanie vzhľadu a rozloženia webových stránok.
Zatiaľ, čo HTML určuje štruktúru stránky (čo sa zobrazí), CSS určuje, ako to bude vyzerať – napríklad farby, písma, veľkosti, medzery, zarovnanie a ďalšie vizuálne vlastnosti.
Ako CSS funguje?
CSS oddeľuje obsah od prezentácie, čo umožňuje jednoduchú úpravu dizajnu webu bez zmeny samotného HTML. CSS pravidlá sa zvyčajne zapisujú do samostatných súborov alebo priamo do HTML.
Príklad použitia CSS:
<!DOCTYPE html>
<html>
<head>
<title>Prí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>Vitajte na mojom webe</h1>
<p>Toto je príklad využitia CSS na štýlovanie textu a pozadia.</p>
</body>
</html>
Čo sa stane? CSS naštýluje pozadie webu (svetlomodrá), nadpis (tmavomodrá) a text (sivá) a určí font a veľkosti písma.
Hlavné úlohy CSS
- Vizuálne formátovanie: CSS umožňuje meniť farby, veľkosti písma, pozadia, okraje, medzery a ďalšie vizuálne vlastnosti.
- Rozvrhnutie stránky: CSS umožňuje tvoriť zložité rozvrhnutia pomocou vlastností ako flexbox alebo grid, čo zaisťuje responzivitu a usporiadanie prvkov.
- Responzivita webu: Pomocou media queries sa dá prispôsobiť dizajn webu rôznym veľkostiam obrazovky (napríklad mobilom, tabletom a desktopom).
- Animácia: CSS dokáže tvoriť jednoduché prechody a animácie bez nutnosti použiť JavaScript.
Typy CSS
1.Inline CSS je škálovanie konkrétneho elementu v HTML.
<h1 style=“color: red;“>Toto je červený nadpis</h1>
2. Interné CSS (v hlavičke stránky):
- Štýlovanie v bloku <style> priamo v HTML dokumente.
- Príklad:
<style>
h1 { color: blue; }
</style>
Externé CSS (samostatný súbor):
- Štýlovanie uložené v súbore .css, ktoré je pripojené k HTML.
- Príklad:
<link rel=“stylesheet“ href=“styles.css“>
Prečo je CSS dôležité?
- Oddelenie obsahu a štýlu: Vďaka CSS môžete meniť vzhľad webu bez toho, aby ste museli upravovať HTML.
- Jednoduchá údržba: Úpravy v jednom CSS súbore môžu ovplyvniť vzhľad celej webovej stránky.
- Responzivita: CSS umožňuje prispôsobiť web rôznym zariadeniam a veľkosti obrazoviek.
- Moderný dizajn: Pomocou CSS sa dá vytvoriť atraktívny, profesionálne vyzerajúce weby s minimálnym úsilím.
Zhrnutie
CSS je kľúčový jazyk na štýlovanie webových stránok. Umožní vám pri tvorbe webu jednoducho meniť vzhľad, rozloženie a správanie prvkov na stránke. Je základom moderného webdizajnu a neodlúčiteľným nástrojom na tvorbu responzívnych a esteticky príjemných webových stránok.