Invatare Atomica

Stilizare cu CSS

Progres lectie:
0%
🎯

Obiectivul lectiei

HTML-ul da structura, CSS-ul da frumusetea! Hai sa transformam site-ul intr-o capodopera vizuala.

Dupa aceasta lectie vei putea:

  • Sa explici ce este CSS
  • Sa analizezi structura unei reguli CSS
  • Sa creezi si sa legi un fisier CSS extern (style.css) la paginile HTML ale proiectului
  • Sa aplici stiluri de baza: culori, fonturi, spatieri

Incearca singur!

🎯 INCEARCA

Creeaza fisierul style.css!

Provocarea ta (5 minute):

1. In folderul css/ al proiectului, creeaza un fisier nou: style.css

2. Adauga o regula CSS care schimba culoarea de fundal a paginii

3. In index.html, leaga fisierul CSS in <head> cu tag-ul <link>

4. Salveaza ambele fisiere si reincarca pagina in browser

💡 Nu stii cum? Click aici

In css/style.css:

body { background-color: lightblue; }

In index.html, in <head>:

<link rel="stylesheet" href="css/style.css">

Acelasi tag <link> se pune si in celelalte pagini HTML ale proiectului.

1

Ce este CSS?

Ce este CSS?
CSS (Cascading Style Sheets) este limbajul care descrie cum arata elementele HTML. Cu CSS controlezi culorile, fonturile, spatierile, layout-ul - tot aspectul vizual!
Analogie: HTML = scheletul casei, CSS = vopseaua, tapetul, mobilierul
2

Structura unei reguli CSS

Structura unei reguli CSS
selector { proprietate: valoare; alta-proprietate: alta-valoare; }
  • Selector - ce element vrei sa stilizezi (body, h1, p, nav...)
  • Proprietate - ce aspect vrei sa schimbi (color, font-size...)
  • Valoare - cum vrei sa arate (red, 20px, center...)
3

CSS extern: un fisier pentru tot site-ul

CSS extern: un fisier pentru tot site-ul

Proiectul tau are deja folderul css/ (creat in lectia 3). Pune stilurile intr-un singur fisier css/style.css si leaga-l in fiecare pagina HTML:

<link rel="stylesheet" href="css/style.css">

De ce e mai bine decat <style> in fiecare pagina?

  • Schimbi o culoare in style.css → se actualizeaza toate paginile automat
  • Codul HTML ramane curat, fara blocuri <style> repetate
  • Acesta e modul profesional de a scrie CSS

Exercitii practice

Exercitiul 1 (Nivel minim) - Proiect web: Stilizare cu CSS

Creeaza o pagina web pentru Stilizare cu CSS

Cerinte obligatorii:

⭐ Bonus (pentru nota maxima):

  • Adauga interactivitate JavaScript simpla
Vezi rezolvarea

Foloseste tot ce ai invatat in modul (structura HTML din lectiile 2-3) si adauga stilizarea CSS din aceasta lectie.

  1. HTML valid si semantic: pagina are <header>, <nav>, <main>, <footer> si <title> in <head>.
  2. CSS extern: in <head> pui <link rel="stylesheet" href="css/style.css">, apoi in css/style.css scrii reguli dupa modelul selector { proprietate: valoare; }, de exemplu body { background-color: #f4f4f4; color: #333; }.
  3. Responsive de baza: <meta name="viewport" content="width=device-width, initial-scale=1.0"> in <head> — fara ea site-ul apare mic pe telefon.

Bonus JavaScript: aceasta lectie NU preda JavaScript, deci punctul bonus nu se poate rezolva din ce s-a predat pana acum.

Exercitiul 2 (Nivel standard) - Stilizeaza site-ul tau cu CSS extern

Creeaza fisierul css/style.css si aplica stiluri site-ului tau:

  1. Alege o paleta de 2-3 culori pentru site-ul tau si aplica-le: culoare de fundal, culoare pentru titluri, culoare pentru text obisnuit.
  2. Seteaza un font Google (ex: Inter, Roboto) in body si verifica ca se aplica pe toate paginile prin linkul catre css/style.css.
  3. Stilizeaza meniul de navigare: adauga background-color, elimina punctele de lista (list-style: none) si fa link-urile sa se afiseze inline.

Raspunde numerotat: 1. ... 2. ... 3. ...

Vezi rezolvarea

Totul se scrie in css/style.css, legat in fiecare pagina prin <link rel="stylesheet" href="css/style.css">:

  1. Paleta de culori: body { background-color: #f4f4f4; color: #333333; } pentru fundal si text, h1, h2 { color: #2c3e50; } pentru titluri. Se aplica pe toate paginile fiindca toate au acelasi link.
  2. Font Google: in <head>, sub link-ul catre style.css, adauga <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">, apoi body { font-family: 'Roboto', sans-serif; }. Nota: acest link catre Google Fonts nu a fost predat explicit in lectie (doar principiul CSS extern) — e o extindere necesara aici.
  3. Meniu: nav { background-color: #2c3e50; }, nav ul { list-style: none; padding: 0; }, nav li { display: inline; margin-right: 15px; }.

Exercitiul 3 (Nivel performanta) - Analiza alegerilor de design

Cerinta: Descrie in scris alegerile de design CSS pe care le-ai facut pentru site-ul tau si justifica fiecare decizie.

Indicii:

  • De ce ai ales acele culori? (ce transmit emotional: liniste, energie, profesionalism?)
  • De ce ai ales acel font? (lizibilitate, stil)
  • Ce avantaj are un fisier CSS extern fata de CSS scris direct in HTML (style="")?
  • Ce proprietate CSS ai gasit mai dificila si cum ai rezolvat?

Cuvinte cheie de folosit: selector, proprietate, valoare, font-family, color, background-color, CSS extern, mostenat

Vezi rezolvarea

Nu e un eseu gata facut — e o schita dupa care iti construiesti singur raspunsul.

  1. Numeste culorile alese (coduri hex) si justifica emotional: ex. albastru inchis = incredere/profesionalism, nu doar "imi place".
  2. Justifica fontul ales: lizibilitate pe ecran, potrivire cu tema site-ului.
  3. Avantajul CSS extern (atom 3): o modificare in style.css se aplica automat pe toate paginile, HTML ramane curat.
  4. O proprietate CSS care ti-a fost greu si cum ai rezolvat-o (cauta explicatia, nu doar "am incercat pana a mers").

Criterii de evaluare: foloseste corect cuvintele selector, proprietate, valoare, font-family, color, background-color, CSS extern, mostenat; justificarile sunt concrete, legate de site-ul TAU.

Ce ai invatat astazi

  • Ai invatat ce este CSS (Cascading Style Sheets)
  • Acum stii structura unei reguli CSS: selector, proprietate, valoare
  • Ai creat un fisier CSS extern (css/style.css) si l-ai legat la paginile proiectului

Vrei mai mult?

Provocare: Deschide site-ul tau in browser, apasa F12 (Unelte pentru dezvoltatori), selecteaza un titlu si, in panoul Elements/Styles, schimba live o valoare CSS (culoare sau dimensiune font) direct in browser, fara sa atingi fisierul style.css. Observa schimbarea instant, apoi reincarca pagina - vezi ca modificarea dispare pentru ca n-a fost salvata in fisier.

De ce? Daca ai doua reguli CSS care tintesc acelasi h1 cu culori diferite, de ce alege browserul o singura culoare? Ce crezi ca decide - ordinea din fisier, sau ceva legat de cat de "precis" e scris selectorul?

In lumea reala: Dezvoltatorii profesionisti folosesc F12 zilnic pentru a testa rapid o idee de design inainte s-o scrie definitiv in fisier - se numeste editare live si economiseste ore de incercare-eroare.

Urmatoarea lectie

Continua cu lectia urmatoare pentru a aprofunda cunostintele.

Continua →