Am vorbit despre HTML într-un articol anterior, iar acum a venit timpul să vorbim despre ce este CSS și cum a de venit acesta un standard în designul web modern.
CSS este acronimul de la Cascading Style Sheets, un limbaj cu ajutorul căruia poți stiliza un site. În alte cuvinte, CSS dictează elementelor de pe site cum trebuie să arate și este responsabil de o parte importantă din designul unui site.
Câteva dintre elementele de tip vizual care pot fi controlate de CSS sunt: culoarea, mărimea fontului, poziționarea elementelor pe pagină (layout-ul), dar și mărimea la care o poză este afișată spre exemplu.
CSS poate fi de trei tipuri: Inline CSS, Internal CSS sau External CSS.
- Inline CSS se folosește direct in cod pentru defini stilul elementului dorit.
- Internal CSS reprezintă definirea stilului în interiorul codului HTML, dar nu pentru fiecare element în parte, ci la finalul documentului.
- External CSS reprezintă un fișier de tipul .css care definește stilul pentru toate elementele de pe site. Acesta este cel mai întâlnit tip de utilizare a CSS deoarece este mult mai ușor de editat și poți edita site-ul la nivel global. În alte cuvinte, dacă vrei să editezi toate titlurile H2 ca să aibă culoarea albastră, faci asta o sigură dată, nu fiecare dată pentru fiecare articol în parte.
Iată câteva exemple de CSS
Inline CSS
<p style="color: blue;">Un paragraf aici care va avea culoarea albastră</p>
Rezultatul este acesta: Un paragraf aici care va avea culoarea albastră.
Internal CSS
Așa cum spuneam, acesta se regăsește alături de codul HTML pe o pagină anume.
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>Titlu albastru</h1>
<p>Paragraf rosu.</p>
</body>
</html>
Rezultatul va arăta astfel:
External CSS
Este un fișier cu sute de linii ca cele de mai jos:
h1 {color: blue;
font: 20px;}
p {color: black;}
Principalul avantaj al CSS, așa cum am menționat mai sus, este că poți stiliza site-uri cu milioane de pagini printr-un singur fișier
Așadar, acum știi ce este CSS, la ce se folosește, dar și cum se folosește. De asemenea, dacă dai click pe link-ul de la început vei afla mai multe și despre HTML, iar dacă știi HTML și CSS, poți încerca să creezi propriul design pentru un website.