Ce este CSS?
CSS (Cascading Style Sheets) este limbajul care controleaza aspectul vizual al unei pagini web. Daca HTML este scheletul unei case (structura, peretii, usile), CSS este decorarea interioara - culorile peretilor, tipul de parchet, dimensiunea ferestrelor, pozitia mobilei. Fara CSS, toate paginile web ar arata la fel: text negru pe fundal alb, fara niciun design.
Numele "Cascading Style Sheets" se traduce ca "Foi de stil in cascada". Cuvantul "cascada" se refera la modul in care regulile CSS se aplica: daca exista mai multe reguli pentru acelasi element, ele se "cascadeaza" (se suprapun), iar ultima regula sau cea mai specifica castiga. Vom intelege mai bine aceasta cascada pe parcursul lectiei.
CSS poate controla aproape orice aspect vizual al paginii: culori (text, fundal, borduri), fonturi (tip, marime, grosime), dimensiuni (latime, inaltime), spatiere (margini, padding), pozitionare (unde apare fiecare element pe pagina) si chiar animatii (tranzitii, transformari). Practic, tot ce "vezi" pe o pagina web este stilizat cu CSS.
CSS a fost creat in
1996
de Hakon Wium Lie si Bert Bos. Inainte de CSS, designul se facea direct in HTML cu atribute precum
bgcolor
,
font
si tabele de layout - o metoda dezordonata si greu de intretinut. CSS a separat clar
continutul
(HTML) de
prezentare
(CSS), facand web-ul mult mai organizat si mai usor de gestionat.
Gandeste-te la analogia cu un document Word: textul pe care il scrii este continutul (echivalentul HTML), iar formatarea pe care o aplici (font, culoare, aliniere, spatiere) este stilizarea (echivalentul CSS). Poti schimba complet aspectul unui document fara sa modifici o singura litera din text - la fel functioneaza relatia HTML-CSS.
Un avantaj imens al CSS este ca poti schimba aspectul intregului site modificand un singur fisier CSS, fara a atinge niciunul dintre fisierele HTML. Imagineaza-ti ca ai un site cu 100 de pagini si vrei sa schimbi culoarea titlurilor din albastru in verde - cu CSS, modifici o singura linie de cod si schimbarea se aplica pe toate cele 100 de pagini simultan.
CSS Inline - Atributul style
Cel mai simplu mod de a adauga CSS este
direct pe un element HTML
folosind atributul
style=""
. Aceasta metoda se numeste
CSS inline
(in linie). Scrii regulile CSS ca valoare a atributului style, direct pe tag-ul pe care vrei sa il stilizezi.
<!-- CSS Inline - pe fiecare element individual --> <h1 style="color: blue; font-size: 32px;">Titlu albastru</h1> <p style="color: green; font-size: 18px;">Paragraf verde</p> <p style="background-color: yellow;">Paragraf cu fundal galben</p>
CSS inline este util pentru
teste rapide
si
modificari punctuale
. Daca vrei sa vezi rapid cum arata un text in rosu, adaugi
style="color: red;"
si vezi rezultatul imediat. Este cea mai directa metoda - nu trebuie sa creezi fisiere separate sau sectiuni speciale.
Insa CSS inline are un
dezavantaj major
: trebuie sa scrii atributul
style=""
pe fiecare element in parte. Daca ai 50 de paragrafe si vrei ca toate sa fie verzi, trebuie sa adaugi
style="color: green;"
pe fiecare paragraf individual. Aceasta este repetitiv, greu de intretinut si face codul HTML foarte aglomerat si greu de citit.
Un alt dezavantaj este ca CSS inline are
cea mai mare prioritate
in cascada CSS. Aceasta inseamna ca stilurile inline "castiga" intotdeauna fata de stilurile din
<style>
sau din fisiere externe, chiar daca acestea vin dupa. Aceasta poate crea probleme cand incerci sa modifici designul ulterior - stilurile inline sunt greu de suprascris.
In practica profesionala, CSS inline se foloseste foarte rar . Principalele situatii sunt: email-uri HTML (unde fisierele CSS externe nu sunt suportate de clientii de email), modificari temporare de depanare si stiluri generate dinamic de JavaScript. Pentru orice altceva, metodele urmatoare (CSS intern si extern) sunt mult mai potrivite.
CSS Intern - Tag-ul <style>
A doua metoda de a adauga CSS este prin tag-ul
<style>
, plasat in sectiunea
<head>
a documentului HTML. Aceasta metoda se numeste
CSS intern
(internal CSS). In interiorul tag-ului
<style>
, scrii reguli CSS care se aplica pe toata pagina.
<!DOCTYPE html>
<html>
<head>
<title>Pagina mea</title>
<style>
h1 {
color: blue;
font-size: 32px;
}
p {
color: green;
font-size: 18px;
}
</style>
</head>
<body>
<h1>Titlu albastru</h1>
<p>Paragraf verde</p>
<p>Alt paragraf verde</p>
</body>
</html>
Avantajul fata de CSS inline este enorm: scrii regula
o singura data
si se aplica pe
toate elementele
de acel tip. In exemplul de mai sus, regula
p { color: green; }
face TOATE paragrafele verzi, fara sa adaugi style="" pe fiecare paragraf individual. Modifici culoarea intr-un singur loc si se schimba peste tot.
CSS intern este ideal pentru pagini individuale care au un design unic, diferit de restul site-ului. De exemplu, o pagina de lansare (landing page) cu un design special. Toate stilurile sunt in acelasi fisier HTML, deci pagina este auto-suficienta - nu depinde de fisiere externe.
Dezavantajul CSS-ului intern apare cand ai
mai multe pagini
. Daca site-ul tau are 10 pagini si vrei ca toate sa arate la fel, trebuie sa copiezi intregul bloc
<style>
pe fiecare pagina. Daca apoi vrei sa schimbi o culoare, trebuie sa o modifici in 10 fisiere diferite. Aceasta problema este rezolvata de CSS extern (urmatorul atom).
O greseala frecventa a incepatorilor este sa puna tag-ul
<style>
in
<body>
in loc de
<head>
. Desi browserele moderne vor aplica stilurile oricum, aceasta nu este o practica corecta. Stilurile trebuie incarcate inainte de continut, altfel utilizatorul poate vedea pentru o fractiune de secunda pagina nestiilizata (fenomen numit FOUC - Flash of Unstyled Content).
CSS Extern - Fisiere .css separate
Cea mai buna si mai folosita metoda de a adauga CSS este prin
fisiere externe
. Creezi un fisier separat cu extensia
.css
(de exemplu
stil.css
) si il legi de pagina HTML folosind tag-ul
<link>
in
<head>
. Aceasta metoda se numeste
CSS extern
(external CSS).
<!-- In fisierul HTML (index.html) -->
<head>
<link rel="stylesheet" href="stil.css">
</head>
<!-- In fisierul CSS separat (stil.css) -->
h1 {
color: blue;
font-size: 32px;
}
p {
color: green;
line-height: 1.6;
}
Tag-ul
<link>
are doua atribute esentiale:
rel="stylesheet"
(ii spune browserului ca fisierul este o foaie de stil) si
href="stil.css"
(calea catre fisierul CSS). Observa ca
<link>
este un tag gol (self-closing) - nu are tag de inchidere, similar cu
<img>
sau
<br>
.
Marele avantaj al CSS-ului extern este
reutilizarea
. Un singur fisier CSS poate fi legat de
toate paginile
site-ului. Daca ai 100 de pagini, fiecare cu
<link rel="stylesheet" href="stil.css">
, modifici o regula in
stil.css
si schimbarea se aplica pe toate cele 100 de pagini. Aceasta este metoda standard in dezvoltarea web profesionala.
Un alt avantaj important este cache-ul browserului . Cand un vizitator acceseaza prima pagina a site-ului, browserul descarca fisierul CSS si il salveaza in cache (memorie temporara). Cand vizitorul navigheaza la alte pagini ale site-ului, browserul nu mai descarca fisierul CSS - il foloseste din cache. Aceasta face site-ul mai rapid, deoarece mai putine date trebuie transferate.
In fisierul
.css
scrii
doar reguli CSS
, fara tag-uri HTML. Nu pui
<style>
in fisierul CSS - acesta este un tag HTML, nu CSS. Fisierul CSS contine direct selectori si proprietati:
h1 { color: blue; }
. Aceasta este o greseala frecventa a incepatorilor care confunda CSS-ul intern cu cel extern.
Poti lega
mai multe fisiere CSS
la aceeasi pagina HTML. De exemplu, unul pentru layout general (
layout.css
), altul pentru culori si fonturi (
tema.css
) si altul pentru responsive design (
mobil.css
). Aceasta organizare pe fisiere face codul mai usor de gestionat pe proiecte mari. Ordinea in care le legi conteaza - regulile din ultimul fisier au prioritate.
Sintaxa CSS - Reguli si declaratii
O regula CSS are o structura clara si precisa. Este formata din trei parti: selectorul (ce elemente vrei sa stilizezi), acoladele { } (care grupeaza declaratiile) si una sau mai multe declaratii (perechi proprietate-valoare).
/* Anatomia unei reguli CSS */
selector {
proprietate: valoare; /* declaratie 1 */
alta-proprietate: valoare; /* declaratie 2 */
}
/* Exemplu concret */
h1 {
color: blue; /* culoarea textului */
font-size: 32px; /* marimea fontului */
text-align: center; /* alinierea textului */
}
Fiecare declaratie contine o
proprietate
(ce vrei sa schimbi),
doua puncte
:
(separator) si o
valoare
(cum vrei sa schimbi). La sfarsit, fiecare declaratie se incheie cu
punct-virgula
;
. Uitarea punct-virgulei este cea mai frecventa greseala CSS - fara ea, browserul nu stie unde se termina o declaratie si unde incepe urmatoarea.
CSS foloseste
doua puncte
:
(nu semnul egal
=
) si
punct-virgula
;
(nu virgula). Aceasta sintaxa este diferita de HTML (care foloseste
=
pentru atribute) si de limbajele de programare (care folosesc
=
pentru atribuire). Exemplu corect:
color: red;
. Gresit:
color = red
.
Comentariile
in CSS se scriu intre
/* */
. Exemplu:
/* Aceasta este o nota pentru dezvoltator */
. Comentariile nu apar pe pagina web - sunt doar pentru programator, ca sa inteleaga ce face fiecare sectiune de cod. Sunt esentiale pentru organizarea codului in proiecte mari si pentru colaborarea in echipa.
Poti scrie mai multe declaratii pentru acelasi selector, grupate intre acolade. Ordinea declaratiilor din interiorul acoladelor
nu conteaza
in general, cu exceptia cazului in care doua declaratii se contrazic (de exemplu doua valori diferite pentru
color
). In acest caz, ultima declaratie o suprascrie pe prima - aceasta este o parte din "cascada" din CSS.
Spatiile albe (spatii, tab-uri, randuri goale) sunt
ignorate
de browser in CSS. Poti scrie totul pe un singur rand:
h1{color:blue;font-size:32px;}
si va functiona identic. Insa aceasta forma este greu de citit. Conventia este sa pui fiecare declaratie pe un rand separat, cu indentare (un tab sau doua spatii), pentru claritate si lizibilitate.
Selectorul de element (tag)
Cel mai simplu tip de selector CSS este selectorul de element (sau selector de tag). Scrii pur si simplu numele tag-ului HTML fara paranteze unghiulare, fara punct, fara diez. Regula se aplica pe toate elementele de acel tip din pagina.
/* Selecteaza TOATE paragrafele */
p {
color: #333333;
line-height: 1.6;
}
/* Selecteaza TOATE titlurile h1 */
h1 {
color: navy;
text-align: center;
}
/* Selecteaza TOATE imaginile */
img {
max-width: 100%;
border-radius: 8px;
}
Selectorul de element este
foarte puternic dar si foarte larg
. Regula
p { color: green; }
va face TOATE paragrafele din pagina verzi, fara exceptie. Daca vrei ca doar unele paragrafe sa fie verzi si altele nu, ai nevoie de selectori mai specifici (clase si id-uri, pe care le vei invata in atomii urmatori).
Poti aplica
aceleasi stiluri pe mai multe elemente
simultan, separand selectorii cu virgula. De exemplu:
h1, h2, h3 { color: blue; }
face toate titlurile h1, h2 si h3 albastre, intr-o singura regula. Aceasta tehnica de grupare evita repetarea si face codul mai compact si mai usor de intretinut.
Selectorul de element se foloseste de obicei pentru
stiluri de baza
(baseline styles) care se aplica pe intreaga pagina: fontul general al textului (
body { font-family: Arial; }
), marimea implicita a paragrafelor (
p { font-size: 16px; }
), eliminarea sublinierilor de pe link-uri (
a { text-decoration: none; }
).
O practica comuna in dezvoltarea web este sa incepi fisierul CSS cu un
reset
sau
normalizare
care foloseste selectori de element. De exemplu:
* { margin: 0; padding: 0; box-sizing: border-box; }
. Selectorul
*
(asterisc) selecteaza absolut TOATE elementele din pagina. Acest reset elimina stilurile implicite ale browserului si ofera un punct de plecare consistent pentru design.
Selectorul de clasa (.)
Selectorul de
clasa
iti permite sa stilizezi doar
anumite elemente
, nu toate elementele de un anumit tip. In HTML, adaugi atributul
class="nume"
pe elementele dorite. In CSS, selectezi clasa cu
punct (.)
urmat de numele clasei.
<!-- HTML -->
<p class="important">Acest paragraf este important</p>
<p>Acest paragraf este normal</p>
<p class="important">Si acesta este important</p>
<!-- CSS -->
<style>
.important {
color: red;
font-weight: bold;
border-left: 4px solid red;
padding-left: 10px;
}
</style>
Marele avantaj al claselor este
reutilizarea
. Aceeasi clasa poate fi aplicata pe
oricate elemente
doresti, indiferent de tipul lor. Clasa
"important"
poate fi pe un paragraf, pe un titlu, pe un div - regula CSS se aplica pe toate. De aceea clasele sunt cele mai folosite selectori in dezvoltarea web moderna.
Un element poate avea
mai multe clase
simultan, separate prin spatii:
class="important mare rosu"
. Fiecare clasa adauga stilurile ei. Aceasta combinare de clase este extrem de flexibila - poti crea un sistem de clase utilitare:
.text-rosu
,
.text-mare
,
.centrat
,
.bold
si le combini dupa nevoie pe fiecare element.
Regulile de denumire a claselor: numele clasei
nu poate incepe cu un numar
(gresit:
class="1special"
), poate contine litere, cifre, cratime si underscore, si este
case-sensitive
(
.Important
este diferita de
.important
). Conventia cea mai populara este sa folosesti litere mici si cratime:
class="card-header"
,
class="btn-primary"
.
In practica, clasele sunt fundamentul organizarii CSS. Framework-uri populare precum Bootstrap sau Tailwind CSS sunt construite integral pe clase. De exemplu, in Bootstrap scrii
class="btn btn-primary btn-lg"
pentru a obtine un buton albastru mare, fara sa scrii nicio linie de CSS manual. Intelegerea claselor este esentiala pentru a folosi aceste instrumente.
O buna practica este sa numesti clasele dupa
scopul lor
, nu dupa aspectul lor. De exemplu,
class="avertisment"
este mai bun decat
class="text-rosu"
. De ce? Daca mai tarziu decizi sa schimbi culoarea avertismentelor din rosu in portocaliu, numele
text-rosu
devine inselator, pe cand
avertisment
ramane corect indiferent de culoare.
Selectorul de ID (#)
Selectorul de
ID
selecteaza un
singur element unic
din pagina. In HTML, adaugi atributul
id="nume"
pe element. In CSS, selectezi ID-ul cu
diez (#)
urmat de numele id-ului. Un ID trebuie sa fie
unic pe pagina
- nu pot exista doua elemente cu acelasi id.
<!-- HTML -->
<header id="site-header">
<h1>Site-ul meu</h1>
</header>
<main id="continut-principal">
<p>Textul principal...</p>
</main>
<footer id="site-footer">
<p>Drepturi rezervate</p>
</footer>
<!-- CSS -->
<style>
#site-header {
background-color: navy;
color: white;
padding: 20px;
}
#site-footer {
background-color: #333;
color: #ccc;
text-align: center;
}
</style>
Diferenta fundamentala dintre clasa si ID : o clasa (punct) poate fi aplicata pe mai multe elemente , in timp ce un ID (diez) trebuie sa fie pe un singur element . Gandeste-te asa: clasa este ca un tip de masina (Dacia Logan - pot exista mii), ID-ul este ca numarul de inmatriculare (B-01-ABC - unic pentru fiecare masina).
ID-ul are o
specificitate mai mare
decat clasa in cascada CSS. Aceasta inseamna ca daca un element are atat o clasa cat si un ID care ii dau culori diferite,
ID-ul castiga
. De exemplu, daca ai
.rosu { color: red; }
si
#titlu { color: blue; }
, iar un element are
class="rosu" id="titlu"
, textul va fi albastru (ID-ul castiga).
In practica moderna, multi dezvoltatori
evita ID-urile pentru stilizare
si le pastreaza doar pentru JavaScript (pentru a selecta elemente cu
document.getElementById()
) si pentru link-uri interne (
href="#sectiune"
). Motivul este ca ID-urile nu sunt reutilizabile si au specificitate prea mare, facand CSS-ul mai greu de suprascris si de intretinut.
ID-urile au aceleasi reguli de denumire ca si clasele: nu pot incepe cu un numar, pot contine litere, cifre, cratime si underscore, si sunt case-sensitive. Conventia este sa folosesti litere mici si cratime:
id="meniu-principal"
,
id="footer-links"
. Alege nume descriptive care explica rolul elementului, nu aspectul sau.
Un rezumat al celor trei selectori de baza:
element
(
p { }
) - selecteaza toate elementele de acel tip,
clasa
(
.nume { }
) - selecteaza elementele cu acea clasa,
ID
(
#nume { }
) - selecteaza un singur element unic. In practica, vei folosi cel mai mult clasele, urmate de selectori de element, si rar ID-uri pentru CSS.
Culori si fonturi in CSS
CSS ofera multiple modalitati de a specifica
culori
. Cele mai comune sunt:
nume de culori
in engleza (
red
,
blue
,
green
,
navy
),
coduri hexazecimale
(
#FF0000
pentru rosu,
#0000FF
pentru albastru) si
functia rgb()
(
rgb(255, 0, 0)
pentru rosu).
/* Culori - mai multe formate */
h1 { color: red; } /* Nume */
h2 { color: #3498db; } /* Hexazecimal */
h3 { color: rgb(46, 204, 113); } /* RGB */
p { color: rgba(0, 0, 0, 0.7); } /* RGBA (cu transparenta) */
/* Fonturi */
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: normal; /* normal, bold, 100-900 */
line-height: 1.6; /* spatiul intre randuri */
}
Codurile hexazecimale
sunt cele mai folosite in practica. Un cod hex are formatul
#RRGGBB
unde RR = cantitatea de rosu, GG = cantitatea de verde, BB = cantitatea de albastru, fiecare de la 00 (nimic) la FF (maxim). De exemplu,
#000000
este negru (zero culoare),
#FFFFFF
este alb (maxim din toate),
#FF0000
este rosu pur.
Proprietatea
color
schimba culoarea
textului
, iar
background-color
schimba culoarea de
fundal
. Nu le confunda! O greseala frecventa este sa scrii
color: yellow;
asteptand un fundal galben, cand de fapt textul devine galben (si probabil invizibil pe fundal alb).
Pentru
fonturi
, proprietatea
font-family
seteaza tipul fontului. Se recomanda sa listezi mai multe fonturi separate prin virgula, ca alternativa:
font-family: "Open Sans", Arial, sans-serif;
. Browserul foloseste primul font disponibil. Ultimul trebuie sa fie o familie generica (
serif
,
sans-serif
,
monospace
) ca fallback universal.
Proprietatea
font-size
seteaza marimea textului. Unitatile cele mai comune sunt
px
(pixeli - dimensiune fixa),
em
(relativ la fontul parintelui) si
rem
(relativ la fontul elementului root). Pentru incepatori,
px
este cel mai intuitiv:
font-size: 16px;
seteaza textul la 16 pixeli. Marimea implicita in browsere este 16px.
Alte proprietati utile de text:
font-weight
(grosimea -
normal
,
bold
sau valori numerice 100-900),
text-align
(alinierea -
left
,
center
,
right
,
justify
),
text-decoration
(decoratii -
underline
,
line-through
,
none
),
text-transform
(transformari -
uppercase
,
lowercase
,
capitalize
).
Combinarea HTML cu CSS - Bune practici
Acum ca stii cele trei metode de a adauga CSS (inline, intern, extern) si cele trei tipuri de selectori de baza (element, clasa, ID), este important sa intelegi cum sa le combini eficient pentru a crea pagini web bine organizate si usor de intretinut.
Regula de aur
: foloseste CSS extern ca metoda principala. Creeaza un fisier
stil.css
care contine toate regulile de design si leaga-l de fiecare pagina HTML cu
<link>
. Foloseste CSS intern doar pentru pagini cu design unic si CSS inline doar ca ultima solutie (sau pentru teste rapide pe care le stergi dupa).
<!-- Structura recomandata -->
<head>
<link rel="stylesheet" href="stil.css">
</head>
<body>
<header id="site-header">
<h1>Titlul site-ului</h1>
<nav class="meniu-principal">
<a href="index.html" class="link-activ">Acasa</a>
<a href="despre.html">Despre</a>
<a href="contact.html">Contact</a>
</nav>
</header>
<main class="continut">
<p class="intro">Bine ai venit!</p>
<p>Text normal...</p>
</main>
</body>
Ierarhia de prioritate
(specificitate) in CSS este, de la cel mai slab la cel mai puternic: selector de element (
p
) < selector de clasa (
.intro
) < selector de ID (
#header
) < CSS inline (
style=""
). Cand doua reguli se contrazic, castiga cea cu specificitatea mai mare. Aceasta ierarhie explica de ce inline-ul suprascrie totul si de ce ID-ul bate clasa.
Pentru
organizarea CSS-ului
, o abordare populara este sa structurezi fisierul pe sectiuni: mai intai regulile generale (body, reseturi), apoi componentele comune (header, footer, meniu), apoi continutul specific (articole, carduri, formulare). Foloseste comentarii CSS (
/* Sectiunea Header */
) pentru a delimita clar fiecare sectiune.
Cand depanezi CSS (ceva nu arata cum te asteptai), foloseste Developer Tools din browser (F12, tab-ul Elements). Selecteaza elementul problematic si vezi in panoul din dreapta toate regulile CSS aplicate, in ordinea prioritatii. Regulile taiate cu o linie (strikethrough) sunt cele suprascrise de alte reguli cu specificitate mai mare. Aceasta unealta este esentiala pentru orice dezvoltator web.
Un sfat final pentru incepatori: nu incerca sa memorezi toate proprietatile CSS de la inceput. Exista sute de proprietati, si nimeni nu le stie pe toate pe de rost. Invata cele de baza (color, background-color, font-family, font-size, margin, padding, border) si pentru restul, cauta pe MDN Web Docs (developer.mozilla.org) - cea mai buna referinta CSS disponibila gratuit online.
Exercitii practice
Exercitiul 1 (Nivel minim) - Analiza CSS pe site-uri reale
Deschide 2-3 site-uri populare (de exemplu wikipedia.org, emag.ro, youtube.com) si analizeaza cum folosesc CSS. Foloseste Developer Tools (F12) si tab-ul Elements pentru a inspecta stilurile aplicate. Raspunde la urmatoarele intrebari:
- Alege un titlu (h1 sau h2) de pe site si noteaza ce proprietati CSS are aplicate (color, font-size, font-family, font-weight). Sunt diferite de stilurile implicite ale browserului?
- Gaseste un element care foloseste o clasa CSS. Care este numele clasei? Ce stiluri ii aplica? Exista si alte elemente pe pagina cu aceeasi clasa?
- Compara fontul (font-family) folosit pe Wikipedia cu cel de pe YouTube. Sunt diferite? Ce tip de font este fiecare (serif sau sans-serif)?
- Gaseste un element cu fundal colorat (background-color). In ce format este specificata culoarea: nume (red), hexazecimal (#FF0000) sau rgb()?
Raspunde numerotat: 1. ... 2. ... 3. ... 4. ...
Sfat: in Developer Tools, cand selectezi un element, panoul "Styles" din dreapta arata TOATE regulile CSS aplicate pe acel element, inclusiv fisierul din care provin. Regulile taiate sunt cele suprascrise de alte reguli cu prioritate mai mare.
Exercitiul 2 (Nivel standard) - Mini-proiect: Pagina personala stilizata cu CSS
Creeaza o pagina HTML de prezentare personala (
despre-mine.html
) si un fisier CSS extern (
stil.css
) care sa o stilizeze complet. Tema: pagina ta de portofoliu sau de prezentare.
Cerinte obligatorii:
⭐ Bonus (pentru nota maxima):
- Foloseste text-align: center pentru titlul principal
- Adauga line-height: 1.6 pe paragrafe pentru lizibilitate
- Foloseste text-decoration: none pe link-uri si stilizeaza-le cu culori custom
- Aplica un font Google Fonts importat cu <link> in <head>
- Creeaza un efect hover pe link-uri: a:hover { color: alta-culoare; }
Salveaza fisierele HTML si CSS in acelasi folder. Trimite folderul ca arhiva ZIP profesorului.
Testeaza pagina in browser si verifica cu Developer Tools (F12) ca toate stilurile se aplica corect!
Exercitiul 3 (Nivel performanta) - Compunere
Cerinta: Scrie un text de 8-10 randuri in care explici ce este CSS, de ce este important pentru web si cum se adauga la o pagina HTML. Descrie cele trei metode (inline, intern, extern), cele trei tipuri de selectori (element, clasa, ID) si avantajele separarii continutului (HTML) de design (CSS).
Indicii pentru structurarea raspunsului:
- Incepe prin a explica ce este CSS si ce controleaza (culori, fonturi, layout)
- Descrie cele trei metode de a adauga CSS: inline, intern, extern
- Explica de ce CSS extern este recomandat pentru site-uri cu mai multe pagini
- Prezinta cele trei selectori de baza: element (p), clasa (.nume), ID (#nume)
- Mentioneaza diferenta dintre clasa (reutilizabila) si ID (unic)
- Concluzioneaza cu avantajele separarii HTML de CSS si bune practici
Cuvinte cheie de folosit: CSS, Cascading Style Sheets, stil, selector, clasa, ID, element, inline, intern, extern, proprietate, valoare, color, font-family, background-color, specificitate, cascada
Format: Scrie raspunsul intr-un document (Word sau text), folosind paragrafe coerente. Salveaza si trimite profesorului.
Sfat: un raspuns bun nu doar enumera conceptele, ci explica si relatia dintre ele. De exemplu, explica de ce clasele sunt preferate fata de ID-uri pentru stilizare, sau de ce CSS inline are cea mai mare prioritate dar este cel mai putin recomandat.