CSS - úvod

Jazyk CSS (jazyk pre kaskádové štýly) slúži na vizuálne formátovanie dokumentov. CSS kód je v podstate len zoznam pravidiel, ktorými sa definuje vzhľad jednotlivých HTML elementov na webovej stránke (napr. farba textu alebo veľkosť písma). Akronym CSS vznikol z anglického názvu Cascading Style Sheets, v slovenčine sa zvykne prekladať ako kaskádové štýly alebo jazyk pre kaskádové štýly. CSS je možné použiť aj v kombinácii s inými dokumentami, nielen pre HTML, ale v rámci tohto tutoriálu k CSS sa zameriame na vizuálne štýlovanie webových stránok napísaných v jazyku HTML pomocou pravidiel na štýlovanie napísaných v jazyku CSS.

Čo je CSS?

Stručná charakteristika jazyka CSS na úvod:

• CSS je jazyk na vizuálnu úpravu dokumentov (často sa používa označenie jazyk pre štýlovanie dokumentov).

• CSS obsahuje zoznam pravidiel, podľa ktorých sa zobrazujú elementy na stránke (napr. pravidlo pre veľkosť písma).

• Pravidlá CSS je možné písať priamo v HTML kóde alebo vložiť do súboru, ktorý sa pripojí k dokumentu.

• CSS je akronym pre Cascading Style Sheets.

• Niekedy sa CSS nazýva ako programovací jazyk, niekedy len ako jazyk na štýlovanie. Pre potreby tohto CSS tutoriálu nie je dôležité, či budeme jazyk CSS považovať za programovací jazyk alebo nie. Po absolvovaní CSS tutoriálu si každý spraví svoj názor.

Základy CSS - ako vyzerá kód?

Pravidlá v jazyku CSS sú pomerne intuitívne, vychádzajú z anglických názvov. Nižšie uvádzame príklady CSS pravidiel:

• V prvom riadku nastavíme farbu obsahu na modrú

• V druhom riadku nastavíme farbu pozadia na zelenú

• V treťom riadku pridáme okraje o veľkosti 50px (50 pixelov)

color: blue;
background-color: green;
margin: 50px;

Keď chceme tieto pravidlá aplikovať na nejakú časť webu, stačí povedať na akú. V ukážke nižšie tieto pravidlá nastavíme pre odsek textu p pomocou atribútu style.

<p style="color: blue; background-color: green; margin: 50px;">
  Toto je tutoriál k jazyku CSS a ukážka, ako vieme pravidlá CSS nastaviť na element p (odsek textu) v jazyku HTML.
</p>
Tu je text, na ktorý sa žiadne pravidlá CSS nepoužili.

Ak nepoznáte názvy farieb v angličtine, máme pre vás zaujímavý tip. Farby sa dajú nastavovať viacerými spôsobmi a jedným z nich je aj tzv. RGB kód. V našej encyklopédii farieb si viete namiešať ľubovoľnú farbu alebo vybrať zo zoznamu HTML farieb

Ako používať CSS v jazyku HTML

Existujú tri spôsoby, ako vieme pravidlá CSS aplikovať na elementy v HTML dokumentoch.

1. Pomocou atribútu style v HTML elemente (ako v predchádzajúcej ukážke)

2. Vložením pravidiel do tagu style

3. Vložením pravidiel do súboru CSS a jeho prilinkovaním do HTML dokumentu cez tag link

Jednotlivé metódy používania CSS si teraz vysvetlíme a ukážeme.

CSS pomocou HTML atribútu

Prvý spôsob cez HTML atribút style sme už ukázali vyššie. Zvolíme element, ktorému chceme pridať CSS pravidlá a do jeho atribútu style vložíme zoznam pravidiel oddelených bodkočiarkou. Ide o jednoduché a rýchle riešenie, ale keď začne byť počet elementov a pravidiel veľký, bude HTML kód veľmi neprehľadný.

CSS pomocou HTML tagu style

V jazyku CSS existuje tag style, do ktorého vieme vložiť všetky CSS pravidlá pre všetky elementy na celej stránke. Stačí zadať názov elementu a do zložených zátvoriek { a } vložiť pravidlá pre tento element.. Element style sa zvykne dávať do hlavičky HTML dokumentu a uvádza sa v ňom atribút type s hodnotou text/css, aby zariadenie vedelo, že sa jedná o CSS formát (viď riadok 1 nasledujúcej ukážky). Obsah tohto elementu sa používateľovi nezobrazuje, keďže prehliadač vie, že nejde o obsah webu, ale o pravidlá CSS.

<style type="text/css">
  h1 { color: white; background-color: black; }  
  p  { color: red;   background-color: blue; }  
</style>

<h1>Biely na čiernom pozadí</h1>
<p>Toto je tutoriál k jazyku CSS a ukážka, ako vieme pravidlá CSS nastaviť na element v jazyku HTML.</p>

Táto metóda používania CSS je pre väčšie dokumenty a väčšie množstvo CSS pravidiel vhodnejšia. Jednak sú pravidlá na jednom mieste a zároveň vieme pravidlá aplikovať opakovane na viac elementov súčasne. Pravidlá sa použijú na všetky HTML elementy rovnakého názvu. Keby sme mali v texte viac odsekov, nemusíme pre každý jeden písať pravidlá (a nebodaj ich všetky meniť). Ak potrebujeme pre dva elementy s rovnakým názvom aplikovať rôzne pravidlá, vieme ich rozlíšiť pomocným atribútom, ale tieto techniky si vysvetlíme neskôr.

CSS súbory

Tretia metóda aplikovania CSS pravidiel (a zároveň najviac odporúčaná), je písať pravidlá do samostatného súboru (s príponou .css). Tento súbor môžeme prilinkovať do dokumentu tagom link, kde do atribútu rel uvedieme, že sa jedná o súbor s pravidlami štýlovania CSS (hodnota stylesheet) a do atribútu href zadáme cestu k CSS súboru:

<link rel="stylesheet" href="subory/style.css">

Okrem lepšej prehľadnosti (kedy máme HTML kód v HTML súbore a CSS kód v CSS súbore), sme získali aj ďalšie výhody. Jeden CSS súbor vieme prilinkovať k viacerým HTML dokumentom (nemusíme kód vkladať do každého z nich) a zároveň je tento prístup rýchlejší, lebo internetový prehliadač nemusí zdrojový kód CSS stále načítavať (pri každej stránke). Získame tým nielen rýchlejšie načítanie webovej stránky, ale tiež ušetríme dáta pri sťahovaní z webového serveru, za čo sa vám poďakujú návštevníci, ktorí majú obmedzené alebo pomalé pripojenie k internetu.

Najpoužívanejšie CSS pravidlá

Pre zaujímavosť uvádzame na záver tohto úvodu do CSS aj najviac používané pravidlá v jazyku CSS. Tie by mal ovládať každý tvorca webov. Vybrali sme len úplné TOP pravidlá, tzv. sedem statočných :)

• color - farba textu

• background-color - farba pozadia

• font-size - veľkosť textu

• text-align - zarovnanie textu (možnosti: doľava, doprava, na stred, do bloku)

• margin - vonkajší okraj (odsadenie z vonkajšej strany)

• padding - vnútorný okraj (odsadenie z vnútornej strany)

• border - rámik (okraj)

Na ukážke nižšie aplikujeme tieto CSS pravidlá na odsek textu. Pre lepšiu prehľadnosť sme každé pravidlo dali na nový riadok. Tento spôsob písania CSS kódu sa využíva pri jeho tvorbe, ale pri nahrávaní CSS súboru na server je zase vhodnejšie používať jednoriadkový výstup, aby bol súbor menší. Viac o optimalizácii CSS súborov si povieme neskôr.

<style type="text/css">
p{
  color: white;
  background-color: black;
  font-size: 24px;
  text-align: center;
  margin: 10px;
  padding: 30px;
  border: 4px solid red;
}  
</style>
<p>Toto je ukážka základných pravidiel v jazyku CSS: nastavenie farby a veľkosti písma, zarovnania textu na stred, farby pozadia, okrajov z vonkajšej aj vnútornej strany a rámik okolo elementu.</p>

Ak vás jazyk CSS zaujal, odporúčame prejsť kompletný CSS tutoriál. Jazyk CSS toho dokáže oveľa viac :)

Zhrnutie úvodnej kapitoly tutoriálu k CSS