Lecția 4: Culori și Tipografie în CSS

✔️ Culorile sunt esențiale pentru a oferi personalitate și lizibilitate paginii. Le putem defini în mai multe moduri:

color: red; – folosind nume de culori
color: #FF0000; – cod hexazecimal
color: rgb(255, 0, 0); – cod RGB
color: rgba(255, 0, 0, 0.5); – RGB cu transparență

Acesta este un titlu cu text albastru

Acesta este un paragraf cu text verde

Acesta este text roșu semi-transparent

✔️ Tipografia se referă la stilul și aspectul textului: font, dimensiune, spațiere etc.

font-family: alege fontul (ex: Arial, Georgia, "Times New Roman")
font-size: dimensiunea fontului (ex: 16px, 1.5em)
font-weight: grosimea textului (ex: normal, bold)
line-height: spațierea între rânduri
text-align: alinierea (left, center, right)

Acesta este un text centrat, cu font Georgia, mărime 20px, bold și spațiere între rânduri.

✅ Combinațiile corecte de culori și fonturi oferă un aspect profesionist și îmbunătățesc experiența utilizatorului.

Dacă dorești să adaug și un buton interactiv, un iframe demonstrativ sau o secțiune de tip „quiz recapitulativ” la final, pot include imediat. Spune-mi cum dorești să structurezi următoarele lecții. Ask ChatGPT You said: Acesta este rezultatul dat de tine, vreau codul html ca sa vada elevii cum l-ai facutAcesta este un titlu cu text albastru Acesta este un paragraf cu text verde Acesta este text roșu semi-transparent ChatGPT said: Perfect, Vasile! Mai jos este codul HTML exact pentru exemplul vizual: 🔵 Exemplul: Culori aplicate textului în CSS html Copy Edit Exemplu CSS - Culori text

Acesta este un titlu cu text albastru

Acesta este un paragraf cu text verde

Acesta este text roșu semi-transparent

🧠 Ce învață elevii din acest cod: Cum se aplică culori direct pe elemente HTML cu atributul style. Cum se utilizează: nume de culoare (green, navy) valori rgba() pentru transparență. Dacă dorești, pot crea și un buton „Vezi codul” în Elementor sau o variantă pentru copiere directă pe site. Spune-mi cum vrei să fie integrat.