🎨

Stilizare cu CSS

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

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

📚 INVATA

CSS - Limbajul designului web

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

👀 Inainte vs. Dupa CSS

FARA CSS

Bun venit!

Acesta este site-ul meu. Arata cam plictisitor...

CU CSS

Bun venit!

Acesta este site-ul meu. Arata mult mai bine!

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

🎨 Proprietati CSS esentiale

Proprietate	Ce face	Exemplu
color	Culoarea textului	color: blue;
background-color	Culoarea de fundal	background-color: #f0f0f0;
font-size	Marimea textului	font-size: 18px;
font-family	Tipul fontului	font-family: Arial;
text-align	Alinierea textului	text-align: center;
padding	Spatiu interior	padding: 20px;
margin	Spatiu exterior	margin: 10px;

🌈 Paleta de culori sugerata

Albastru

#667eea

Mov

#764ba2

Verde

#10b981

Portocaliu

#f59e0b

Inchis

#1a1a2e

💻 Exemplu complet de CSS

In <head> din index.html

<style>
/* Stiluri pentru intreaga pagina */
body {
    font-family: 'Arial', sans-serif;
    background-color: #1a1a2e;
    color: white;
    margin: 0;
    padding: 0;
}

/* Meniul de navigare */
nav {
    background-color: #667eea;
    padding: 15px;
    text-align: center;
}

nav a {
    color: white;
    text-decoration: none;
    margin: 0 15px;
    font-weight: bold;
}

nav a:hover {
    text-decoration: underline;
}

/* Sectiunea Hero */
header {
    background: linear-gradient(135deg, #667eea, #764ba2);
    padding: 60px 20px;
    text-align: center;
}

header h1 {
    font-size: 2.5em;
    margin-bottom: 10px;
}

/* Continut principal */
main {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 20px;
}

h2 {
    color: #667eea;
    border-bottom: 2px solid #667eea;
    padding-bottom: 10px;
}

/* Footer */
footer {
    background-color: #12121f;
    text-align: center;
    padding: 20px;
    color: #888;
}
</style>

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

✅ VERIFICA

Hai sa vedem ce ai retinut!

1. Ce inseamna CSS?

Computer Style System

Cascading Style Sheets

Creative Site Styling

2. Ce proprietate schimba culoarea textului?

background-color

color

text-color

3. Cum centram textul in CSS?

center: text;

align: center;

text-align: center;

4. Ce proprietate adauga spatiu in interiorul unui element?

margin

padding

spacing

🎉

Superb!

Ai terminat Lectia 4: Stilizare cu CSS

+100 XP

Site-ul tau arata acum profesional! E timpul sa-l publicam pe internet!

Continua la Lectia 5 →