Majoritatea antreprenorilor, cu exceptia celor care au un background in domeniul IT, nu se vor lovi de problema limbajelor de programare sau stilizare pana nu-si deschid un business online. In acel moment, isi vor da seama ca au nevoie si de creare site web, de un developer/designer, dar si de diverse solutii IT.
Daca si tu ai citit titlul si te intrebi ce inseamna CSS, atunci acest articol este pentru tine. Iti vom explica ce este CSS, ce legatura are cu HTML, cum poti folosi cele doua limbaje, dar si ce avantaje presupune folosirea CSS.
Ce inseamna CSS
CSS este prescurtarea termenului Cascading Style Sheets sau foi de stil in cascada, pe romaneste, o denumire nu foarte atragatoare, de altfel. Practic, desi ne referim in general la CSS ca la un limbaj de programare, precum HTML, subiectul articolului nostru este mai degraba un limbaj de stilizare pentru elementele HTML.
CSS este folosit pentru a defini stilurile folosite pentru o pagina web, de la design pana la aspectul si variatiile de afisare pentru diverse dimensiuni de ecran si dispozitive. Cu ajutorul limbajului de stilizare, vei stabili fonturile, culorile, alineatele si majoritatea configuratiilor pentru site-ul tau. Daca stilul ales este atragator pentru ochi, utilizatorul final va avea o experienta placuta de navigare si va reveni cu placere pe site-ul tau.
Cum sa folosesti CSS? Cateva exemple de modificari pe care le poti face gratie CSS includ:
- formatarea paragrafelor;
- modificarea literelor;
- sublinierea sau eliminarea sublinierii linkurilor;
- modificarea culorilor pentru legaturile dintre pagini;
- crearea butoanelor de legatura sau a casetelor de text;
- ajustarea marginilor;
- alinierea elementelor.
Istoria CSS
Istoria CSS incepe in anul 1997, atunci cand acesta este creat pentru dezvoltatorii web care vor sa defineasca aspectul vizual pentru paginile create. Scopul sau a fost acela de a permite separarea continutului si a structurii codului de designul vizual, lucru nemaiintalnit pana la acel moment.
Totusi, popularitatea acestui limbaj a crescut de abia in anul 2000, atunci cand browserele web incepeau sa foloseasca mai mult decat fonturile si culorile de baza pe care le punea la dispozitie CSS. Astazi, orice browser modern accepta toate nivelurile de CSS si majoritatea web designerilor il folosesc.
Tipuri de CSS
Exista trei modalitati prin care un designer poate scrie CSS intr-un fisier HTML. Primul este Inline CSS, mai exact definirea stilului direct in cod pe fiecare element dorit. Al doilea este Internal CSS, adica definirea stilului direct in codul de HTML. Ultimul este External CSS, modul care presupune definirea stilului intr-un fisier extern.
Caracteristicile limbajului de stilizare CSS
In general, CSS este un limbaj de programare nu foarte greu de folosit, el fiind recomandat pentru simplificarea procesului de prezentare a paginilor web. Stilurile pentru o pagina vor putea fi definite in Headul unui document HTML, in partea de Body sau intr-un fisier CSS extern. Acest sistem de stilizare ofera libertatea de suprascriere pentru un stil deja definit, folosind urmatoarea ierarhie:
- intai, se va lua in calcul stilul definit in fisierul extern;
- al doilea considerat va fi stilul definit in zona Head;
- ultimul pe lista importantei va fi CSS inline.
Printre cele mai populare editoare pentru cod CSS sunt: Atom, Brackets, Visual Studio Code, Sublime Text, Komodo Edit (cel mai simplu), Espresso (pentru utilizatori Mac OS) si Notepad++(indicat pentru HTML & CSS).
Toate stilurile vor fi definite prin taguri, mai exact coduri, si vor putea fi folosite pentru:
- culoarea unei pagini;
- selectarea imaginilor de fundal;
- spatierea caracterelor dintr-un text si alte variante de editare a textului;
- adaugara tabelelor;
- Introducerea de adrese URL;
- transformarea in 2D a elementelor de pe pagina;
- adaugarea animatiilor in elemente;
- paginare;
- adaugare de butoane;
- configurare de imagini si multe altele.
Mai merita sa afli si care sunt cei mai importanti termeni din limbajul de programare CSS:
- Selectori. Folositi pentru a identifica elementul din codul HTML caruia i se asociaza stilul. Pot include selectii multiple sau un singur element;
- Valori. Folosite dupa ce s-au selectat elementele si s-a stabilit aspectul lor. Valorile determina proprietatile elementelor.
Legatura dintre CSS si HTML
Sursa foto: https://www.pexels.com/photo/photo-of-turned-on-laptop-computer-943096/
Ce sunt HTML si CSS? Asa cum ziceam si mai sus, doua limbaje de programare. Exista totusi si cateva diferente intre ele. HTML este mai degraba un limbaj de marcare, nu unul de stilizare precum CSS. Desi sunt limbaje de programare diferite, care au coduri diferite, ele se completeaza perfect unul cu celalalt.
Daca limbajul HTML furnizeaza browserului informatii despre cum sunt structurate elementele in pagina, CSS ii comunica browserului cum vor arata aceste informatii. Practic, pentru a prezenta un document utilizatorilor, va fi nevoie sa-l transformi intr-un formular care sa fie utilizabil de catre public. Chiar daca HTML poate fi folosit si fara CSS, vei pierde componenta estetica a website-ului tau. Va functiona, dar cam atat. Daca vrei sa atragi cu adevarat atentia utilizatorilor, vei avea nevoie si de cunostinte CSS, de preferat furnizate de specialisti.
Beneficiile utilizarii CSS
Din punct de vedere tehnic, folosirea CSS presupune un layout al paginii mai bine masurat si o dimensiune redusa a fisierelor, deci latime de banda mai mica, in consecinta si timpi de incarcare mai rapizi. Cu toate astea, nu credem ca te intereseaza atat de tare aspectele tehnice. Probabil, vrei sa descoperi care sunt beneficiile folosirii limbajului CSS pentru site-ul afacerii tale. Iata care sunt cele mai importante:
- Economisesti timp. Designerul poate scrie codul o singura data, iar apoi il poate utiliza din nou si din nou in toate paginile HTML. In plus, exista si posibilitatea de a crea un stil definitiv pentru fiecare element HTML in parte, element care poate fi apoi transferat in orice pagina web care va avea nevoie de el;
- Orice modificare de formatare este mai usoara. CSS iti permite sa editezi doar foile de stil care corespund elementului/elementelor si codul va fi aplicat in toate paginile care utilizeaza elementul/elementele respective;
- Paginile se vor incarca mai rapid. Din punct de vedere tehnic, am mentionat deja asta, fiind evident ca o pagina se va incarca mai greu pe masura ce adaugi mai mult cod pe ea. CSS iti permite sa utilizezi mai putin cod prin aplicarea regulilor la toate etichetele dintr-un fisier HTML. Deci clientii vor avea mai putin de asteptat ca fiecare pagina sa se incarce.
- Utilizatorul va beneficia de o experienta mai placuta. Pentru clienti va fi mult mai usor de navigat daca textul si butoanele sunt bine organizate si amplasate in locuri logice, din perspectiva cititorilor;
- Compatibilitate cu toate dispozitivele. Iti doresti ca ai tai clienti sa-ti poata accesa website-ul indiferent de dispozitivul pe care-l detin, nu-i asa? CSS asigura vizibilitate optima si navigare intuitiva, oricat de mic ar fi ecranul dispozitivelor utilizate de clienti;
- Exista standarde web globale. Daca folosesti CSS, te asiguri ca paginile tale vor fi compatibile cu toate tipurile de browser, deci toata piata iti este accesibila;
Pur si simplu, CSS este mai potrivit pentru stilizare decat HTML, oferind o gama mai larga de atribute si optiuni de customizare a website-ului tau. Daca ai nevoie si de alte sfaturi in ceea ce priveste pagina ta web, nu ezita sa apelezi la consultanta IT. Iti recomandam noi atat serviciile, cat si echipamentele IT de care vei avea nevoie.
