Cele 3 moduri de stilizare

Daniel

În acest articol vom vorbi despre cele trei modalități prin care putem aplica stilul unei pagini web: CSS inline, CSS intern sau CSS extern. Fiecare metoda vine cu avantaje și dezavantaje, despre care vom vorbi în cele ce urmează.

#CSS Inline

Prin CSS inline putem aplica stilul unui singur element HTML. Scrierea codului CSS se va face prin adaugarea atributului style pe elementul căruia vrem să-i modificăm stilul:

<section style="padding: 1em; background-color: #282a36; color: #fff">
  <h1 style="text-align: center; font-size: 45px; font-family: sans-serif; text-shadow: 2px 2px 0 #000;">
    CSS inline
  </h1>
  <p style="margin-left: 50px; font-size: 25px; font-family: sans-serif;">
    Observăm că stilurile sunt destul de greu de citit și editat.
  </p>
  <p style="margin-left: 50px; font-size: 25px; font-family: sans-serif;">
    De aceea recomandăm evitarea 
    <span style="font-size: 30px; font-weight: bold; color: #9f616a;">
    acestei metode
    </span>
  </p>
</section>

Pagină web creata prin metoda CSS-ului inline
Demo complet

Metoda inline vine la pachet cu dezavantaje uriașe și din această cauză majoritatea programatorilor o evită. Hai să vedem de ce nu e indicată:

dacă avem de stilizat mai multe elemente similare, (să zicem mai multe paragrafe care vrem să arate la fel), prin metoda inline va trebui să facem copy-paste la cod pentru fiecare paragraf în parte. Mai mult, când o să ne răzgândim asupra stilurilor, va trebuie să ținem minte și să modificăm peste tot.
vedem că e greu să distingem codul CSS de cel HTML (se produce un așa numit efect de spaghetti code). Așadar, ne va fi dificil să înțelegem și să facem modificări pe un astfel de cod.

Aceasta este prima și cea mai ușor de înțeles metodă prin care putem stiliza o pagină web, dar după cum am menționat mai sus, nu este recomandată.

#CSS Intern

Dacă prin metoda inline trebuie să stilizăm câte un element pe rând, printr-un CSS intern putem controla stilul pentru o întreagă pagină, scăpând astfel de codul duplicat. Totodată, vom avea o mai bună înțelegere a codului și vom câștiga timp. Metoda de integrare a codului CSS în pagina web se va face prin inserarea elementului <style> în secțiunea <head> a documentului HTML. Față de metoda anterioară, la aceasta trebuie să precizăm pentru ce elemente vom aplica regulile de stilizare.

<style>
  a {
    color: #000;
    text-decoration: none;
    border-bottom: 1px solid #000;
  }
</style>

În exemplul de mai sus aplicăm regulile pe toate elementele de tip a, selectorul folosit fiind tagul elementului HTML.

Există și alți selectori: după clasă sau id. Vom vorbi de ei în lecțiile următoare, însă pentru moment e important să reții această metodă de stilizare și rolul selectorilor.

Uite mai jos un exemplu mai complet, în care aplicăm stiluri pe elementul main, heading-uri, paragrafe:

<!DOCTYPE html>
<html lang="ro">
<head>
<title>Stiluri</title>
<style>
main {
  padding: 1em;
  text-align: center;
  font-family: sans-serif;
  background-color: #282a36;
}
h1 {
  color: white;
}
p {
  color: white;
  font-size: 22px;
  font-weight: bold;
}
span {
  color: #9f616a;
  font-weight: bold;
}
</style>
</head>
<body>
<main>
<h1>Frontend.ro</h1>
<p>
  Învață alături de noi cum
  <span> să stilizezi </span>
  .
</p>
</main>
</body>
</html>

Pagină web creata prin metoda CSS-ului intern
Demo complet

Observăm că în acest caz codul HTML este puțin mai separat față de CSS ceea ce e o îmbunătățire față de metoda anterioară. În practică însă, nu recomandăm nici folosirea metodei interne pentru că site-urile sunt construite din mai multe pagini deci vom ajunge iar să facem copy-paste în fiecare pagină. Plus, deși codul HTML și CSS e puțin mai separat, sunt încă în același fișier și vom ajunge iar la spaghetti code pe măsură ce aplicația crește. Și ajungem iar de unde am plecat, right?

#CSS Extern

Ei bine, acestea fiind zise care ar fi totuși soluția pentru a face lucrurile așa cum trebuie? Metoda CSS-ului extern all the way! Aceasta este metoda pe care o recomandăm și constă în crearea unui fișier separat pe care-l asociem paginilor HTML. Integrarea fișierului CSS în HTML se va face prin intermediul elementului <link>.

<link rel="stylesheet" href="./style.css">

Unde:

atributul rel specifică relația dintre documentul HTML curent și documentul extern pe care îl conectăm acesteia. În cazul nostru, documentul extern este o foaie de stil
atributul href specifică locația (URL-ul) unde găsim foaia de stiluri

Mai concret, hai să vedem un exemplu:

Loading editor...

Astfel, prin aplicarea stilului descris în ambele foi, pagina va arăta așa:

Pagină web creata prin metoda CSS-ului extern
Demo complet

Prin această metodă rezolvăm ambele probleme:

în ceea ce privește copy-paste'ul, avand un fisier inclus in mai multe pagini e de ajuns sa modificam stilul in acel fisier iar stilurile se vor aplica oriunde este inclus
legat de spaghetti code, avand separat stilurile de HTML e mult mai usor sa intelegem si sa modificam codul

Psst: într-un document HTML pot fi adăugate mai multe foi de stil externe, fiecare printr-un element link diferit.

#BONUS

Poate v-ați întrebat de ce punem tagul <link> in <head> și nu în <body>. Motivul e legat de modul în care browser-ul citește documentul HTML, și anume de sus în jos. Astfel, punând elementul înainte de body ne asigurăm că stilurile sunt încărcate înainte să apară conținutul pe pagină. Dacă l-am pune la final de body - cum am făcut în video-ul de mai jos - e posibil să vedem mai întâi HTML-ul nestilizat iar mai târziu să se aplice stilurile.

CSS extern inclus la final de body

De aceea ca și "good practice" vom includem fișierele de CSS externe în <head>