# Kaskádové štýly

**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

## Externé odkazy

* Český tutoriál
* Stránky W3C (po anglicky)
* Pracujeme so štýlmi Archivované 2007-07-01 na Wayback Machine
* Všetko o CSS3
* Instant CSS Code Archivované 2010-10-31 na Wayback Machine

## 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