🎨

Introducere in CSS

Dupa aceasta lectie, vei sti sa stilizezi paginile web cu culori, fonturi si fundaluri folosind CSS!

🎯 INCEARCA

Fara instructiuni - vezi cat poti singur!

Provocarea ta (5 minute):

1. Deschide un fisier HTML existent

2. Incearca sa schimbi culoarea de fundal a paginii

3. Fa titlul h1 sa fie de culoare rosie

4. Schimba fontul textului

💡 Ai nevoie de indicii? Click aici

CSS se pune in tag-ul <style> in <head>

Fundal: background-color: blue;

Culoare text: color: red;

Font: font-family: Arial;

📚 INVATA

Ce este CSS si cum il folosim?

CSS (Cascading Style Sheets)

CSS este limbajul pentru stilizarea paginilor web.

Daca HTML este scheletul, CSS este hainele si machiajul!

Sintaxa CSS:

selector { proprietate : valoare ;}

Exemplu simplu

h1 {
    color: red;
    font-size: 24px;
}
                    

Cum adaugam CSS in HTML?

Metoda 1: CSS Inline (pe element)

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

Metoda 2: Tag <style> in <head> (recomandat)

<head>
    <style>
        h1 {
            color: red;
            font-size: 24px;
        }
        p {
            color: blue;
        }
    </style>
</head>
                    

Culori in CSS

Poti specifica culori in mai multe moduri:

/* Nume de culoare */
color: red;
color: blue;
color: green;

/* Cod hexadecimal (#RRGGBB) */
color: #ff0000;  /* rosu */
color: #00ff00;  /* verde */
color: #0000ff;  /* albastru */
color: #8b5cf6;  /* mov */

/* RGB (Red, Green, Blue: 0-255) */
color: rgb(255, 0, 0);  /* rosu */
                    

#ef4444

#f59e0b

#10b981

#3b82f6

#8b5cf6

#ec4899

#1a1a2e

#f1f5f9

Proprietati CSS importante

/* Culori */
color: red;                 /* culoare text */
background-color: yellow;  /* culoare fundal */

/* Fonturi */
font-family: Arial, sans-serif;
font-size: 18px;
font-weight: bold;

/* Text */
text-align: center;
text-decoration: underline;

/* Spatiere */
padding: 20px;    /* spatiu interior */
margin: 10px;     /* spatiu exterior */

/* Bordura */
border: 2px solid black;
border-radius: 10px;  /* colturi rotunjite */
                    

🎯 Exemplu complet: Pagina stilizata

Cod HTML + CSS

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-color: #1a1a2e;
      font-family: Arial;
      color: white;
      padding: 20px;
    }
    h1 {
      color: #8b5cf6;
      text-align: center;
    }
    p {
      background-color: #2d2d44;
      padding: 15px;
      border-radius: 10px;
    }
  </style>
</head>
<body>
  <h1>Pagina Mea</h1>
  <p>Acesta este un
    paragraf stilizat!</p>
</body>
</html>
                            

Rezultat

Pagina Mea

Acesta este un paragraf stilizat!

💡 Sfat: Testeaza culorile online!

Foloseste site-uri precum ColorHunt.co sau Coolors.co pentru a gasi palete de culori frumoase pentru site-ul tau!

✅ VERIFICA

Hai sa vedem ce ai retinut!

1. Ce inseamna CSS?

Computer Style System

Cascading Style Sheets

Creative Site Styling

2. Care proprietate schimba culoarea textului?

background-color

color

text-color

3. In ce tag punem CSS-ul in HTML?

<css>

<style>

4. Ce cod de culoare reprezinta #ff0000?

Rosu

Verde

Albastru

🎉

Felicitari!

Ai terminat Lectia 5: Introducere in CSS

+50 XP

Acum stii sa stilizezi paginile web cu culori, fonturi si fundaluri!

Continua la Proiect Final →