Este important sa vorbim si de locurile unde putem scrie regulile CSS.
Pana acum am folosit tagul <style> din head pentru a scrie reguli CSS, dar aceasta este doar o metoda.
<head>
<style>
selector {
regula: valoare;
}
</style>
</head>Reguli CSS intr-un fisier separat
O alta metoda de aduce reguli CSS in pagina este de a le incarca dintr-un fisier separat.
Pentru aceasta vom folosi tagul <link />.
<link rel="stylesheet" type="text/css" href="fisier.css" />
Acest tag primeste atributul href care precizeaza calea catre un fisier separat unde sunt scrise doar reguli CSS.
Un fisier css este doar un fisier text care are extensia .css, asa ca poate fi citit cu orice editor de text. Regulile in acest fisier se scriu la fel ca in tag-ul <style>.
Avantajul acestei metode este ca acel fisier poate fi folosit pe mai multe pagini. Asa ca daca ne decidem sa facem o schimbare de design, va trebui sa modificam intr-un singur loc. Altfel daca am scrie regulile in tagul <style> si am avea mai multe pagini, va trebui sa schimbam in fiecare pagina unde avem codul CSS prezent.
Reguli CSS inline
Cea dea treia metoda este sa scriem regulile CSS direct pe elementul pe care dorim sa il stilizam, folosind atributul style.
In acest fel nu va mai trebui sa scriem un selector, pentru ca vom scrie direct pe elementul pe care dorim sa il stilizam dar aceasta metoda are o multime de alte dezavantaje.
In primul rand regulile se scriu greu si arata destul de urat. Toate regulile trebuie scrise pe un singur rand, separate doar prin ;
<p style="color:blue;font-size:22px;">Un paragraf albastru cu marimea textului de 22px.</p>
In al doilea rand, atunci cand vrem sa schimbam ceva, de exemplu culoarea paragrafelor, va trebui sa modificam atributul style pe fiecare element <p></p>, din fiecare pagina. Ceea ce nu este usor.
Concluzii
Si acest lucru ne aduce la ultimul punct, separarea continutului de prezentare. Limbajul CSS a fost inventat tocmai pentru a separa modul in care arata o pagina, de continutul ei.
Regulile CSS trebuie decuplate de elemente pe care le stilizeaza, de aceea ele ar trebui scrise separat, cel mai recomandat ar fi intr-un fisier separat, sau daca nu intr-un tag <style>.
Asadar avem 3 metode de a scrie CSS:
-
intr-un fisier .css pe care il aducem in pagina folosind tagul
<link /> -
direct in pagina, in interiorul unui tag
<style></style> -
sau direct pe un element, folosind atributul
style
Un lucru care de obicei cauzeaza probleme este modul in care se aplica regulile CSS. Daca avem mai multe reguli in locuri diferite pentru acelasi element, care va fi regula finala aplicata lui?
Despre aceasta vom discuta in lectia urmatoare.