Stiluri CSS în HTML. Atribute: id, class. Referințe externe: external style sheets.

Atributul id

Pentru a defini un stil specific pentru un element special, adăugați un atribut id elementului: 
<p id = "p01"> Sunt diferit </p>
apoi definiți un stil pentru elementul cu id-ul specific:

Exemplu: 
#p01 {
  color: blue;
}
Notă: Id-ul unui element ar trebui să fie unic într-o pagină, astfel încât selectorul de id să fie utilizat pentru a selecta un element unic!

Atributul class

Pentru a defini un stil pentru tipuri speciale de elemente, adăugați un atribut de clasă elementului: 
<p class = "error"> Sunt diferit </p>
apoi definiți un stil pentru elementele cu clasa specifică:

Exemplu: 
p.error {
  color: red;
}

Referințe externe

Foile de stil externe (external style sheets) pot fi trimise cu o adresă URL completă sau cu o cale relativă la pagina web curentă.
Acest exemplu utilizează o adresă URL completă pentru a face legătura cu o foaie de stil (style sheet):

Exemplu: 
<link rel="stylesheet" href="/html/styles.css">
Acest exemplu se leagă la o foaie de stil localizată în folderul html de pe site-ul web curent:

Exemplu: 
<link rel="stylesheet" href="/html/styles.css">
Acest exemplu se leagă la o foaie de stil localizată în același folder cu pagina curentă:

Exemplu: 
<link rel="stylesheet" href="styles.css">

Rezumat
  • Utilizați atributul HTML style pentru stilul CSS în linie (inline).
  • Utilizați elementul HTML <style> pentru a defini stilul CSS intern.
  • Utilizați elementul HTML <link> pentru a vă referi la un fișier CSS extern.
  • Utilizați elementul HTML <head> pentru a stoca elementele <style> și <link>.
  • Utilizați proprietatea CSS color pentru culorile de text.
  • Utilizați proprietatea CSS font-family pentru fonturile text.
  • Utilizați proprietatea CSS font-size pentru dimensiunile textului.
  • Utilizați proprietatea CSS border pentru margini.
  • Utilizați proprietatea CSS padding pentru spațiu în interiorul border.
  • Utilizați proprietatea CSS margin pentru spațiu în afara border.

HTML Style Tags
 
Etichetă Descriere
<style> Definește informațiile despre stil pentru un document HTML
<link> Definește o legătură între un document și o resursă externă