Увод у CSS

Док HTML језик служи за опис структуре документа, CSS (Cascade Style Sheet) се користи за дефинисање стила, односно изгледа елемената веб странице. Пример из претходног чланка, Увод у HTML, допуњен је новим елементима, који су дефинисани таговима div, span и а.

<!--test.html-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>Наслов странице</title>
    <link rel="stylesheet" href="style.css">
    <style>
        .obojeni-pasus{color:red;}
        #jedinstveni-id-1{width:200px;}
    </style>
</head>
<body>
    <h1>Главни наслов текста</h1>
    <div id="jedinstveni-id-1" class="klasa">
        <p style="font-weight:bold;">
            <span class="prva-rec">Пасус</span> у оквиру одељка1
        </p>
    </div>
    <div class="klasa">
        <p class="obojeni-pasus">
            <a href="http://bpp.rs/uvod-u-css" title="ЦСС">Увод у CSS</a>
        </p>
    </div>
</body>
</html>

Таг div се користи за груписање других блок елемената, попут пасуса, слика и др. Таг span се користи у оквиру инлајн делова документа, попут речи у пасусу. Тагови div и span немају неко специфично значење и њихова основна сврха је да омогуће примену CSS стилова и клијентских скрипти на деловима документа. Таг а, скраћено од енглеске речи anchor, користи се за дефинисање везе, односно линка, до другог HTML документа. Стил се може придружити било којем HTML елементу и може бити примењен на неколико начина:

У саставу тага (inline)

<p style="font-weight:bold;">

Приказани код ће учинити сав текст у оквиру пасуса подебљаним. Овакав начин дефинисања стилова треба избегавати увек када је то могуће. CSS је уведен у циљу развдвајања дефиниција структуре и изгледа документа. Коришћење инлајн стилова обесмишљава разлог из којег је CSS првобитно уведен.

Уграђен у документ

<style>
    .obojeni-pasus{color:red;}
    #jedinstveni-id-1{width:200px;}
</style>

У оквиру заглавља документа може се уочити style пар тагова у оквиру којих је дефинисана класа obojeni-pasus и идентификатор jedinstveni-id-1. Симболи . и # су специјални знаци којима се дефинише да називи представљају класу, односно идентификатор. Основна разлика између класе и идентификатора је то што више елемената може делити исту класу, док идентификатор, уколико је наведен, мора бити јединствен за дати елемент у оквиру целог документа.

У екстерном фајлу

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

Ово је препоручени начин дефинисања стилова и пожељно га је користити за цели сајт који се састоји из више страница. У оквиру href атрибута наведена је адреса до css фајла. У конкретном примеру потребно је да се фајлови style.css и html документ налазе у истом фолдеру.

/*style.css*/
h1{color:green; font-size:1.5em;}
.klasa{float:left; width:200px; padding:10px; border:1px solid #00f; background:#ccc;}
.prva-rec{font-style:italic;}
a {color:brown; text-decoration: underline;}

Раздвајање стилова од структуре докумената у многоме олакшава посао веб дизајнерима и програмерима динамичких веб страница. Мењањем само CSS фајла могуће је постићи потпуно другачији визуелни идентитет сајта, без икаквих измена HTML кода. Одлични примери који подржавају ову тврдњу могу се наћи на сајту CSS Zend Garden.

Уколико ископирате текст са сајта и сачувате фајлове test.html и style.css, па затим отворите фајл test.html требало би можете видети у свом веб браузеру документ налик документу на слици:

Додатак за Фајерфокс веб браузер, Фајербаг, је од велике користи при писању и учењу HTML-а и CSS-a. Омогућава, између осталог, преглед и мењање структуре и стилова документа у реалном времену.