Lecția 1: Introducere în CSS

1. Ce este CSS?

CSS (Cascading Style Sheets) este un limbaj de stilizare folosit pentru a controla aspectul elementelor HTML. El definește culori, fonturi, dimensiuni, poziționări și multe alte proprietăți vizuale ale unei pagini web.

2. La ce folosește CSS?

CSS este folosit pentru a separa conținutul (HTML) de prezentare (design), oferind o metodă eficientă de a stiliza paginile web. Prin CSS putem:

Modifica culorile de fundal și text
Schimba dimensiunea și tipul fonturilor
Alinia, delimita sau anima elemente
Face designul responsive (pentru telefon/tabletă)

3. Modalități de includere CSS

CSS poate fi adăugat în 3 moduri:

a) Inline (direct în element HTML)

<p style="color:red;">Text roșu</p>

b) Intern (în <style> în <head>)

<style>
  p {
    color: red;
  }
</style>

c) Extern (într-un fișier .css separat)

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

Recomandarea generală este să folosim stiluri externe pentru o organizare mai bună.

4. Avantajele folosirii CSS

Separare clară între conținut și design
Reutilizare ușoară a stilurilor în mai multe pagini
Încărcare mai rapidă și menținere mai ușoară a codului
Compatibilitate mai bună între dispozitive

5. Primul exemplu CSS – schimbăm culoarea textului

Cod HTML + CSS intern pentru a face textul albastru:

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      color: blue;
    }
  </style>
</head>
<body>
  <p>Acesta este un text albastru.</p>
</body>
</html>

În lecțiile următoare vom detalia proprietăți precum color, font-size, background-color, margin, padding, etc.