Webstránky, CSS

Samotný súbor obsahujúci HTML kód nám umožňuje špecifikovať čo bude obsahom stránky (texty, obrázky, tabuľky, videá, ...) no neumožňuje nám ovplyvniť, ako budú dané časti vykreslené (akú bude mať text farbu, font, veľkosť, či bude zarovnaný na stranu alebo stred, aká bude farba pozadia, ...). Na nastavenie štýlov jednotlivých komponentov nám slúži jazyk CSS (Cascading Style Sheet).

Kam písať kód CSS

Jeden z "elegantných" spôsobov je umiestniť kód CSS do separátneho textového súboru. Vytvorte nový textový súbor na webftp.bilicka.sk a pomenujte ho "style.css". V HTML dokumente, ktorý bude ovplyvnený našim novým CSS súborom musíme v hlavičke (časť head) špecifikovať, že sa pri jeho vykresľovaní musí načítať daný CSS dokument - to je jednoduché, stačí tam dopísať:

<link rel="stylesheet" href="style.css">

Súbor style.css musí byť samozrejme umiestnený v rovnakom priečinku ako súbor s html, ktorý má ovplyvniť.

Ako písať CSS?

CSS je jednoduchý jazyk - skladá sa zo selektorov (selektor hovorí, ktorú časť stránky ideme ovplyvniť, napríklad selektor h2 ovplyvní všetky nadpisy druhej úrovne), podobne existujú selektory k ostatným tagom v HTML ako napríklad h1, h2, p, a. Po špecifikovaní selektoru sa môžeme vyjadriť k rôznym atribútom danej časti - atribútom môže byť napríklad farba textu, farba pozadia, veľkosť textu, font textu, zarovnanie textu. Každému atribútu priraďujeme hodnotu - v prípade farby textu alebo pozadia je hodnotou konkrétna farba, v prípade veľkosti písma je to konkrétna veľkosť.

Nasledovný CSS kód hovorí, že všetky nadpisy h1 majú byť červené s modrým pozadím:

h1 {
	color: red;
	background-color: blue;
}

Za selektorom sú kučeravé zátvorky, do ktorých píšeme dvojice atribút-hodnota, dvojice sú oddelené bodkočiarkou a medzi atribút a hodnotu píšeme dvojbodku. V súbore CSS sa môžeme vyjadriť k ľubovoľne vela selektorom, píšeme ich pod seba, napríklad takto:

body {
	background-color: skyblue;
}

h1 {
	color: navy;
	background-color: rgb(100, 200, 50),
	margin-left: 20px;
}

p {
	font-family: "Times New Roman", Times, serif;
	border-bottom: 1px solid orange;
}

Úloha

Pozrite si prehľad CSS atribútov a hodnôt s príkladmi ich použitia, experimentujte s nimi a vhodne upravte svoju stránku. Nastavte aspoň:

farbu pozadia celej stránky
veľkosť, farbu a font nadpisov h1, h2, h3
farbu časti textu v rámci tagu pomocou tagu (návod nižšie)
farbu odkazov (selektor a)

Dokončite svoju stránku tak, aby spĺňala všetky požiadavky uvedené v úlohe z predcházdajúcej hodiny. Svoj výsledný HTML a CSS súbor nahrajte na server bilicka.sk. Valídnosť svojho CSS súboru si môžete overiť cez Markup Validation Service.

Čo ak chcem určiť štýl len pre časť textu / nadpisu a pod. ?

Pomocou CSS vieme ovplyvniť aj len časť textu (aj keď nie je v samostatných tagoch). Na takéto prípady sú v jazyku HTML tagy . Tie nám umožňujú ohraničiť aj podčasť textu alebo naspisu, o ktorej sa chceme špecificky vyjadriť v CSS. Dôležité je pri tom každému určiť aj atribút "class", ktorý nám v CSS umožní určíť, o ktorej konkrétnej (alebo ktorým konkrétnym) častiam ideme čosi nastavovať.

Napríklad, ak by sme chceli slovo "pozor" v takomto HTML kóde zafarbiť na červeno, mohli by sme ho obaliť do tagov s class nastavenou na "dolezite" (class je naše pomenovanie, musí byť rovnaké v HTML aj CSS, kludne to môže byť nejaké slovenské slovíčko):

<p>Písanie HTML je jednoduché, ale <span class="dolezite">pozor</span> na správne použitie tagov!</p>

V súbore CSS potom použijeme selektor .dolezite a nastavíme čo treba:

.dolezite {
	color: red;
}

Pozor na bodku v selektore! Bez nej to fungovať nebude.