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

Incearca singur!

🎯 INCEARCA

Schimba culoarea de fundal!

Provocarea ta (5 minute):

1. Deschide index.html in editor

2. In sectiunea <head>, adauga tag-ul <style>

3. Incearca sa schimbi culoarea de fundal a paginii

4. Salveaza si reincarca pagina in browser

💡 Nu stii cum? Click aici

<style>
body {
    background-color: lightblue;
}
</style>

Pune acest cod in <head>, inainte de </head>

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

💡 Sfat: Consistenta

Foloseste aceleasi culori si fonturi pe toate paginile. Copiaza blocul <style> identic in fiecare fisier HTML, sau (mai avansat) creeaza un fisier style.css separat.

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) - Planificare site

Planifica un site pentru Stilizare cu CSS:

Ce pagini va avea?
Ce culori si fonturi alegi?
Ce continut include fiecare pagina?

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

Exercitiul 3 (Nivel performanta) - Compunere

Cerinta: Descrie structura site-ului tau Stilizare cu CSS.

Indicii:

Mentioneaza paginile
Descrie navigarea
Explica alegerea design-ului

Cuvinte cheie de folosit: site, pagina, navigare, HTML, CSS, design

Stilizare cu CSS

Obiectivul lectiei

Dupa aceasta lectie vei putea: