Kaskádové štýly

Kaskádové štýly alebo CSS (skratka z ) 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 
 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

W3C štandardy
Značkovacie jazyky
Typografia