Una din cerințele fundamentale ale CSS, de la concepere era ca stilul să vină din mai multe surse. Așa că există mai multe feluri de a include cod CSS într-o pagină de HTML.
Prin atributul style
Am mai văzut asta în lecții trecute: codul CSS poate fi inclus în atributul style, disponibil pe orice element HTML:
<span style="color: red">
Codul CSS inclus astfel va avea efect fix pe elementul pe care a fost definit. Mie nu îmi place să folosesc CSS așa pentru că nu este suficient de separat de HTML, și nici nu e foarte flexibil. Dar îl pot folosi dacă am nevoie să scriu mai repede un cod.
Prin elementul <style>
Folosind elementul <style>, putem să folosim toată puterea CSS chiar în codul HTML.
Dar cum știm ce stiluri se aplică pe ce element? Pentru asta, vom folosi selectori simpli sau selectori compuși. Selectorul îi spune browser-ului exact elementul pe care vrem să îl stilizăm.
<style>
a {
color: green;
}
</style>
Acest cod va face ca toate ancorele (elementul <a>) să aibă culoarea verde.
În acest caz a este selectorul, iar proprietățile aplicate pe acest selector se dau între {acolade} și arată la fel ca și proprietățile aplicate prin atribut.
De menționat că după fiecare valoare, trebuie pus punct-și-virgulă ;.
Elementul <style> poate fi pus și în <body>, dar este indicat să îl punem în <head>.
Browserul citește codul HTML linie-cu-linie. Atunci când întâlnește un element <style>, va memora stilurile declarate acolo.
Apoi, când ajunge la un element ce trebuie afișat, se uită în memorie ce stiluri au fost declarate pentru acel element și afișează în funcție de ele.
Dacă se declară stiluri mai târziu, după ce a fost afișat elementul, va trebui să re-afișeze elementul, cu noile stiluri.
Motivul pentru care e indicat să punem <style> în <head> este că în <head> nu există elemente ce pot fi stilizate, iar <head> este mereu înaintea <body>. Astfel nu există pericolul să fie deja afișate elemente în timp ce se înregistrează stilurile.
Prin fișier extern, folosind <link />
Selectorii pe care îi putem pune în elementul <style> pot fi puși și într-un fișier extern, cu extensia .css. În HTML vom folosi tagul: