Cand browserul incepe sa afiseze fisierul HTML il aranjeaza dupa cum este in fisierul CSS definit.
Tipuri de CSS
CSS-ul este de 3 feluri:
CSS Extern
Un stil extern este ideal atunci cand doresti sa aplici acelasi design mai multor pagini. Cu acest tip de CSS ai posibilitatea sa schimbi look-ul unui website modificand doar un fisier. Toate fisierele HTML trebuie sa aiba in head tag-ul <link> care include stylesheet-ul.
<head>
<link rel="stylesheet" type="text/css" href="fisieruldestil.css">
</head>
Acest tip de fisier poate fii creat in orice editor de text, cu conditia sa aiba extensia css si sa nu contina niciun tag HTML.
Exemplu fisier CSS extern:
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
! Nu adauga spatiu intre valoare si unitatea de masura: margin-left:20 px; margin-left:20px;
CSS Intern
CSS-ul intern trebuie sa fie folosit doar atunci cand vreti sa folositi stilurile respective pe o singura pagina. Acest css intern se defineste in sectiunea de head a fisierului html intre tag-urile <style>:
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
CSS Inline
CSS-ul inline este lipsit de o multime de avantaje fata de css-ul extern si chiar si de cel intern. Folositi-l cu grija si unde este posibil sa folosesti extern, fa-o!
Pentru a aplica tag-uri css inline te ajuti de tag-ul style folosit intr-un element HTML relevant.
<p style="color:sienna;margin-left:20px">Paragraf CSS Inline.</p>
Stiluri Multiple
Daca ai mai definit un element in 2 stiluri diferite browserul va prealua valoarea mai specifica. Sa presupunem ca avem un css extern cu acest selector h2:
h2
{
color:red;
text-align:left;
font-size:8pt;
}
Si css-ul intern are aceste proprietati pentru acelasi tag, h2:
h2
{
text-align:right;
font-size:20pt;
}
Daca in fisierul HTML cu css-ul intern ai un link si catre css-ul extern tag-ul h2 va lua aceste valori:
color:red;
text-align:right;
font-size:20pt;
Stefanescu Mihai
