In acest articol vom detalia ce este CSS si vom afla cate ceva despre istoricul, tipurile si avantajele utilizarii CSS.
Ce este CSS?
CSS este prescurtarea de la Cascading Style Sheets (sau „foi de stil in cascada”). Este limbajul de stiluri (sau limbaj de stilizare) pentru definirea modului de afisare a elementelor HTML, inclusiv culorile, aspectul si fonturile, facand astfel paginile noastre web prezentabile utilizatorilor.
Altfel spus, CSS se ocupa de stilizare, de felul in care sunt redate elementele HTM intr-o pagina, fiind un mecanism simplu de adaugare a elementelor de stil unui document web. Toate browserele suporta in prezent CSS.
Utilizand CSS, dezvoltatorii web au posibilitatea de a stoca separat stilurile, inlaturand formatarile din documentul HTML si stocandu-le intr-un fisier CSS separat. Astfel, acestia pot schimba usor aspectul paginilor web ale unui site, modificand un singur fisier.
Rolul CSS este de a crea foi de stil pentru web. Este independent de HTML si poate fi utilizat cu orice limbaj de marcare bazat pe XML.
Iar ca sa explicitam acronimul CSS:
- Cascading: Cascada de stiluri
- Style: Adaugarea de modele/Stilul tag-urilor HTML
- Sheets: Scrierea stilului nostru in diferite documente
Exemplele de cod CSS includ:
- formatarea usoara a paragrafului
- modificarea literelor majuscule
- modificarea culorilor legaturilor
- eliminarea sublinierii link-urilor
- crearea unui buton de legatura
- crearea unei casete de text
- alinierea centrala a elementelor
- ajustarea marginilor
Unde se definesc stilurile CSS?
Stilurile folosite pentru o pagina pot fi definite:
- in partea de Head a unui document HTML
- intr-un fisier CSS extern
- se poate aplica un stil diferit in partea de Body a unui fisier HTML, la fiecare tag HTML in parte (CSS inline)
CSS-ul ofera libertatea de a suprascrie un stil deja definit, lucrand cu o anumita ierarhie, astfel:
- primul luat in calcul va fi stilul definit in fisierul extern
- apoi stilul definit in zona Head
- ultimul va fi CSS inline
Scurt istoric CSS
- 1994 – Prima propunere, facuta de Hakon Wium Lie pe 10 octombrie
- 1996 – CSS a fost publicat pe 17 noiembrie impreuna cu influencerul Bert Bos, care ulterior a devenit coautor al CSS
- 1996 – CSS a devenit oficial, fiind publicat in luna decembrie
- 1997 – Pe 4 noiembrie a fost creat CSS level 2
- 1998 – CSS level 2 a fost publicat pe 12 mai
Editoare CSS
Unele dintre cele mai populare editoare pentru codul CSS sunt:
- Atom
- Visual Studio Code
- Brackets
- Espresso (pentru utilizatori Mac OS)
- Notepad++(indicat pentru HTML & CSS)
- Komodo Edit (simplu)
- Sublime Text
Tipuri de CSS
Exista 3 moduri de a scrie CSS in fisierul dvs. HTML:
- Inline CSS (definire stil direct in cod, pe elementul dorit)
- Internal CSS (definire stil direct in codul de HTML)
- External CSS (definire stil in fisier extern)
Ordinea prioritara este: Inline→ Internal→ External
Ordinea de aplicare
Daca intr-un document HTML sunt specificate mai multe foi de stil pentru un element HTML, stilurile se vor mixa intr-un stylesheet virtual dupa urmatoarele reguli:
- setarile implicite ale browserului
- foi de stiluri externe (din fisiere CSS)
- foi de stiluri interne (din sectiunea HEAD)
- stiluri inline (din tagul elementului HTML)
Inline CSS
- Inainte de CSS, acesta era singurul mod de a aplica stiluri
- Nu este un mod eficient de a scrie, deoarece are multa redundanta
- Autonom
- Aplicat in mod unic pe fiecare element
Exemplu:
<h3 style=” color:red”> Hello my friend </h3> <p style =” color: green”> Nice to see you </p>
Internal CSS
- Cu ajutorul etichetei de stil, putem aplica stiluri in fisierul HTML
- Redundanta este eliminata
- Aplicat in mod unic pe un singur document
Exemplu:
< style>
h1{
color:red;
}
</style>
<h3> Hello my friend </h3>External CSS
- Cu ajutorul tag-ului <link> in tag-ul de la inceputul paginii, putem aplica stiluri
- Se adauga referinta
- Fisier salvat cu extensia .css
- Redundanta este eliminata
- Aplicat in mod unic fiecarui document
Exemplu:
<head>
<link rel="stylesheet" type="text/css" href="numele fisierului css">
</head>
h1{
color:red; //.css file
}
Avantajele utilizarii CSS
- Layout-ul unei pagini web este mai bine masurat
- Stilul (CSS) este separat de structura (HTML), ceea ce inseamna o dimensiune redusa a fisierului
- Dimensiunea mai mica a fisierului inseamna latime de banda mai mica si, in cele din urma, inseamna timp de incarcare mai rapid.
HTML vs CSS
Limbajul HTML furnizeaza unui browser informatiile despre structurarea elementelor in pagina cu ajutorul (tag-urilor de marcare). Este un limbaj de editare, cu ajutorul caruia puteti afisa informatii intr-un website.
CSS este un limbaj de stilizare al elementelor, reprezentand un mecanism simplu de adaugare a elementelor de stil (tipuri de caractere, aliniere, spatiere, culori, etc.) unui document web.