CSS logoCSS jeb kaskadētas stila lapas (Cascading Style Sheets) ir valoda, kas paredzēta, lai aprakstītu HTML elementu izskatu — krāsu, izmēru, novietojumu, atstarpes, animācijas un daudzus citus vizuālos aspektus.

CSS izmantošana atvieglo darbu izstrādātājiem, sniedz plašākas dizaina iespējas un samazina HTML dokumentu apjomu, kas paātrina mājas lapas ielādi. Pašlaik aktuālā versija ir CSS3, kas piedāvā modernas iespējas kā animācijas, pārejas, flexbox un grid izkārtojumus.

Kā pievienot CSS savam dokumentam?

Ir trīs veidi, kā piesaistīt CSS stilu dokumentam.

1. Ārējais CSS fails (ieteicamais veids)

Izveido atsevišķu .css failu un iekļauj to HTML dokumenta galvenē:

<!DOCTYPE html>
<html lang="lv">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mana mājas lapa</title>
<link rel="stylesheet" href="stils.css">
</head>
<body>
<h1>Sveiki!</h1>
<p>Šī ir mana mājas lapa ar CSS!</p>
</body>
</html>

Šis variants ļauj neierobežotam skaitam lapu izmantot vienu CSS failu. Ja lapā ir 20 apakšlapas un Tu vēlies mainīt saišu krāsu — pietiek izlabot vienu rindiņu CSS failā. Turklāt pārlūkprogramma CSS failu kešo — ielādē tikai vienreiz, kas paātrina turpmāko lapu atvēršanu.

2. CSS galvenē (style tags)

CSS kodu var rakstīt tieši HTML dokumenta galvenē <style> tagā. Šādi var darīt, ja lapa ir tikai viena vai ja vajag pievienot stilus, kas attiecas tikai uz konkrēto lapu:

<head>
<style>
body { font-family: Arial, sans-serif; }
h1 { color: #333; }
</style>
</head>

3. Inline stili (izvairīties!)

CSS kodu var rakstīt arī tieši pie elementa ar style atribūtu, taču šī metode zaudē CSS galveno priekšrocību — satura atdalīšanu no izskata:

<p style="color: red; font-size: 18px;">Sarkanais teksts</p>

Inline stili ir grūti maināmi, palielina HTML izmēru un nav atkārtoti izmantojami. Tomēr atsevišķos gadījumos tie var būt noderīgi, piemēram, e-pastu šablonos.