Lectia 3: CSS – Stilizare de bază (culori, fonturi, spațieri)

by

Prezentare Generală a Lecției

CSS (Cascading Style Sheets) este un limbaj utilizat pentru a stiliza paginile web. Cu ajutorul CSS, putem modifica aspectul elementelor HTML, inclusiv culorile, fonturile și spațierile, pentru a face un site mai atractiv și mai ușor de citit.

În această lecție, vei învăța:
✅ Cum să aplici CSS la un document HTML
✅ Cum să setezi culori pentru text și fundal
✅ Cum să alegi și să aplici fonturi personalizate
✅ Cum să controlezi spațierea între elemente

1. Metode de Adăugare a CSS-ului

CSS poate fi aplicat unei pagini web în trei moduri:

1️⃣ CSS în linie – se aplică direct unui element HTML folosind atributul style:

<p style="color: blue;">Acesta este un paragraf albastru.</p>

2️⃣ CSS intern – se scrie într-o secțiune <style> din <head>:

<head>
    <style>
        p {
            color: blue;
        }
    </style>
</head>

3️⃣ CSS extern (cea mai recomandată metodă) – se scrie într-un fișier separat (style.css) și se leagă la documentul HTML astfel:

<link rel="stylesheet" href="style.css">

2. Culorile în CSS

2.1 Setarea Culorilor pentru Text și Fundal

CSS permite specificarea culorilor în mai multe moduri:
🔹 Nume de culori: red, blue, green, etc.
🔹 Coduri hex: #ff0000 (roșu), #0000ff (albastru)
🔹 RGB: rgb(255, 0, 0)
🔹 RGBA (cu transparență): rgba(255, 0, 0, 0.5)

Exemplu:

body {
    background-color: #f0f0f0; /* Fundal gri deschis */
    color: #333333; /* Text gri închis */
}

h1 {
    color: blue; /* Titlul va fi albastru */
}

3. Fonturile în CSS

3.1 Schimbarea Fonturilor

CSS permite setarea fontului textului cu proprietatea font-family.
Exemple de fonturi:
🔹 Serif (cu terminații decorative): Times New Roman, Georgia
🔹 Sans-serif (fără terminații decorative): Arial, Verdana, Roboto

Exemplu:

p {
    font-family: Arial, sans-serif;
}

3.2 Fonturi Google

Poți folosi fonturi personalizate de la Google Fonts.
1️⃣ Selectează un font și copiază link-ul în <head>:

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap" rel="stylesheet">

2️⃣ Aplică fontul în CSS:

body {
    font-family: 'Poppins', sans-serif;
}

3.3 Dimensiunea și Greutatea Fontului

  • font-size: schimbă dimensiunea textului.
  • font-weight: controlează grosimea textului (normal, bold, lighter, bolder).

Exemplu:

h1 {
    font-size: 36px;
    font-weight: bold;
}

4. Spațierea în CSS

Spațierea elementelor într-o pagină este esențială pentru o bună lizibilitate și organizare. Cele mai importante proprietăți sunt:

4.1 Margin și Padding

🔹 margin – definește spațiul exterior unui element (spațiu între elemente).
🔹 padding – definește spațiul interior unui element (distanța dintre conținut și marginile elementului).

Exemplu:

p {
    margin: 20px; /* 20px spațiu exterior */
    padding: 10px; /* 10px spațiu interior */
}

4.2 Border și Box Model

🔹 border – creează o margine în jurul elementului.
🔹 box-shadow – adaugă o umbră unui element.

Exemplu:

div {
    border: 2px solid black;
    padding: 15px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}

5. Aplicarea Practică: Crearea unui Stil CSS pentru un Site Simplu

Fișier HTML (index.html)

<!DOCTYPE html>
<html lang="ro">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Primul Site Stilizat</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Bun venit pe site-ul meu!</h1>
    </header>
    <main>
        <p>Acesta este un exemplu de pagină web cu stilizare CSS.</p>
        <button>Click aici</button>
    </main>
</body>
</html>

Fișier CSS (style.css)

body {
    background-color: #f8f9fa;
    color: #333;
    font-family: 'Poppins', sans-serif;
    text-align: center;
}

h1 {
    color: #007bff;
    font-size: 32px;
}

p {
    font-size: 18px;
    line-height: 1.6;
}

button {
    background-color: #28a745;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 18px;
    cursor: pointer;
    border-radius: 5px;
}

button:hover {
    background-color: #218838;
}

6. Activitate Practică

🎯 Exercițiu 1: Schimbă culoarea fundalului paginii și a textului.
🎯 Exercițiu 2: Adaugă un buton care își schimbă culoarea la hover.
🎯 Exercițiu 3: Creează un paragraf cu un font personalizat din Google Fonts.

7. Quiz pentru Lectia 3

1️⃣ Care dintre următoarele proprietăți CSS schimbă culoarea textului?

  • a) background-color
  • b) color
  • c) text-style

2️⃣ Care proprietate CSS controlează spațierea dintre conținutul unui element și marginea acestuia?

  • a) margin
  • b) padding
  • c) border