Struktura CSS

 V teto kapitole si probereme veškeré identifikátory, třídy, parametry a vlastní použití tohoto všeho v CSS a jak se vším pracuje.

tag a parametr <style>

 Nyní se podíváme na tag <style> a jak může vypadat takový jeho zápis do HTML dokumentu:
<style>
.jméno_třídy { definice }
#jméno_identifikátoru { definice }
jméno_tagu { definice }
</style>
 Takže například tento styl nám může definovat cokoliv tam zapíšeme třeba barvu textu, barvu odkazu a mnoho dalšího.
Tak teď přijde na řadu parametr style který se dá definovat u většiny tagů :
<input style="color: blue; font size: 12px">
 Takže tady nám style plní funkci parametru u tagu style kde nám definuje barvu a velikost písma.

Třídy - class

 Třídy se definují v tagu <style> a jejich využití je celkem dosti praktické, jednoduše si nadefinujete nějakou třídu a pak se jen na ni odvoláváte tam kde je potřeba.
<style>
.nazev_tridy { text-align: center; font-weight: bold; color: #000099;}
</style>
A poté se na místo kde budeme potřebovat napíšeme:
<p class="nazev_tridy">Text</p>
Příklad vypadá potom takhle:

nějaký text

Identifikátory - id

 Pro jednoznačný popis nějakého elementu existuje univerzální atribut ID. I jemu se může ve stylopisu přiřadit nějaká deklarace, ale na rozdíl od třídy nezačíná tečkou, ale dvojkřížkem #. Definice identifikátoru:
<style>
#nazev_identifikatoru { text-align: center; font-weight: bold; color: #000099;}
</style>
A poté se do těla dokumentu zapíše k nějakému tagu id já si vybral <p>:
<p id="nazev_identifikatoru">Text</p>

Složené deklarace

 CSS stylopisy umožňují nadeklarovat vlastnosti pro více elementů najednou. Například to může být deklarace:
H2, H4 {color: #000099;}
Obarví všechny nadpisy druhé a čtvrté úrovně na barvu. Hromadnou deklaraci používáme, pokud zadáváme mnoho stejných vlastností pro mnoho elementů. Důležitá je hlavně čárka mezi selektory! Kdyby tam nebyla, šlo by o něco jiného.

Shrnující příklady

 Takže jelikož se ve stylopisu dá použít i jakéhokoliv tagu nebo třídy nebo identifikátoru tak si předvedeme jeden takový delší styl.
<style>
#prvnitext {color: green} /identifikátory
A:visited {color: #000099} /navštívené odkazy
A:link {color: red} /odkazy
a:hover {color: purple} /přejetí přes odkaz
H1, H2 {color: #000099; font-size: 12px} /hromadná deklarace
</style>