In momentul de fata codul CSS se poate stoca sau pune in trei locuri si anume:
In general fisierele externe de CSS sunt cele mai folosite. Este de recomandat sa folositi aceasta metoda pentru o mai simpla modificare a intregului website. In acest fel se poate modicica un site intreg schimband continutul unui singur fisier .css. Singura conditie este ca toate paginile sitului sa contina in sectiunea head tag-ul <link>.
html<head>
<link rel="stylesheet" type="text/css" href="fisier_extern.css" />
</head>Unfisier CSS se poate scrie in orice editor de text, notepad, notepad++, word, macromedia, etc dar trebuiesc salvate cu extensia ".css"
Un exemplu simplu de cod CSS ar fi urmatorul
cssbody { background-image: url("img/imagine.png"); }
hr { color: #efefef;}
p { margin-left: 15px;}Observatie: NU lasa spatiu intre numarul specificat si unitatea de masura. Folosind "margin-left:15 px;" in loc de "margin-left:15px;" va genera erori in Firefox si Opera.
Codul CSS in head, nu ar trebuii folosit prea mult cu exceptia faptului ca ai o pagina care are nevoie de un stil propriu si nu il imparte cu nici o alta pagina.
Codul CSS intern este acelasi ca si la cel introdus intr-un CSS extern., cu exceptia unor taguri speciale care il incapsuleaza. Dar sa aruncam o privire la exemplul urmator.
html<head>
<style type="text/css">
body { background-image: url("img/imagine.png"); }
hr { color: #efefef; }
p { margin-left:15px;}
</style>
</head>Dupa cum am mentionat anterior, pentru a plasa CSS in HTML vom folosi tagul <style> impreuna cu atributul type="text/css", pe care le vom pune in sectiunea head a documentului HTML.
CSS inline nu inseamna nici mai mult nici mai putin decat CSS in interiorul tagului HTML.. Folosind CSS-ul sub aceasta forma vom pierde toate avantajele pentru care a fost creat si anume pontru a nu amestega tagurile HTML cu formatarea si prezentarea lor. Exista totusi si avantaje in a folosi CSS-ul in aceasta maniera dupa cum vom vedea. Dar mai intai sa vedem cum anume se poate introduce CSS intr-un tag HTML.
html<p style="text-align:right;color:green;font-family:'times new roman';margin-left:15px;">Acesta este un paragraf formatat cu ajutorul CSS.</p>Observatie:
Dupa cum se observa in exemoplu anterior valoarea fontului este o valoare compusa din trei cuvinte. In acest caz in loc de ghilimele duble am folosit ghilimele simple pentru a evita conflictul cu ghilimele duble folosite pentru a incapsula valoarea atributului style.
Sa mai aruncam o privire peste exemplul in discutie:
cssstyle="text-align:right; color:green; font-family:'times new roman'; margin-left:15px;"Daca am folosii acelasi tip de ghilimele peste tot, browser-ul ar intrerpreta sfarsitul valorii inainte de vreme. Iata bucata de cod CSS care va fi interpretata de browser:
cssstyle="text-align:right; color:green; font-family:"Restul codului CSS fiind ignorat.
Dupa cum am spus codul CSS se poate insera in HTML dupa cum urmeaza:
Voi adauga acum si cea de-a 4-a modalitate si anume:
Ce se intampla insa atunci cand formatam un element si folosim mai multe modalitati de inserare a CSS-ului? Ordinea de reproducere in browser va fi urmatoarea:
Concluzie
Formatarea inline anuleaza toate celelalte expresii CSS de formatare. Iar standardele de formatare ale browser-ului intervin doar atunci cand nu este specificata o alta formatare CSS.
Exceptie:
In cazul in care tagul <link> este pus dupa tagul <style> codul CSS aflat in fisierul .css extern va anula codul CSS intern.
html<head>
<style type="text/css">
body { background-image: url("img/imagine.png"); }
hr { color: #efefef;}
p { margin-left: 15px;}
</style>
<link rel="stylesheet" type="text/css" href="fisier_extern.css" />
</head>