Před tím než začnete s CSS byste již měli dobře znát html nebo xhtml. CSS kaskádové styly se používají k úpravě obsahu html stránky. Jejich možnosti jsou téměř neomezené. Dokáží formátovat text a pozadí, používat barvy, upravovat velikost a zarovnání jednotlivých tagů v html stránce.
Přímo do tagu jej zapisujeme pomocí příkazu style = "". V příkazu style určíme CSS styly pro tento tag. V HTML to může vypadat nějak takto:
<p style="color: red;"> Text červeným písmem </ p>
Tento zápis je ze všech zápisů nejméně používá. Příkaz color: red znamená, že barva písma bude červená (color-barva, red-červená).
Zápis v tagu <style> se používá trochu více než zápis přímo do tagu a vypadá nějak takto:
<head>
<style>
</style>
</head>
<p> Text s červeným písmem </p>
Posledním a nejpoužívanějším zápisem je zápis do externího souboru. V html se už jen připojí tento soubor do hlavičky. Príklad:
Externí soubor - soubor.css
p (color: red)
HTML webová stránka
<head>
<link rel="stylesheet" href="soubor.css"></head>
<p> Text s červeným písmem </p>
Jak vidíte externí soubor se připojí do html pomocí tagu link. Do tagu link umístíme příkazy rel = "stylesheet", což znamená že zadáváme cestu k CSS kaskádovým stylem. Další příkaz href obsahuje cestu k souboru, kde se nacházejí CSS styly.
Po ukázce jak se CSS mohou vložit do html si ukážeme jejich syntaxi. Syntaxe si můžeme ukázat na příkladu V příkladu je vidět že po slově color se nachází dvojtečka, ta odděluje příkaz color od jeho hodnoty red. Na konci každého příkazu se nachází středník. Ta zase odděluje jednotlivé příkazy i s hodnotami od sebe. Příkaz Background-color s hodnotou blue znamená, že pozadí tagu p bude modré. Color: red znamená, že písmo v tagu p bude červené.
p (color: red; background-color: blue;)