**Kaskádové štýly** alebo **CSS** (skratka z angl. Cascading Style Sheets) je všeobecné rozšírenie (X)HTML.
Konzorcium W3C označuje CSS ako jednoduchý mechanizmus na vizuálne formátovanie internetových dokumentov.

Štýly umožnili oddeliť štruktúru HTML alebo XHTML od vzhľadu.

História
--------

Prvá verzia CSS (CSS level 1) vznikla už v roku 1996 a umožňovala prácu s písmami, okrajmi a farbami. 
V roku 1998 bola doplnená o nové možnosti a vznikol CSS level 2. V súčasnosti je podporovaná vo všetkých novších verziách prehliadačov (Internet Explorer, Opera, Mozilla, Netscape, Safari). 
Aktuálna verzia je CSS level 3.

Použitie
--------

Pomocou kaskádových štýlov sa vytvárajú štruktúrované dokumenty, teda oddeľuje sa obsah dokumentu (HTML) od jeho vzhľadu (CSS). Získa sa tým prehľadný a jednoduchý kód. CSS je možné presunúť do externých súborov, zmenší sa tým dátová veľkosť a dá sa jedným súborom zmeniť celý štýl stránky. Cieľom každého webdesignera je vytvoriť stránku tak, aby vyzerala čo najviac podobne v najpoužívanejších prehliadačoch. CSS nezaručuje rovnaké vykresľovanie vo všetkých prehliadačoch. Vzhľadom k rôznym interpretáciam css rôznymi prehliadačmi je nemožné aby stránka vyzerala na pixel rovnako. Najväčší problém v interpretácii css má internet explorer. V súčasnosti sa stránky optimalizujú pre IE verzie 7 a vyššie.

Príklad
-------

Príklad CSS štýlu

```
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  <HTML>
  <HEAD>
  <TITLE>Skúšobná www stránka</TITLE>
  <META http-equiv="Content-Type" content="text/html; charset="utf-8">
  
  <STYLE type="text/css">
  BODY {

  font-family: 'Arial'; 
  /* Na celej stránke bude font Arial */

  color: blue; 
  /* Text bude modrý */

  font-size: 12px;  
  /* Veľkosť textu bude 12 pixelov */

  }

  H1 {
  color: red; 
  /* všetky veľké nadpisy budú červené */
  }
  </STYLE>
  </HEAD>

  <BODY> 
  <!-- Aktivuje sa štýl pre BODY-->

  <H1>Používam CSS</H1> 
  <!-- Aj keď pre BODY mám modrú farbu, prekryje to najneskôr použité (H1), takže bude červený-->

  <P>Text</P> <!-- Tento text bude modrý (červená sa ukončila /H1)--> 
  </BODY>
  </HTML>

```
Animované tlačidlo CSS 

* Kód vytvorí tlačidlo, ktoré sa po umiestnení kurzora nad neho rozbalí

```
  <!DOCTYPE HTML>
  <HTML>
  <HEAD>
  <TITLE>CSS</TITLE>
  <META http-equiv="Content-Type" content="text/html; charset="utf-8">
 
  <STYLE type="text/css"> 
  .button {
      width: 300px;
      height: 50px;
      background-color: grey;
      color: white; 
  } 

  .button:hover {
      -webkit-transform: scale(1.2);
      -ms-transform: scale(1.2); 
      transform: scale(1.2); 
      animation-duration: 1s; 
      transition-duration: 1s; 
      transition-property: 1s;
  }
  </STYLE>
  
  </HEAD>
  <BODY>
  <p> 
Po umiestnení kurzora na tlačidlo sa rozbalí
  </p>
  </BODY>
  </HTML>

```

Referencie
----------

1. ↑
2. ↑   *Button Animations CSS Code Free* [online]. buttonanimations.github.io, [cit. 2020-02-11]. Dostupné online.

Externé odkazy
--------------

* Český tutoriál
* Stránky W3C (po anglicky)
* Pracujeme so štýlmi
* Všetko o CSS3
* Instant CSS Code

Literatúra
----------

* Lednár, Matej.: Príručka programátora - Prehľadný sprievodca jazykmi XHTML 1.1, CSS 2.1 a JavaScript 1.5+ s úvodom do DOM. Bratislava: MLD Group, 2009, s.776. ISBN 978-80-89448-00-5
* Lednár, Matej.: Príručka programátora - Aplikujeme DOM s jazykmi XHTML, CSS a JavaScript. Bratislava: MLD Group, 2009, s. 207. ISBN 978-80-89448-01-2
* Lednár, Matej.: Príručka programátora - Prehľadný sprievodca jazykom CSS 2.1. Bratislava: MLD Group, 2009, s.148. ISBN 978-80-89448-03-6