CSS stilu pielietošana elementiem

Ir trīs galvenie veidi, kā pievienot CSS stilus HTML elementiem:

• izmantojot style atribūtu pašā elementā;
• izmantojot klasi .class;
• izmantojot unikālu identifikatoru #id.

Stili HTML elementā (inline)

Stilus var norādīt tieši pašā HTML elementā, izmantojot atribūtu style="...".
Šī metode ir ātra un ērta, bet nav ieteicama lielākos projektos, jo stilu kļūst grūti pārvaldīt.

index.html

<p style="color: #79d4fd; font-size: 18px;">
  Piemērs ar tekstu vienā paragrāfā
</p>

Stili ar .class (klasi)

CSS stilus var definēt atsevišķā failā, piemēram, styles.css, un piešķirt HTML elementiem ar atribūtu class="...".

Priekšrocība: vienu klasi var izmantot vairākiem elementiem, tāpēc šo pieeju lieto visbiežāk.

styles.css

.text {
  font-size: 18px;
  color: #79d4fd;
}

index.html

<p class="text">Teksta piemērs Nr. 1</p>
<p class="text">Teksta piemērs Nr. 2</p>

Stili ar #id (unikālu identifikatoru)

ID tiek izmantots, ja ir nepieciešams pielietot stilus tikai vienam konkrētam elementam. Katram ID jābūt unikālam HTML dokumentā.

🟩 Atceries!

Atšķirība starp .class un #id:

• .class var izmantot vairākiem elementiem;
• #id drīkst izmantot tikai vienu reizi dokumentā.

styles.css

#name {
  font-size: 18px;
  background-color: yellow;
}

index.html

<p id="name">Mani sauc Jānis</p>

Kopsavilkums

Veids	Sintakse piemērs	Kur izmanto
inline	style="..."	Ātri, bet ne pārskatāmi
Klase	.class	Vairākiem elementiem
ID	#id	Vienam unikālam elementam

Noderīgi materiāli

CSS Selectors

https://www.w3schools.com/html/html_comments.asp

CSS .class Selector

https://www.w3schools.com/cssref/sel_class.php

CSS #id Selector

https://www.w3schools.com/cssref/sel_id.php