๐ŸŽจ

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):
  1. In <body>, adauga:
  2. <h1 style="color: red;">Titlu Rosu</h1>
  3. Apasa "Run" si vezi magia!
  4. 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 โ†’