CSS (Cascading Style Sheets) este codul pe care îl utilizezi pentru a personaliza pagina ta web. Noțiuni de bază CSS îți oferă tot ceea ce ai nevoie pentru a începe. Voi răspunde la întrebări precum: Cum pot face ca textul meu să fie negru sau roșu? Cum să fac conținutul meu să apară în diferite locuri pe ecran? Cum pot decora pagina mea web cu imagini de fundal și culori?

Ce este CSS?

La fel ca HTML, CSS nu este chiar un limbaj de programare. Nu este nici limbaj de marcare — este un limbaj de stilizare. Asta înseamnă că îți permite să aplici selectiv stiluri elementelor din documentele HTML. De exemplu, pentru a selecta toate elementele paragraf dintr-o pagină HTML și a transforma textul din interiorul acestora în roșu, vei scrie acest cod CSS:

p {
  color: red;
}

Să încercăm: inserează aceste trei linii de CSS într-un fișier nou în editorul tău de text, și apoi salvează fișierul ca  style.css în directorul tăustyles.

Dar mai trebuie să aplici codul CSS în documentul tău HTML. În caz contrar, stilul CSS nu va modifica modul în care browserul tău afișează documentul HTML (Dacă nu ai urmărit până acum proiectul nostru, citește Gestionarea fișierelor și Noțiuni de bază HTML pentru a afla ce trebuie să faci mai întâi).

  1. Deschide fișierul index.html și inserează următoarea linie undeva în elementul head (adică între tagurile <head> și </head>):
    <link href="styles/style.css" rel="stylesheet" type="text/css">
  2. Salvează fișierulindex.html și încarcă-l în browserul tău. Ar trebui să vezi ceva asemănător:

A mozilla logo and some paragraphs. The paragraph text has been styled red by our css.

Felicitări dacă textul paragrafului tău este roșu! Tocmai ai scris prima ta linie de cod CSS.

Anatomia unui set de reguli CSS

Să ne uităm în detaliu la linia CSS de mai sus:

Întreaga structură este numită set de reguli (dar adesea este prescurtată „regulă”). Reține și numele părților individuale:

Selector
Numele elementului HTML la începutul setului de reguli. Acesta selectează elementul (elementele) care trebuie stilizate (în acest caz, elementele p). Pentru a stiliza un element diferit, doar schimbă selectorul.
Declarația
O singură regulă precum color: red; care precizează care dintre proprietățile elementului vor fi stilizate.
Proprietăți
Moduri în care poți stiliza un element HTML dat. (În acest caz, coloreste o proprietate a elementelor <p>.) În CSS, alegi proprietățile care vrei să le modifici folosindu-te de regula ta.
Valoarea proprietății
La dreapta proprietății după două puncte, ai valoarea proprietății, care alege una dintre numeroasele posibilități pentru o anumită proprietate (există mai multe valori ale proprietății color în afară de red). 

Reține celelalte părți importante ale sintaxei:

  • Fiecare set de reguli (în afară de selector) trebuie să fie în interiorul acoladelor ({}).
  • În cadrul fiecărei declarații, trebuie să folosești două puncte (:) pentru a separa proprietatea de valorile sale.
  • În cadrul fiecărui set de reguli, trebuie să folosești punct și virgulă (;) pentru a separa fiecare declarație de următoarea.

Pentru a modifica simultan mai multe valori ale proprietății, trebuie doar să le separi folosind punct și virgulă, astfel: 

p {
  color: red;
  width: 500px;
  border: 1px solid black;
}

Selectarea mai multor elemente

De asemenea, poți selecta mai multe tipuri de elemente și poți să le aplici un singur set de reguli. Include mai mulți selectori separați prin virgule. De exemplu:

p,li,h1 {
  color: red;
}

Diferite tipuri de selectori

Există mai multe tipuri diferite de selectori. Mai sus, te-ai uitat numai la selectori de element, care selectează toate elementele de un anumit tip în documentele HTML date. Dar poți face selecții mai specifice de atât. Iată câteva dintre cele mai comune tipuri de selectori:

Nume selector Ce selectează Exemplu

Selector element (câteodată numit tag sau selector de tip)

Toate elementele HTML de tipul specificat.

p
Selectează <p>
Selector Identificator (id)

Elementul din pagină cu IDul specificat (într-o pagină HTML, este permis un singur element pentru fiecare ID).

#my-id
Selectează <p id="my-id"> sau <a id="my-id">
Selector clasă

Elementul (elementele) din pagină cu clasa specificată (pe o pagină pot exista mai multe instanțe de clasă).

.my-class
Selectează <p class="my-class"> și <a class="my-class">
Selector de atribut

Elementul (elementele) din pagină cu atributul specificat.

img[src]
Selectează <img src="myimage.png"> dar nu și <img>
Selector pseudo-clasă

Elementul (elementele) specificate, dar numai în situația specificată.

a:hover
Selectează <a>, dar numai atunci când mouseul se deplasează deasupra linkului.

Există mai mulți selectori de explorat, și poți găsi o listă mai detaliată în Ghidul nostru de selectori.

Fonturi și text

Acum că am exporat câteva noțiuni de bază CSS, să începem să adăugăm mai multe reguli și informații în fișierul nostru style.css pentru a face ca exemplul nostru să arate mai bine. Să începem prin a face textul să arate mai bine.

  1. În primul rând, găsește fontul de la Google Fonts pe care l-ai salvat într-un loc sigur. Adaugă elementul <link> undeva în interiorul elementului head din fișierulindex.html(din nou, oriunde între tagurile <head> și </head>). O să arăte ceva de genul:
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
  2. După, șterge regula existentă pe care o ai în fișierul style.css. A fost un test bun, dar textul de culoare roșie nu arată chiar atât de bine.
  3. Adaugă următoarele linii în locul lui, înlocuind linia substituentă cu linia font-family reală pe care ai luat-o de la Google Fonts. (font-family înseamnă doar fonturile pe care vrei să le utilizezi pentru textul tău). Această regulă stabilește mai întâi un font de bază global și dimensiunea fontului pentru întreaga pagină (întrucât <html> este elementul părinte al întregii pagini, și toate elementele din interior acestuia moștenesc același font-size și font-family):
    html {
      font-size: 10px; /* px înseamnă 'pixeli': dimensiunea fontul de bază este acum de 10 pixeli înălțime */
      font-family: placeholder: acesta ar trebui să fie rezultatul luat de la Google fonts
    }

    Notă: Într-un document CSS, orice este scris între /* și */ este un comentariu CSS, pe care browserul îl ignoră atunci când redă codul. Acesta este un loc pentru a scrie note utile despre ceea ce faci.

  4. Acum vei seta dimensiunea fontului pentru elementele care conțin text în interiorul HTML body (<h1>, <li>, și <p>). De asemenea, vom centraliza textul titlului și vom stabili înălțimea liniei și spațiul între litere pentru conținutul body pentru a-l face mai ușor de citit:
    h1 {
      font-size: 60px;
      text-align: center;
    }
    
    p, li {
      font-size: 16px;    
      line-height: 2;
      letter-spacing: 1px;
    }

Poți modifica aceste valori px în funcție de cum vrei ca designul tău să arate, dar în general designul tău trebuie să arate astfel:

a mozilla logo and some paragraphs. a sans-serif font has been set, the font sizes, line height and letter spacing are adjusted, and the main page heading has been centered

Cutii, cutii, este vorba de cutii

Un lucru pe care îl vei observa atunci când scrii CSS este că o mare parte din acesta se referă la cutii — stabilirea dimensiunii, culoarea, poziția, etc. Majoritatea elementelor HTML din pagina ta pot fi gândite ca niște cutii așezate una peste alta.

a big stack of boxes or crates sat on top of one another

Nu este surprinzător că apectul CSS se bazează în principal pe model box. Fiecare dintre blocurile care ocupă spațiu pe pagina ta au proprietăți ca:

  • padding, spațiul din jurul conținutului (de exemplu în jurul textului paragrafului)
  • border, linia solidă care se află chiar în afara padding
  • margin, spațiul din exteriorul elementului

three boxes sat inside one another. From outside to in they are labelled margin, border and padding

În această secțiune, de asemenea, utilizăm:

  • width (a unui element)
  • background-color, culoarea din spatele conținutului unui element și a padding
  • color, culoarea conținutului unui element (de obicei textul)
  • text-shadow: stabilește o umbră a textului din interiorul unui element
  • display: setează modul de afișare al unui element (nu-ți face griji pentru acest lucru încă)

Să începem să adăugăm mai mult proprietăți CSS paginii noastre! Continuă să adaugi aceste noi reguli la sfârşitul paginii, și să nu-ți fie teamă să experimentezi cu schimbarea valorilor ca să vezi cum apare.

Schimbarea culorii paginii

html {
  background-color: #00539F;
}

Această regulă stabilește o culoare de fundal pentru întreaga pagină. Schimbă codul de culoare de mai sus în orice culoare pe care o alegi atunci când planifici siteul tău.

Sortarea body

body {
  width: 600px;
  margin: 0 auto;
  background-color: #FF9500;
  padding: 0 20px 20px 20px;
  border: 5px solid black;
}

Acum pentru elementul <body>. Există destul de multe declarații aici, așa că hai să parcurgem pe rând:

  • width: 600px; — acesta obligă ca body să aibă întotdeauna o lățime de 600px.
  • margin: 0 auto; — Atunci când setezi două valori unei proprietăți ca margin saupadding, prima valoare afectează partea de sus și de jos a elementului (făcându-l 0 în acest caz), iar a doua valoare partea din stânga și dreapta (aici, auto este o valoarea specială care împarte spațiul orizontal disponibil în mod egal între stânga și dreapta). Poți folosi una, trei sau patru valori, așa cum este documentat aici.
  • background-color: #FF9500; — ca mai înainte, aceasta stabilește culoarea de fundal a elementului. Am folosit un fel de portocaliu roșiatic pentru body spre deosebire de albastrul închis pentru elementul <html>, dar poți experimenta cu acesta.
  • padding: 0 20px 20px 20px; — avem patru valori stabilite pentru padding, pentru a face mai mult spațiu în jurul conținutului nostru. De data aceasta nu vom seta padding deasupra la body, dar vom seta 20 pixeli în stânga, jos și dreapta. Valorile setate sunt sus, dreapta, jos și stânga în această ordine.
  • border: 5px solid black; — acesta stabilește un chenar negru solid de 5 pixeli pentru toate laturile elementului body.

Poziționarea și stilizarea titlului paginii noastre

h1 {
  margin: 0;
  padding: 20px 0;    
  color: #00539F;
  text-shadow: 3px 3px 1px black;
}

Probabil că ai observat că este un spațiu în partea de sus a elementului. Acest lucru se întâmplă deoarece browserele aplică un anumit stil implicit elementului <h1> (printre altele), chiar dacă nu ai aplicat deloc CSS! Asta ar putea părea o idee nereușită, dar dorim chiar și o pagină web nestilizată să aibă o lizibilitate de bază. Pentru a scăpa de spațiu suprascriem stilul implicit prin setarea margin: 0;.

În continuare, am setat padding sus și jos pentru titlu la 20 pixeli, și am făcut titlul textului să aibă acceași culoare precum culoarea de fundal a elementului html.

O proprietate destul de interesantă pe care am utilizat-o aici este text-shadow, care aplică o umbră de text la conținutul textului elementului. Cele patru valori sunt următoarele:

  • Prima valoare în pixeli setează offesetul orizontal al umbrei din text — cât de departe se mișcă: o valoare negativă trebuie să o mute la stânga.
  • A doua valoare în pixeli setează offsetul vertical al umbrei din text — cât de departe se îndepărtează, în acest exemplu; o valoare negativă ar trebui să o deplaseze în sus.
  • A treia valoare în pixeli setează blur radius a umbrei — o valoare mai mare va însemna o umbră mai neclară.
  • A patra valoare setează culoarea de bază a umbrei.

Din nou, încearcă să experimentezi diferite valori pentru a vedea ce poți face!

Centrarea imaginii

img {
  display: block;
  margin: 0 auto;
}

În cele din urmă, vom centra imaginea pentru a face să arate mai bine. Am putea folosi din nou trucul margin: 0 auto așa cum am făcut mai devreme pentru body, dar trebuie să mai facem și altceva. Elementul <body> este de nivel de bloc, ceea ce însemnă că ocupă spațiu pe pagină și poate avea margin și alte valori de spațiere aplicate. Imaginile, pe de altă parte, sunt elemente inline, ceea ce înseamnă că acestea nu pot. Și deci pentru a aplica margini imaginii, trebuie să-i dăm imaginii un comportament de nivel bloc folosind display: block;.

Notă: Nu-ți face griji dacă nu ai înțeles încă display: block; și distincția la nivel de bloc/inline. Vei înțelege mai bine atunci când vei studia CSS mai în profunzime. Poți afla mai multe despre diferitele valori disponibile de display la  pagina de referință display.

Concluzie

Dacă ai urmat toate instrucțiunile din acest articol, ar trebui să ai o pagină care arată astfel (poți vedea și versiunea noastră aici):

a mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip.

Dacă te blochezi, poți compara întotdeauna munca ta cu exemplul nostru de cod pe GitHub.

Aici, am acoperit doar o mică parte de CSS. Pentru a afla mai multe, mergi la Subiectul nostru de învățare CSS.

Document Tags and Contributors

 Contributors to this page: alexandracaulea
 Last updated by: alexandracaulea,