Afla cum limbajul CSS iti salveaza site-ul de la o monotonie vizuala

Vă amintiți HTML (Hypertext Markup Language)? Limbajul de codare care functioneaza drept fundație pentru orice dezvoltare web? Ei bine, dacă HTML este primul limbaj pe care o sa vi-l doriti să-l învățați atunci când sunteți interesat să construiți site-uri web , vărul său CSS este un al doilea apropiat.

Ce este CSS? Și cum are legătură cu HMTL?

CSS înseamnă Cascading Style Sheets, cu accent pus pe „Stil”. În timp ce HTML este folosit pentru a structura un document web (definind lucruri precum titluri și paragrafe și permițându-vă să încorporați imagini, videoclipuri și alte medii), CSS apare și specifică stilul documentului dvs. – aspectul paginii, culorile și fonturile sunt toate determinate cu CSS. Gândiți-vă la HTML ca la o temelie (fiecare casă are una) și la CSS ca la opțiuni estetice (există o mare diferență între un conac victorian și o casă modernă de la mijlocul secolului).

Cum funcționează CSS?

CSS aduce stil paginilor tale web prin interacțiunea cu elemente HTML. Elementele sunt componentele HTML individuale ale unei pagini web, de exemplu un paragraf, care în HTML ar putea arăta astfel:

Acesta este paragraful meu!

Dacă doriți ca acest paragraf să pară roz și îndrăzneț pentru persoanele care văd pagina web printr-un browser web, ați folosi cod CSS care arată astfel:

p { culoare:roz; greutate font: bold; }
În acest caz, „p” (paragraful) se numește „selector” – este partea din codul CSS care specifică ce element HTML îl va afecta stilul CSS. În CSS, selectorul este scris în stânga primei paranteze. Informația dintre paranteze se numește declarație și conține proprietăți și valori care sunt aplicate selectorului. Proprietățile sunt lucruri precum dimensiunea fontului, culoarea și marginile, în timp ce valorile sunt setările pentru acele proprietăți. În exemplul de mai sus, „culoarea” și „greutatea fontului” sunt ambele proprietăți, iar „roz” și „bold” sunt valori. Setul complet între paranteze

{ culoare:roz; greutate font: bold; }
este declarația și, din nou, „p” (adică paragraful HTML) este selectorul. Aceleași principii de bază pot fi aplicate pentru a modifica dimensiunile fontului, culorile de fundal, indentările marginilor și multe altele. De exemplu. . .

body { background-color:albastru deschis; }
. . .ar face ca fundalul paginii dvs. să fie albastru deschis sau. . .

p { dimensiunea fontului:20px; culoarea rosie; }
. . .va crea un paragraf cu font de 20 de puncte cu litere roșii.

CSS extern, intern sau inline?

S-ar putea să vă întrebați cum se aplică de fapt acest cod CSS conținutului HTML. La fel ca HTML, CSS este scris în text simplu, simplu printr-un editor de text sau un procesor de text de pe computer și există trei modalități principale de a adăuga acel cod CSS la paginile tale HTML. Codul CSS (sau foile de stil) poate fi extern, intern sau inline. Foile de stil externe sunt salvate ca fișiere .css și pot fi utilizate pentru a determina aspectul unui întreg site web printr-un singur fișier (în loc să adăugați instanțe individuale de cod CSS la fiecare element HTML pe care doriți să îl ajustați). Pentru a utiliza o foaie de stil externă, fișierele dvs. html trebuie să includă o secțiune de antet care face legătura cu foaia de stil externă și care arată cam așa:

Aceasta va lega fișierul .html la foaia dvs. de stil externă (în acest caz, mysitestyle.css), iar toate instrucțiunile CSS din acel fișier se vor aplica apoi paginilor dvs. .html legate.

Foile de stil interne sunt instrucțiuni CSS scrise direct în antetul unei anumite pagini .html. (Acest lucru este util mai ales dacă aveți o singură pagină pe un site care are un aspect unic.) O foaie de stil internă arată cam așa. . .

. . . o culoare de fundal ciulin și paragrafe cu font albastru mediu de 20 de puncte vor fi acum aplicate acestei pagini unice .html.

În cele din urmă, stilurile inline sunt fragmente de CSS scrise direct în cod HTML și aplicabile doar unei singure instanțe de codare.