Lectia 4: Stilizare cu CSS | TIC Clasa a VII-a

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>:

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

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

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...)

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:

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:

HTML valid si semantic
CSS extern pentru stilizare
Design responsive de baza

⭐ Bonus (pentru nota maxima):

Adauga interactivitate JavaScript simpla

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

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

Alege o paleta de 2-3 culori pentru site-ul tau si aplica-le: culoare de fundal, culoare pentru titluri, culoare pentru text obisnuit.
Seteaza un font Google (ex: Inter, Roboto) in body si verifica ca se aplica pe toate paginile prin linkul catre css/style.css.
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. ...

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

Stilizare cu CSS

Obiectivul lectiei

Dupa aceasta lectie vei putea: