Дефинисање CSS стилова¶
CSS стилове је могуће дефинисати на неколико начина:
у одвојеним фајловима,
у HTML страни користећи
<style>елемент,у атрибуту
style.
Повезивање одвојеног CSS-а¶
Препоручени начин дизајна модерних веб-страна је формирање одвојеног CSS фајла који садржи дефиниције стилова. Овим се обезбеђује конзистентан изглед свих страна у великим сајтовима, јер више HTML фајлова може да укључи исти CSS документ, па више веб-страна користи исти стил дефинисан на једном месту - у CSS документу.
У случају повезивања са CSS фајлом потребно је користити елемент <link>, којим се у HTML документу дефинише где се налази CSS фајл са стиловима.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="stilovi.css">
</head>
<body>
</body>
</html>
Атрибут href у овом елементу представља име фајла, који садржи дефиниције стилова који ће бити примењени на елементе у документу. Прегледач чита CSS правила из наведеног фајла и, у складу са њима, приказује HTML елементе у HTML документу.
Адресе CSS докумената се наводе на исти начин као и адресе екстерних HTML докумената у href атрибуту елемента <a>. Вредности могу бити релативне адресе ка CSS документима на истом сајту, или апсолутне адресе, које најчешће референцирају CSS документе на неком другом сајту.
Као што се у елементима <a> могу користити апсолутни линкови ка удаљеним фајловима, наш документ може да буде повезан са неким CSS фајлом ван нашег сајта, којим се дефинишу стилови, на пример:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
</body>
</html>
Апсолутни линкови се често користе у случају да је фајл са стиловима јавно доступан на неком сајту и желите да директно искористите те стилове уместо да копирате тај фајл у ваше локално окружење. Довољно је само да ставите <link> елемент који садржи локацију CSS фајла, као у претходном примеру.
Warning
Мана оваквог приступа је то што је, чак и за веб-стране сачуване на вашем рачунару, за правилан приказ потребан приступ интернету.
CSS у style елементу¶
Стилови могу да се дефинишу у самом HTML документу помоћу елемента <style> у заглављу стране, као што је приказано у следећем кôду, који можете одмах да испробате:
Овако дефинисани стилови се могу применити само на елементе HTML документа у коме су наведени.
CSS у атрибуту¶
Могуће је дефинисати стил појединих елемената стране додавањем атрибута style у сам HTML елемент, на пример:
<p style="padding:1.5em;font-size:1.25em;color:#fff;background-color:#0f0">
Неки текст.
</p>
Задавање стила помоћу атрибута style у HTML елементу је познато као инлајн стил (енгл. inline CSS).
Употреба HTML елемента <style> у заглављу веб-стране и атрибута style у њеним елементима се данас сматра лошом праксом и не треба их користити при дизајнирању сајтова. Овакав начин задавања стила може узроковати неконзистентност у изгледу страна и захтева експертско знање да би се идентификовали проблеми. Овај приступ је имао више смисла у почетку развоја веба, када је због спорог интернета било важно да се све што је потребно за дефинисање изгледа и садржаја стране налази у једном фајлу, и када су сајтови били мањи и једноставнији него данас.
Овај начин дефинисања стилова и даље може бити погодан за једноставне примере, у којима се у једном документу у потпуности дефинише и структура и изглед стране. Ми ћемо за наше примере користити овај начин у наставку, а сличне примере можете наћи и на сајтовима као што је W3CSchools.
Још једном наглашавамо да у пројектима који садрже више страна (на пример, ако правите једноставан сајт ради вежбе) треба да користите само препоручени начин рада, а то је држање CSS кода у посебном фајлу.