5. Úvod do CSS

Opakování

Jaký je rozdíl mezi HTTP a HTTPS?
Co je to IDE?
Jaké dva nejzákladnější protokoly používá internet?
Z čeho se skládá základní struktura HTML?
Co je to protokol?
Jaké platí pravidlo o headings a proč?

CSS

CSS

Cascading Style Sheets (Kaskádové styly)
jazyk pomocí kterého můžeme stylovat HTML tagy
velikosti, barvy, font, odsazení

Syntaxe

selektor {
	vlastnost: hodnota;
}

rozepsané vlastnosti vždy ukončovat pomocí ;

Jak CSS používat?

Varianta č. 1

Inline

píšeme do HTML tagu
ve větších projektech nepřehledné

Ahoj Honzo

Varianta č. 2

Interní

píšeme do hlavičky HTML
styly se použijí na celý dokument

<!DOCTYPE html>
<html>
<head>
	<style>
		p {
			color: red;
		}
	</style>
</head>
<body>
	<p>Ahoj Honzo</p>
</body>
</html>

Varianta č. 3

Externí

píšeme do samostatného .css souboru
je potřeba css soubor připojit do HTML pomocí tagu link
připojuje se v HEAD

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<p>Ahoj Honzo</p>
</body>
</html>

Nastavení barvy textu

pomocí vlastnosti color
prozatím budeme používat anglické slovní názvy barev

<!DOCTYPE html>
<html>
<head>
	<style>
		p {
			color: red;
		}
	</style>
</head>
<body>
	<p>Ahoj Honzo</p>
</body>
</html>

Selektory

Elementový selektor

všechny HTML tagy

p {
	color: red;
}

ID selektor

#id - identifikátor
jedinečný identifikátor
často používaný v kombinaci s javascriptem

#id {
	color: red;
}

Třídový selektor

.class - třída
více tagů může mít stejnou třídu
Doporučuji

.class {
	color: red;
}

Jednotky

px - pixely
% - procenta
cm - centimetry

Komentáře

/* komentář */

/* komentář */
p {
	color: red;
}