CSS poate fi folosit in multe moduri intr-un website: inline (scris direct in fisierul sursa php sau html), extern (se creeaza un fisier extern separat), intern (scrierea codului in sectiunea de <head>), sau prin alte metodete precum crearea codulului CSS intr-un mod dinamic folosind Javascript.
Cel mai popular mod de folosire este de a crea fisiere CSS externe care sunt apoi adaugate in website printr-un link in head-ul de la HTML. Acest link poate fi scris in urmatorul mod:
<link rel=”stylesheet” href=”https://inoveo.ro/styles.css” type=”text/css”>
Acest mod are foarte multe avantaje precum:
1. permite reutilizarea codului fara a fi nevoie ca acesta sa fie rescris pentru fiecare pagina sau element in parte
2. se pot folosi selectori precum before, after, hover, focus sau active
3. este usor de citit
4. poate fi salvat in cache-ul de la browser pentru a fi refolosit
CSS-ul inline este scris direct in elementul html din pagina. Este in general folosit drept o metoda rapida de a adauga styling la un element si este folositor pentru prototyping in timpul dezvoltarii unui website. Dar recomandarea este de a fi eliminat din codul sursa final si codul CSS sa fie introdus ulterior intr-un fisier extern. Acesta poate fi regasit in codul sursa sub forma:
<div style=”font-weight:bold”>HELLO</div>
CSS-ul intern functioneaza similar cu cel inline, dar vine cu cateva din avantajele celui extern. Acesta este refolosibil in pagina respectiva si permite selectori. Ideal este de a fi introdus in <head> pentru a fi incarcat de catre browser imediat, dar nu este limitat in doar acea sectiune a paginii. Uneori nu ai acces decat la <body> si esti fortat sa iti scrii codul acolo. Ca si in cazul inline de mai sus, incearca sa introduci la final codul intr-un fisier extern.
<style>
.clasa{color:#fff}
</style>
Metoda de creare de cod CSS in mod dinamic folosind Javascript este mult mai rara, fiind preferata manipularea claselor CSS ale unui element prin adaugarea sau eliminarea acestora. Dar uneori este nevoie ca un element din pagina sa fie foarte dinamic si exista posibilitatea de creare a claselor necesare, codul fiind influentat de catre input-urile vizitatorilor sau este random.
Sa presupunem ca se primeste intr-o variabila denumita “arg” un argument al unei functii ce contine un integer intre 1 si 5, argument influentat de catre pozitia cursorului pe pagina, atunci in functia respectiva putem aloca acest argument unui element din pagina ce poate indica marimea acestuia (intre 100% si 500%):
document.getElementsByClassName(‘clasa’)[0].style.transform = ‘scale(‘+arg+’)’;
Toate aceste metode de a introduce cod CSS intr-un website ne permit sa cream un frontend frumos, complex, dinamic si usor de modificat bazat pe un design din ce in ce mai complicat.
