CSS

CSS je programovací jazyk vytvorený pre naštýlovanie HTML dokumentu. Je možné ho pripraviť dvomi spôsobmi:

  • Kód vpísať priamo do HTML dokumentu, čo sa ale neodporúča
  • Vytvoriť samostatný súbor s koncovkou .css a ten následne načítať do hlavičky HTML dokumentu pomocou nasledujúceho kódu:
<!DOCTYPE html>
<html>
  <head>
    <title>Názov stránky</title>
    <link rel="stylesheet" type="text/css" href="./style.css">
  </head>
  <body>
    <h1>Nadpis 1.úrovne</h1>
    <p>Toto je odsek.</p>
  </body>
</html>

Na to, aby sme štýly, čo sme naprogramovali aj mohli načítať, si vytvoríme súbor s názvom style.css a uložíme ho do zložky, kde máme HTML dokument. Nie je problém súbor nazvať aj inak, či ho uložiť do inej zložky, no podstatné je skopírovať adresu k súboru do atribútu „href“.

CSS má jednoduchú syntax, kde ako prvé sa definuje značka, ktorá bude daným štýlom ovplyvnená. Následne za medzi krútené zátvorky umiestnia vlastnosti, ktoré sa majú aplikovať.

p {
    background-color: lightblue; /* svetlo modrá farba pozadia */
    color: green; /* zelená farba písma */
}

h1 {
    color: red; /* červená farba písma */
}

Aby sa kód sprehľadnil a skrátil, je možné aplikovať sériu vlastností aj na viac typov značiek naraz.

h1, h2 {
    color: red; /* červená farba písma */
    font-size: 72px; /* veľkosť písma udaná v pixeloch */
}

Komentáre

Tak ako v HTML, tak aj v CSS môžme využívať komentáre. Opäť nimi môžme schovať neaktívny kód, alebo značiť časti kódu pre zprehľadnenie. Zápis komentárov sa ale od HTML líši, no na druhú stranu je rovnaký, ako vo väčšine iných programovacích jazykov.

Niekoľko riadkový komentár

/* Komentár
aj na 
viac riadkov */

Jednoriadkový komentár

/* Aj tento komentár je iba na jednom riadku */

Testové otázky

  • Na čo sa využíva CSS?
  • Akými spôsobmi môžme CSS načítať?