CSS-ul (Cascading Style Sheet) este un limbaj care aplica prezentare (stil, layout si, mai nou, animatie) limbajelor de continut, fie ca vorbim despre HTML, XHTML, XML sau SVG.
Cu alte cuvinte, daca HTML-ul spune browser-ului cum este structurata informatia (prin elemente precum <h1></h1>, <p></p>,<a></a> etc.), CSS-ul spune aceluiasi browser cum sa afiseze informatia astfel incat aceasta “sa dea bine” la ochi (stil, dimensiuni, spatiere, culoare).
Regulile CSS iti permit sa aplici proprietati elementelor paginii HTML. Astfel, cand doresti sa stilizezi un element din cadrul unei pagini HTML, identifici acel element si ii adaugi proprietati ce tin de culoare, dimensiune, font, pozitionare etc.
O regula CSS are de cele mai multe ori forma:
selector
{
proprietate1: valoare;
proprietate2: valoare;
proprietate3: valoare;
}
Selectorul identifica elementele din pagina care vor fi afectate de regula CSS.
Selectorul poate fi reprezentat de numele elementului HTML (body, div, p, h1, h2), sau de atributele “class” sau “id” definite in pagina HTML.
Acoladele contin perechile “proprietate: valoare”, acestea fiind separate la randul lor prin simbolul punct si virgula “;”.
Proprietatile definesc caracteristicile pe care vrei sa le schimbi pentru elementele HTML selectate. Acestea se pot referi la culoare, background, font, bordura, spatiul de izolare, spatierea intre litere, pozitia in cadrul paginii si multe altele.
Valorile tin de fiecare proprietate in parte. Spre exemplu, proprietati care tin de pozitionare, margini, lungime, inaltime pot primi ca valori unitati de masura (pixeli, procente, centimetri, inci etc.).
De exemplu, daca vrem sa definim felul cum este afisat titlul h1 in pagina, putem sa scriem:
h1
{
margin: 5px;
font-family: arial, sans-serif;
color: blue;
}
Aceasta regula spune browserului ca heading-ul h1 va trebui afisat cu:
– o distantiere fata de celelalte elemente de pagina de cel putin 5 pixeli;
– va trebui de asemenea sa foloseasca fontul Arial, iar in lipsa acestuia un font fara serifa;
– culoarea albastra.
Cum introduci stilurile intr-o pagina HTML
Exista mai multe modalitati de introducere a stilurilor in HTML.
Introducere CSS inline
Astfel, cea mai simpla, dar si problematica pe termen lung este introducerea stilului in tag-ul HTML folosindu-te de atributul “style”.
Spre exemplu, daca ai un paragraf HTML si vrei sa ii modifici modul de afisare, vei scrie:
<p style="background-color: yellow; font-weight:bold; color: red; margin: 20px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Doar pentru umplutura...</p>
Codul va fi afisat astfel:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Doar pentru umplutura…
Prin acest atribut ii spui browserului sa afiseze un paragraf cu fundal de culoare galbena, fonturi ingrosate, culoare rosie si cu margine fata de celelalte elemente de cel putin 20 de pixeli.
Spuneam ca acea metoda (ca de altfel si urmatoarea…) este problematica pe termen lung deoarece, in momentul in care numarul de pagini html va creste, daca vei dori sa faci o modificare a stilului, va trebui sa iei la mana fiecare pagina html pentru a face modificarile
Introducere CSS in head-ul paginii
CSS-ul poate fi introdus in cadrul elementului “head” al paginii HTML cu ajutorul elementului <style></style>
Astfel, urmatorul cod:
<!DOCTYPE html>
<html>
<head>
<title>Stil CSS intr-o pagina html</title>
<style type="text/css">
p
{
color:white;
background:blue;
padding:5px;
}
</style>
</head>
<body>
<p>Text alb scris pe fundal albastru</p>
</body>
</html>
Introducere CSS prin fisier extern
Scopul final pentru paginile de internet este despartirea totala a informatiei de design. Cu alte cuvinte, este bine ca informatia sa fie transmisa, chiar daca nu exista un layout al paginii care sa faca aceasta informatie placuta ochiului.
Iar introducerea CSS intr-o pagina prin intermediul unui fisier extern este metoda cea mai apropiata de aceasta filosofie.
Prin urmare, este preferabil ca stilul paginilor sa fie definit intr-un fisier extern. Acesta va avea extensia .css si va fi un fisier de tip text (prin urmare orice editor de text va putea fi folosit pentru deschiderea lui).
Fisierul cu extensia .css va contine doar regulile CSS. Spre exemplu, un fisier style.css va avea:
/* acesta este un comentariu */
p {
color:white;
background:blue;
padding:5px;
}
Includerea fisierului style.css o vei face de preferinta prin intermediul elementului <link> avand ca valoare a atributului “href” locatia fisierului style.css. Este recomandat ca includerea fisierului prin acest tag sa aiba loc in cadrul elementului head:
<!DOCTYPE html>
<html>
<head>
<title>Stil CSS intr-o pagina html</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
...
...
...
</body>
</html>
Daca fisierul se va gasi acolo unde ii spui paginii HTML ca se gaseste, regulile de afisare vor fi respectate de aceasta pagina.
In speranta ca nu este prea mult pentru o introducere in CSS, te invit sa citesti si lectiile urmatoare despre CSS.
In privinta imaginii postarii, cartea aceasta chiar exista, dar nu va recomand sa o cumparati, avand multe erori.
