Tutorial Fundamentele CSS: Învață cum să stilizezi site-uri

Fundamentele CSS: Învață cum să stilizezi site-uri

CSS (Cascading Style Sheets) este limbajul folosit pentru a stiliza și aranja vizual paginile HTML. Cu ajutorul CSS, poți controla culorile, fonturile, marginile, poziționarea și multe alte aspecte ale elementelor din pagină.

1. Ce este CSS?

CSS permite separarea conținutului de prezentare. Astfel, poți defini stiluri care se aplică la elemente HTML pentru a le face mai atractive și mai ușor de citit.

2. Cum se include CSS în pagină?

Există trei modalități principale:

CSS inline: direct în elementul HTML, folosind atributul style.
```
<p style="color: blue;">Text albastru</p>
```
CSS intern: în interiorul etichetei <style> din <head>.
```
<style>
  p { color: red; }
</style>
```
CSS extern: în fișier separat .css și inclus prin <link>.
```
<link rel="stylesheet" href="stil.css">
```

3. Sintaxa CSS

Un bloc de stil are forma:

selector {
  proprietate: valoare;
}

Exemplu:

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

4. Selectori CSS

Selectori definesc elementele cărora le aplici stiluri:

Selector de element: p, h1, div, etc.
Clasă: .clasa-mea
ID: #identificator
Selector de descendență: div p (părinte div, copil p)
Selector de grup: h1, h2, h3
Pseudo-clase: a:hover, p:first-child
Pseudo-element: p::first-line, h1::after

5. Proprietăți CSS de bază

Culori și fundaluri:

color: blue; /* text color */
background-color: yellow; /* fundal */

Fonturi:

font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
font-style: italic;

Margini și padding:

margin: 10px; /* spațiu exterior */
padding: 5px; /* spațiu interior */

Border (margini):

border: 2px solid black;
border-radius: 8px; /* colțuri rotunjite */

Text:

text-align: center;
text-decoration: underline;
text-transform: uppercase;

Dimensiuni și poziționare:

width: 300px;
height: 150px;
max-width: 100%; /* responsive */

6. Modelul box (cutia elementului)

Fiecare element HTML este considerat o cutie cu patru componente:

Content (conținutul efectiv)
Padding (spațiul interior)
Border (borderul)
Margin (spațiul exterior)

Exemplu:

div {
  padding: 10px;
  border: 1px solid black;
  margin: 20px;
}

7. Flexbox și Grid (modelare avansată)

Flexbox

Permite aranjarea elementelor pe orizontală sau verticală, cu aliniere și distribuire ușoară.

.container {
  display: flex;
  justify-content: center; /* aliniere pe orizontală */
  align-items: center; /* aliniere pe verticală */
}

Grid

Permite crearea de grile complexe pentru layout-uri.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 coloane egale */
  gap: 10px; /* spațiu între elemente */
}

8. Stiluri responsive și media queries

Pentru a face site-ul adaptabil pe diferite dispozitive:

@media (max-width: 768px) {
  body {
    background-color: lightgray;
  }
  .menu {
    flex-direction: column;
  }
}

9. Pseudo-clase și pseudo-elemente

Pseudo-clase (`:hover`, `:first-child`, `:last-child`, etc.)

a:hover {
  color: red;
}
p:first-child {
  font-weight: bold;
}

Pseudo-elemente (`::before`, `::after`, `::first-line`)

h1::after {
  content: "!";
  color: red;
}

10. Animații și tranziții

Tranziții (smooth transition între stări)

button {
  background-color: blue;
  transition: background-color 0.3s ease;
}
button:hover {
  background-color: green;
}

Animații

@keyframes slidein {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

.box {
  animation: slidein 2s forwards;
}

11. Specificitatea și cascada

Stilurile se aplică în funcție de:

Specificitate: ID > clasă > element
Ordinea în fișier: ultimele stiluri suprascriu cele anterioare

Pentru a avea control total, folosește !important, dar cu moderație:

p {
  color: red !important;
}

12. Exemplu complet de layout simplu

<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8" />
<title>Exemplu CSS</title>
<link rel="stylesheet" href="stil.css" />
</head>
<body>
  <header class="header">
    <h1>Pagina Mea</h1>
  </header>
  <nav class="menu">
    <ul>
      <li><a href="#">Acasă</a></li>
      <li><a href="#">Despre</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
  <section class="content">
    <h2>Salut!</h2>
    <p>Aceasta este pagina mea stilizată cu CSS.</p>
  </section>
  <footer class="footer">
    <p>&copy; 2023</p>
  </footer>
</body>
</html>

/* stil.css */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f0f0f0;
}
.header {
  background-color: #333;
  color: white;
  padding: 20px;
  text-align: center;
}
.menu ul {
  list-style: none;
  display: flex;
  background-color: #444;
  margin: 0;
  padding: 0;
}
.menu li {
  margin: 0 15px;
}
.menu a {
  color: white;
  text-decoration: none;
}
.content {
  padding: 20px;
}
.footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 10px;
}

CSS este un limbaj puternic pentru a da viață și stil paginilor web. CSS este simplu de învățat, însă face toată diferența când îl implementăm corect în proiectele noastre. CSS stă la baza librăriilor moderne care oferă un nivel de abstractizare peste CSS și care ne pune la dispozitie doar niște clase pe care le putem atașa elementelor de pe pagină. Cunoașterea bazelor CSS permite crearea de stiluri personalizate care poate oferi un vibe unic website-urilor voastre.