🎨

Introducere CSS

Dupa aceasta lectie vei sti sa schimbi culorile, fonturile si aspectul paginii tale web!

🧪 INCEARCA 2 minute - experimenteaza!

Deschide editorul si fa un titlu rosu folosind CSS inline.

🚀 Deschide OneCompiler HTML

🎯 Provocare (2 min):

In <body>, adauga:
<h1 style="color: red;">Titlu Rosu</h1>
Apasa "Run" si vezi magia!
Bonus: Incearca si background-color: yellow;

📚 INVATA Stilizeaza-ti pagina

Ce este CSS?

CSS = Cascading Style Sheets

CSS controleaza cum arata pagina: culori, fonturi, dimensiuni, pozitii. HTML = structura, CSS = design!

💡 Gandeste-te: HTML e scheletul, CSS e pielea si hainele!

CSS Inline (in HTML)

Atributul style

Cel mai simplu mod: adaugi style="" direct pe element.

<h1 style="color: red; font-size: 48px;">Titlu Mare</h1>

<p style="background-color: yellow; padding: 10px;">
  Text cu fundal galben
</p>

Proprietati CSS Esentiale

Culori

color: red;           /* culoarea textului */
background-color: blue;  /* culoarea fundalului */

/* Moduri de a specifica culori: */
color: red;              /* nume */
color: #ff0000;          /* hex */
color: rgb(255, 0, 0);   /* RGB */

Fonturi

font-size: 24px;        /* dimensiunea textului */
font-family: Arial;     /* tipul fontului */
font-weight: bold;      /* grosimea (bold/normal) */

Selectori CSS (in <style>)

3 Tipuri de Selectori

In loc de style="" pe fiecare element, poti pune CSS in <style> in <head>:

<style>
  /* 1. Selector de TAG - selecteaza toate elementele de acel tip */
  h1 {
    color: blue;
  }

  /* 2. Selector de CLASA - selecteaza elementele cu acea clasa */
  .important {
    color: red;
    font-weight: bold;
  }

  /* 3. Selector de ID - selecteaza un element unic */
  #titlu-principal {
    font-size: 48px;
  }
</style>

<!-- In body: -->
<h1 id="titlu-principal">Titlu</h1>
<p class="important">Text important</p>

Tag

h1, p, div

Clasa

.nume-clasa

ID

#nume-id

✅ VERIFICA Raspunde corect la 3 din 4

1. Ce proprietate CSS schimba culoarea textului?

background-color

text-color

color

2. Cum selectezi elementele cu class="special"?

#special { }

.special { }

special { }

3. Care e sintaxa CSS corecta?

color: red;

color = red

color: red

4. Cum selectezi elementul cu id="header"?

.header { }

header { }

#header { }

⭐

Felicitari!

Ai terminat Lectia 4! Acum stii bazele CSS pentru a stiliza pagini.

Ce ai invatat: style attribute, color, background-color, font-size, selectori (tag, .class, #id)

Continua cu Lectia 5 →