CSS-kielen perusteet

Olemme jo käsitelleet HTML-kielen perustageja, ja nyt on aika tehdä kauneutta. Olisi hienoa pystyä vaihtamaan tekstin väriä, sen kokoa, taustaa ja paljon muuta. Tämä tehdään CSS-kielellä.

Yleensä CSS-komennot (tyylit) säilytetään erillisessä tiedostossa, joka liitetään erityisellä tagilla kaikkiin sivuston HTML-sivuihimme.

Tämän lähestymistavan etuna on, että CSS-tiedosto on yksi, mutta HTML-tiedostoja voi olla minkä tahansa määrä, vaikka tuhat. Jos teemme muutoksen yhdessä paikassa CSS-tiedostoa, esimerkiksi muutamme kaikki kappaleet punaiseksi, nämä muutokset otetaan käyttöön kaikilla tuhannella HTML-sivulla, johon CSS-tiedostomme on liitetty. Erittäin kätevää ja nopeaa.

Tiedosto, jossa on tyylit, tulee olla päätteellä .css. Liittääksesi tällaisen tiedoston HTML-sivulle, head -tagin tulee sisältää seuraava rakenne:

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

Seuraavassa esimerkissä HTML-tiedostoomme liitetään CSS-tiedosto styles.css:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>This is the title</title>
		<link rel="stylesheet" href="styles.css">
	</head>
	<body>
		<p>
			This is a paragraph with text.
		</p>
	</body>
</html>

Luo ja liitä kaikkiin sivuihisi tiedosto styles.css.