Lectia 5: Introducere in CSS | TIC Clasa a VII-a

Incearca singur!

🎯 INCEARCA

Transforma o pagina plictisitoare!

Nu trebuie sa intelegi totul acum. Doar copiaza, ruleaza si observa magia CSS!

Misiunea ta (5 minute):

Copiaza codul de mai jos si lipeste-l intr-un fisier nou pe CodePen (sectiunea HTML). Apasa Run si observa cum arata.

<!DOCTYPE html>
<html>
<head>
<title>Pagina mea</title>
<style>
/* PASUL 1: Schimba fundalul si textul */
body {
            background-color: #1a1a2e;
            color: white;
            font-family: Arial, sans-serif;
            padding: 30px;
        }

        /* PASUL 2: Stilizeaza titlul */
h1 {
            color: #8b5cf6;
            font-size: 2.5rem;
            border-bottom: 3px solid #8b5cf6;
            padding-bottom: 10px;
        }

        /* PASUL 3: Stilizeaza paragrafele */
p {
            font-size: 1.1rem;
            line-height: 1.8;
            margin-bottom: 15px;
        }

        /* PASUL 4: O clasa speciala */
.important {
            background-color: rgba(139, 92, 246, 0.2);
            padding: 15px;
            border-radius: 10px;
            border-left: 4px solid #8b5cf6;
        }
    </style>
</head>
<body>
<h1>Bine ai venit!</h1>
<p>Aceasta este prima mea pagina cu CSS.</p>
<p class="important">CSS face paginile sa arate profesional!</p>
<p>Fara CSS, totul ar fi text negru pe fundal alb.</p>
</body>
</html>

▶ Deschide CodePen

Schimba culoarea din #8b5cf6 (violet) in #ef4444 (rosu). Observa ce se schimba - titlul si bordura devin rosii!

Schimba background-color: #1a1a2e in background-color: #0f172a. Fundalul devine si mai inchis!

Sterge tot blocul <style>...</style> si ruleaza din nou. Observa diferenta enorma! Aceeasi pagina, dar fara CSS - total diferita.

🌟 BONUS: Adauga linia text-align: center; in interiorul regulii body { }. Ce se intampla cu tot textul?

▶ Nu stii unde sa scrii pe CodePen? Click aici

Pe CodePen, copiaza tot codul (inclusiv <!DOCTYPE html>) in caseta din stanga sus marcata "HTML".

Alternativ, poti deschide Notepad, lipi codul, salva fisierul ca test.html, apoi deschide fisierul in browser (dublu-click).

▶ Ce observi la pasul 4? Click aici

Fara CSS, pagina arata complet diferit: text negru pe fundal alb, font Times New Roman, fara spatiere frumoasa.

Aceasta este puterea CSS-ului: acelasi HTML, dar cu aspect total diferit. CSS este "hainele" pe care le imbraci pe structura HTML.

Ce este CSS si de ce il folosim?

CSS (Cascading Style Sheets = "Foi de Stil in Cascada") este limbajul care controleaza aspectul vizual al paginilor web. Gandeste-te la CSS ca la hainele paginii web: HTML este corpul (structura), iar CSS este imbracamintea care decide cum arata — culori, forme, dimensiuni, spatiere.

Fara CSS, toate paginile web ar arata la fel: text negru pe fundal alb, cu font Times New Roman. Cu CSS, poti controla absolut totul: culori, fonturi, dimensiuni, spatiere, animatii, layout si mult mai mult.

🏠 Analogie: Casa

Imagineaza-ti o casa. HTML = constructia casei (peretii, acoperisul, usile, ferestrele). CSS = decorarea casei (culoarea peretilor, modelul parchetului, tipul de mobila, cortinele — vopseaua, tapetul, mobilierul si iluminatul). Acelasi plan de casa poate arata complet diferit cu decorari diferite!

La fel si o pagina web: acelasi HTML poate arata profesional sau amator, modern sau invechit - totul depinde de CSS.

Cum scriem o regula CSS?

Fiecare regula CSS are 3 parti: un selector (ce element vrei sa stilizezi), o proprietate (ce vrei sa schimbi) si o valoare (cum vrei sa arate).

Formula generala

selector {
    proprietate: valoare;
}

Metoda 1: CSS Inline (in atributul style)

Scrii CSS direct in tag-ul HTML, in atributul style="". Simplu dar nu recomandat pentru proiecte mari.

Inline CSS

<h1 style="color: purple; font-size: 2rem;">Titlu</h1>
<p style="color: gray; margin: 10px;">Paragraf</p>

Metoda 2: CSS Intern (tag-ul <style> in <head>)

Scrii toate regulile CSS intr-un bloc <style> in <head>. Recomandat pentru exercitii - totul e intr-un singur fisier.

CSS Intern

<head>
<style>
h1 { color: purple; font-size: 2rem; }
        p  { color: gray; margin: 10px; }
    </style>
</head>

Metoda 3: CSS Extern (fisier .css separat)

CSS-ul sta intr-un fisier separat (ex: stil.css) si il legam cu <link>. Cel mai profesional - folosit in proiecte reale.

In fisierul HTML:

<head>
<link rel="stylesheet" href="stil.css">
</head>

In fisierul stil.css:

h1 { color: purple; font-size: 2rem; }
p  { color: gray; margin: 10px; }

1. Selector de element (tag)

Selecteaza toate elementele de acel tip din pagina. Scrii doar numele tag-ului, fara < >.

Selector de element

/* TOATE paragrafele devin gri */
p {
    color: gray;
}

/* TOATE titlurile h1 devin violet */
h1 {
    color: purple;
}

/* TOATE listele neordonate primesc fundal */
ul {
    background-color: #f0f0f0;
}

2. Selector de clasa (.numeClasa)

Selecteaza doar elementele care au atributul class="numeClasa". In CSS, scrii punct (.) inaintea numelui clasei.

O clasa poate fi folosita pe mai multe elemente - e ca o "eticheta" pe care o lipesti pe orice element vrei.

In CSS:

.important {
    color: red;
    font-weight: bold;
}

.evidential {
    background-color: yellow;
    padding: 5px;
}

In HTML:

<p class="important">Acest text e rosu si bold!</p>
<p>Acest paragraf e normal.</p>
<span class="important">Si acesta e rosu!</span>

3. Selector de ID (#numeId)

Selecteaza un singur element unic care are atributul id="numeId". In CSS, scrii diez (#) inaintea numelui.

Un ID se foloseste o singura data in pagina - e ca un CNP: unic pentru fiecare element.

In CSS:

#header {
    background-color: #333;
    color: white;
    padding: 20px;
    text-align: center;
}

In HTML:

<div id="header">Acesta este header-ul unic</div>

Culoare si text

Cele mai folosite proprietati pentru a controla cum arata textul pe pagina:

Proprietati de text

p {
    color: #333;              /* culoarea textului */
background-color: #f0f0f0;  /* culoarea fundalului */
font-size: 16px;           /* marimea textului */
font-family: Arial, sans-serif; /* tipul de font */
font-weight: bold;         /* grosimea: bold/normal */
text-align: center;        /* aliniere: left/center/right */
text-decoration: underline; /* subliniere */
line-height: 1.6;          /* distanta intre randuri */
}

Dimensiuni si spatiere

Cum controlam marimea elementelor si spatiul dintre ele:

Proprietati de spatiere

div {
    width: 300px;             /* latimea */
height: 200px;            /* inaltimea */
margin: 20px;             /* spatiu IN AFARA elementului */
padding: 15px;            /* spatiu IN INTERIORUL elementului */
border: 2px solid #333; /* chenar (bordura) */
border-radius: 10px;       /* colturi rotunjite */
}

3 moduri de a scrie culori

CSS accepta culori scrise in mai multe formate. Iata cele 3 principale:

Formate de culori

/* 1. Nume de culoare (in engleza) */
color: red;
color: blue;
color: purple;
color: coral;

/* 2. Cod hexazecimal (#RRGGBB) */
color: #ff0000;   /* rosu */
color: #0000ff;   /* albastru */
color: #8b5cf6;   /* violet */
color: #1a1a2e;   /* albastru inchis */
/* 3. RGB (Red, Green, Blue: 0-255) */
color: rgb(255, 0, 0);     /* rosu */
color: rgb(0, 0, 255);     /* albastru */
color: rgb(139, 92, 246);   /* violet */

Fiecare element e o "cutie"

In CSS, fiecare element HTML este o cutie cu 4 straturi, de la interior la exterior:

Content (continutul) → Padding (spatiu interior) → Border (chenarul) → Margin (spatiu exterior)

Pagina completa HTML + CSS

Acum punem totul impreuna: selectori, proprietati, culori si box model. Urmareste fiecare regula CSS!

Pagina completa - copiaz-o si ruleaz-o!

<!DOCTYPE html>
<html>
<head>
<title>Portofoliul meu</title>
<style>
body {
            background-color: #0a0a12;
            color: #f1f5f9;
            font-family: Arial, sans-serif;
            padding: 40px;
            line-height: 1.6;
        }

        h1 {
            color: #8b5cf6;
            font-size: 2.5rem;
            text-align: center;
            border-bottom: 3px solid #8b5cf6;
            padding-bottom: 15px;
        }

        h2 {
            color: #06b6d4;
            margin-top: 30px;
        }

        .card {
            background-color: #1a1a2e;
            padding: 20px;
            margin: 15px 0;
            border-radius: 12px;
            border-left: 4px solid #8b5cf6;
        }

        #footer {
            text-align: center;
            color: #64748b;
            margin-top: 40px;
            border-top: 1px solid #2d2d44;
            padding-top: 15px;
        }
    </style>
</head>
<body>
<h1>Portofoliul meu digital</h1>
<h2>Despre mine</h2>
<div class="card">
<p>Ma numesc Ion si sunt elev in clasa a VII-a.</p>
<p>Imi place informatica si designul web.</p>
</div>
<h2>Hobby-uri</h2>
<div class="card">
<p>Programare, gaming si citit.</p>
</div>
<div id="footer">
<p>&copy; 2026 - Creat la ora de TIC</p>
</div>
</body>
</html>

▶ Testeaza pe CodePen

Exercitii practice

Exercitiul 1 (Nivel minim) - Analiza regulilor CSS

Raspunde la urmatoarele intrebari despre CSS:

Explica diferenta dintre margin si padding. Deseneaza pe caiet o "cutie" cu cele 4 straturi (content, padding, border, margin) si noteaza ce face fiecare.
Care este diferenta dintre selectorul p, .info si #header? Cate elemente poate selecta fiecare?
De ce urmatorul cod CSS nu functioneaza? Corecteaza-l: h1 { colour = blue font-size: 20 }

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

Vezi rezolvarea

Raspunsuri:

margin e spatiul din AFARA elementului (intre el si vecini); padding e spatiul din INTERIOR (intre continut si chenar). Cutia are 4 straturi, de la interior spre exterior: content, padding, border, margin - deseneaza-le pe caiet ca patrate imbricate.
p selecteaza TOATE elementele p din pagina (selector de element); .info selecteaza toate elementele cu class="info" (poate fi pe oricate elemente); #header selecteaza UN SINGUR element, cel cu id="header", unic in pagina.
Codul e gresit din doua motive: foloseste colour in loc de color si semnul = in loc de :; ii mai lipsesc unitatea de masura la font-size si punctul si virgula. Corect: h1 { color: blue; font-size: 20px; }

Exercitiul 2 (Nivel standard) - Creeaza o pagina stilizata

Cerinta: Creeaza o pagina HTML cu CSS intern care prezinta un animal favorit. Pagina trebuie sa contina:

Cerinte minime:

- Un titlu h1 colorat si centrat
- Cel putin 2 paragrafe cu text
- O clasa CSS aplicata pe un element
- Fundal colorat (nu alb!)
- Cel putin 5 proprietati CSS diferite
- Border-radius pe cel putin un element

Indicii:

Incepe cu structura HTML de baza, apoi adauga <style> in <head>
Foloseste proprietati precum: color, background-color, font-size, padding, margin, border, border-radius, text-align
Testeaza pe CodePen sau in browser (salveaza ca fisier .html)

Vezi rezolvarea

Model de rezolvare (schimba pisica cu animalul tau preferat):

In <style>: body { background-color: #eef6ff; font-family: Arial, sans-serif; }
h1 { color: #2563eb; text-align: center; }
.info { background-color: #fff; padding: 15px; border: 2px solid #2563eb; border-radius: 12px; }
In pagina: <h1>Pisica mea</h1>, apoi <p class="info">Are 3 ani si e foarte jucausa.</p> si un al doilea paragraf <p>Doarme aproape 16 ore pe zi.</p>

Proprietati folosite (peste 5): background-color, color, text-align, padding, border, border-radius, font-family.

Exercitiul 3 (Nivel performanta) - CSS avansat: selectori multipli si cascada

Cerinta (doua parti):

Partea A — Cod (obligatorie): Scrie o pagina HTML cu CSS intern care demonstreaza stapanirea selectorilor si a cascadei. Pagina trebuie sa contina:

- Cel putin un selector de element (ex: h2 { ... })
- Cel putin o clasa CSS (.numeClasa) aplicata pe doua elemente diferite
- Cel putin un selector de ID (#numeId) aplicat pe un singur element
- Proprietatile margin si padding folosite pe elemente diferite (cu valori diferite)
- Un element cu border si border-radius
- Cel putin 8 proprietati CSS distincte in total

Partea B — Explicatie scrisa (obligatorie): Sub cod, raspunde in 3-5 propozitii: de ce clasele CSS pot fi refolosite pe mai multe elemente, iar ID-ul nu? Foloseste un exemplu concret din codul tau.

Indicii:

Incepe cu HTML-ul, defineste elementele cu class= si id=, apoi scrie CSS-ul in <style>
Verifica daca clasa ta apare pe 2+ elemente diferite si daca ID-ul apare exact o data
Pentru explicatia scrisa: gandeste-te la diferenta dintre o "eticheta" reutilizabila si un "CNP" unic
Testeaza pe CodePen: schimba ordinea regulilor CSS — observi ca ultima regula castiga (cascada)!

Cuvinte cheie de demonstrat in cod si explicatie: selector, clasa, ID, proprietate, valoare, cascada, margin, padding, border, specificitate

Vezi rezolvarea

Schita Partea A (cod):

Selector de element: h2 { color: #333; } (aplica pe toate h2).
O clasa folosita pe 2 elemente diferite, ex. <p class="nota"> si <span class="nota">, cu .nota { background-color: yellow; }.
Un ID unic, ex. <div id="rezumat"> cu #rezumat { border: 1px solid #333; padding: 10px; }.
Foloseste margin si padding cu valori diferite pe 2 elemente distincte, plus un element cu border si border-radius.

Partea B (3-5 propozitii): spune ca o clasa e ca o eticheta refolosibila (se lipeste pe oricate elemente), pe cand un ID e unic ca un CNP, o singura data in pagina - foloseste exact clasa si ID-ul din codul tau ca exemplu.

Criterii: 8 proprietati distincte prezente (4p), selectori corecti tehnic (3p), explicatie cu exemplu propriu (3p).

Ce ai invatat astazi

CSS (Cascading Style Sheets) este limbajul care controleaza aspectul vizual al paginilor web — "hainele" paginii. HTML = structura, CSS = stilul.

O regula CSS are 3 parti: selector { proprietate: valoare; }. Doua puncte intre proprietate si valoare, punct si virgula la final.

Metoda 1 — CSS Inline: scris direct in atributul style="" al unui tag HTML. Simplu, dar nerecomandat pentru proiecte mari.

Metoda 2 — CSS Intern: scris intr-un bloc <style> in sectiunea <head>. Recomandat pentru exercitii si pagini simple.

Metoda 3 — CSS Extern: scris intr-un fisier separat .css, legat cu <link rel="stylesheet" href="stil.css">. Cea mai profesionala metoda, folosita in proiecte reale.

Selectorul de element (ex: p, h1) stilizeaza TOATE elementele de acel tip din pagina.

Selectorul de clasa (.numeClasa) stilizeaza orice element care are class="numeClasa". O clasa poate fi aplicata pe mai multe elemente.

Selectorul de ID (#numeId) stilizeaza un singur element unic care are id="numeId". Un ID se foloseste o singura data in pagina.

Proprietati de text: color, background-color, font-size, font-family, font-weight, text-align, text-decoration, line-height.

Proprietati de spatiere si dimensiuni: width, height, margin (spatiu in afara), padding (spatiu in interior), border, border-radius.

Culorile in CSS se pot scrie in 3 moduri: nume in engleza (red), cod hexazecimal (#ff0000) sau RGB (rgb(255, 0, 0)).

Box Model: fiecare element HTML este o "cutie" cu 4 straturi: Content → Padding → Border → Margin (de la interior la exterior).

HTML si CSS lucreaza impreuna: acelasi HTML poate arata total diferit cu CSS diferit. Separarea lor permite reutilizarea unui singur fisier CSS pentru mai multe pagini.

Vreau sa fac pagina web sa arate incredibil!

Obiectivul lectiei

Dupa aceasta lectie vei putea:

Incearca singur!

Transforma o pagina plictisitoare!

Ce este CSS si de ce il folosim?

Cum scriem o regula CSS?

Metoda 1: CSS Inline (in atributul style)

Metoda 2: CSS Intern (tag-ul <style> in <head>)

Metoda 3: CSS Extern (fisier .css separat)

1. Selector de element (tag)

2. Selector de clasa (.numeClasa)

3. Selector de ID (#numeId)

Culoare si text

Dimensiuni si spatiere

3 moduri de a scrie culori

Fiecare element e o "cutie"

Pagina completa HTML + CSS

Exercitii practice

Exercitiul 1 (Nivel minim) - Analiza regulilor CSS

Exercitiul 2 (Nivel standard) - Creeaza o pagina stilizata

Exercitiul 3 (Nivel performanta) - CSS avansat: selectori multipli si cascada

Ce ai invatat astazi

Vrei mai mult?

Urmatoarea lectie