Exista o legatura foarte stransa intre HTML si CSS, atat de stransa incat este aproape imposibil sa inveti unul fara celalalt.

Pana acum, am vazut ca HTML-ul este folosit pentru a preciza continutul dintr-o pagina web. Rolul Css este folosit pentru a stiliza acel continut, pentru a-l face sa arate cum dorim.

Asadar este un limbaj folosit doar pentru a schimba modul in care este prezentat continutul, ceea ce este foarte important.

El este destul de diferit de HTML in sintaxa, codul arata complet altfel si de aceea avem acest capitol special doar pentru CSS.

Numele css este o prescurtare de la “cascading style sheets”, care s-ar traduce drept o foaie cu anumite reguli de stilizare, ce au efect in cascada, si vom discuta imediat ce inseamna aceasta.

Cum se foloseste

Asadar regulile css se vor adresa elementelor html, pentru a le stiliza. Pentru a face aceasta avem 3 metode:

  1. putem scrie toate regulile intr-un fisier separat si apoi sa il incarcam folosind tagul <link />
  2. le putem scrie direct in document, in interiorul unui tag <style>
  3. sau le putem scrie direct pe un tag html, drept valoare unui atribut

Noi ne vom axa pe a doua metoda, pentru ca seamana cu prima, doar ca cssul nu este intr-un fisier separat. Ambele metode sunt mult mai bune decat a treia, care nu ar mai trebui folosita.

Selectorii CSS

Asadar vom folosi a doua metoda si anume in tagul de <head>, vom avea un tag de tip <style>, pe care il inchidem: 

<head>
    <style>
        ...
    </style>
</head>

Tot codul CSS va trebui scris in interiorul tag-ului <style>.

Iar acest cod il putem impartii in doua categorii:

  1. o metoda prin care ne adresam unui element HTML, care se mai numeste si selectorul
  2. si codul propriuzis de stilizare, scris intre paranteze acolade {}

Ca si selectori putem folosi mai multe metode, dar cele mai importante 3 sunt: folosind numele elementului HTML, folosind valoarea atributul class a unui element sau folosind valoarea atributului id.

Noi ne vom axa acum pe a folosid numele elementului HTML. In urmatoarea lectie vom vorbi mai mult despre atributele id si class

Exemplu

Sa spunem ca vrem sa schimbam culoarea pentru elementul <h1>.

Asadar selectorul va fi numele elementului, iar codul css va fi intre paranteze: 

<head>
    <style>
        h1 { color: blue; }
    </style>
</head>

Haideti sa analizam putin acest cod. Ca si selector am scris direct numele elementului h1, fara alte simboluri precum < > ca in html. Apoi am deschis o paranteza acolada, am scris ce vrem sa schimbam, in cazul nostru culoarea color, apoi : si apoi valoarea care vrem sa i-o dam blue. La sfarsit am pus ; si am inchis paranteza acolada.

In HTML daca vroiam sa scriem un atribut unui element, scriam numele atributului, apoi semnul = si apoi valoarea intre ghilimele, de ex atribut="valoare".

In CSS, vom scrie numele a ceea ce vrem sa schibam, apoi doua puncte, noua valoare si apoi punct si virgula, de ex: ce schimbam:o valoare;. Semnul ; este foarte important pentru ca delimiteaza regulile intre ele. Pentru acest element putem scrie mai multe reguli CSS, dar fiecare va trebui separata cu ;.

Mai multe reguli CSS

De exemplu, daca pe langa culoare, vrem sa schimbam si marimea textului vom mai scrie inca o regula inca continuare: 

<head>
    <style>
        h1 { color: blue; font-size: 35px; }
    </style>
</head>

Tot ce este cuprins intre paranteleze acolade se refera la elementul <h1>.

Vedem ca fiecare regula este separata prin ;. Prima se refera la culoare color, iar a doua la marimea font-ului font-size.

Un avantaj al limbajului CSS este ca nu conteaza spatiile goale intre cuvine si nici daca avem randuri liberere intre reguli. Asta inseamna ca putem scrie cate o regula pe rand, astfel fiind mai usor de citit: 

<head>
    <style>
        h1 { 
            color: blue; 
            font-size: 35px; 
        }
    </style>
</head>
Următoarea lecție >