Оригинални текст овог упутства израдио је Берт Бос, под називом: 'CSS tutorial: Starting with HTML + CSS'. Сва права задржава аутор.
Оригинал је на адреси http://www.w3.org/Style/Examples/011/firstcss.

Превод на српски: Лука Станисављевић, контакт: luka [на] cincplug [тачка] com. Грешке у преводу су могуће.
'Screenshot' примери у оригиналном упутству су у програмима 'KEdit' и 'Konqueror'. У овом преводу коришћени су 'Notepad' и 'Firefox'.

ћирилица - latinica

CSS упутство
Први кораци у HTML и CSS језицима

Ова кратко упутство намењено је онима који желе да користе CSS а који досад нису писали CSS фајлове.

Оно не објашњава много тога о CSS-у. Из њега можете научити како да направите HTML и CSS фајл, и како да омогућите да ова два фајла раде заједно. После тога можете да прочитате многобројна друга упутства и да својим HTML и CSS фајловима додате нова својства. Или можете почети да користите едитор за HTML и CSS који вам може помоћи да израдите сложенији веб-сајт.

Кад прочитате упутство, направићете страну која изгледа овако:

[Линк на завршну HTML страну]

HTML страна коју ће те добити, са бојама и распоредом, у целости направњена помоћу CSS-а.

Имајте на уму да не тврдим да је ово лепо ☺

Advanced: Одељци који овако изгледају нису обавезни. Они садрже нека додатна објашњења о HTML и CSS коду у датим примерима. Знак опасности на почетку оваквих одељака означава да је у питању напреднији материјал од оног у остатку текста.

1. корак: писање у HTML-у

За рад по овом упутству, предлажем да користите најједноставније алате. Примера ради, Notepad (за Windows), TextEdit (за Mac) или KEdit (за KDE) ће бити сасвим довољни. Кад једном схватите начела, можете да пређете на напредније алате, или чак на комерцијалне програме као што су Style Master, Dreamweaver o GoLive. Али док правите свој први CSS фајл, добро је да вас не збуњује превише напредних опција.

Не користите програме за обраду текста, као што су Microsoft Word и OpenOffice. Овакви програми уобичајено праве фајлове које веб-браузер не може да чита. За HTML и CSS, требају нам чисти, једноставни текст фајлови.

Први корак је да отворите свој текст едитор (Notepad, TextEdit, KEdit, који год волите), почевши од празног прозора, и да откуцате следеће:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Моја прва страна са стилом</title>
</head>

<body>

<!-- Навигација -->
<ul class="navbar">
  <li><a href="index.html">Главна страна</a>
  <li><a href="musings.html">Размишљања</a>
  <li><a href="town.html">Мој град</a>
  <li><a href="links.html">Линкови</a>
</ul>

<!-- Главни садржај -->
<h1>Моја прва страна са стилом</h1>

<p>Добродошли на моју прву страну са стилом!

<p>На њој нема слика, али бар има стил.
Има и линкове, премда не воде никудаe&hellip;

<p>Овде траба да буде још тога, али засад не знам шта.

<!-- Потпис и датум, ред је! -->
<address>Направио 5. априла 2004.<br>
  ја.</address>

</body>
</html>

Уствари, не морате ни да куцате. Можете да ископирате с ове веб-стране у свој едитор.

Advanced: Прва линија у овом HTML-у говори браузеру ком типу HTML-а страна припада (DOCTYPE означава ТИП ДОКУМЕНТА). У нашем случају - HTML верзија 4.01.

Речи између < и > зову се тагови и, као што видите, документ је смештен између <html> и </html> тагова. Између <head> и </head> налази се простор за разноврсне информације које се не приказују а екрану. Засад је ту само наслов документа, али касније ћемо тамо додати и CSS стил.

<body> је место на коме се налази стварни текст документа. У начелу, све што је тамо биће приказано, сем текста између <!-- и -->, који нам служи за коментаре унутар кода. Њега ће браузер да прескочи.

Од осталих тагова у овом примеру, <ul> представља “несортирану листу”, рецимо листу чији елементи нису поређани по редним бројевима. Таг <li> представља “елемент са листе”. <p> је “пасус”. <a> означава линк.

извор HTML-а у програму Notepad

Едитор Notepad приказује изворни HTML код.

Напредно: Ако желите да знате шта значе речи унутар <…>, добро место за почетак је Getting started with HTML. Али ево неколико речи о нашој уводној HTML страни.

Обратите пажњу да нисам затворио елементе “li” и “p”. У HTML-у (али не и у XHTML-у), дозвољено је прескочити </li> и </p> тагове, као што сам ја овде учинио, да би вам текст био нешто читљивији. Али, ако желите, можете их додати.

Претпоставимо да ће ово бити једна од неколико сличних страна на веб-сајту. Као што је и уобичајено за данашње веб стране, и ова ће имати мени који упућује на друге стране на хипотетичком сајту, неки себи својствен садржај, и потпис.

Сад одаберите “Save As……” из File менија, дођите до директоријума односно фолдера где желите да снимите фајл (можете и на Desktop) и снимите фајл под именом “mypage.html”. Немојте још да затварате едитор, требаће вам поново.

(Ако користите TextEdit за Mac, мораћете прво да кажете TextEdit-у да је текст заиста само текст, тако што ћете отићи у Format мени и изабрати “Make plain text”. Затим, кад снимите фајл и TextEdit предложи да додате екстензију “.txt” овом текст фајлу, изаберите “Don't append.” Понекад Mac покушава да буде превише паметан).

Затим, отворите фајл у браузеру. Можете то учинити овако: нађите фајл помоћу програма који иначе користите (Windows Explorer, Finder or Konqueror) и кликните на фајл “mypage.html”. Требало би да се отвори у браузеру који иначе користите. (Ако се то не деси, отворите браузер и превуците фајл у њега.)

Као што видите, страна изгледа прилично досадно…

2. корак: Додавање боја

Вероватно видите црни текст на белој позадини, али то зависи од подешавања на браузеру. Дакле, ствар коју је лако учинити да би страна добила више стила јесте додати боје. (Оставите браузер отворен, користићемо га поново).

Почећемо са стилом који је забележен унутар самог HTML фајла ("ембедован"). Касније ћемо ставити HTML и CSS у одвојене фајлове. Раздвајање је добро јер олакшава употребу истог стила у више HTML фајлова: само једном пишете фајл за стил. Али у овом кораку задржаћемо све у једном фајлу.

Треба да додамо елемент <style> у HTML фајл. Стил ће бити садржан у том елементу. Дакле, вратите се у прозор едитора и додајте следећих пет редова у "head" одељак HTML фајла:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Моја прва страна са стилом</title>
  <style type="text/css">
  body {
    color: purple;
    background-color: #d8da3d }
  </style>
</head>

<body>
[итд.]

Редови које треба додати су црвене боје. Први ред каже да је у питању стил и да је написан у CSS-у (“text/css”). Други ред каже да се стил додаје “body” елементу. Трећи ред утврђује да је текст љубичасте боје а следећи ред утврђује позадину као зеленкасто-жуту.

Advanced: Дефиниције стила у CSS-у састоје се од правила. Свако правило има три дела:

  1. Селектор (у примеру: “body”), који говори браузеру на који се део документа правило односи;
  2. Својство (у примеру: 'color' и 'background-color' су својства), објашњава који се аспект изгледа утврђује;
  3. Вредност ('purple' и '#d8da3d'), додељује вредност својству стила.

Пример показује да правила могу да се комбинују. Утврдили смо два својства, па смо могли да направимо и два правила:

body { color: purple }
body { background-color: #d8da3d }

али пошто се оба правила односе на 'body', написали смо само једном “body” и ставили оба својства и вредности заједно. За више обавештења о селекторима, види 2. поглавље у Lie & Bos.

Боја позадине 'body' елемента ће бити боја позадине целог документа. Осталим елементима (p, li, address…) нисмо дали никакву одређену позадину, па је они у начелу неће ни имати (односно: биће провидни). Својство 'color' утврђује боју елемента 'body', а сви остали елементи унутар њега наследиће његову боју, сем ако није утврђено другачије. (После ћемо додати још неке боје).

Сада сачувајте фајл (користите “Save” у File менију) и вратите се у прозор браузера. Ако притиснете дугме “Reload”, страна би требало да се преобрази из “досадне” у обојену (премда и даље прилично досадну) страну. Сем списка линкова у горњем делу, текст би сада требало да буде љубичаст на зеленкасто-жутој позадини.

Овако изгледа обојена страна у браузеру 'Firefox'

Овако изгледа страна у браузеру 'Firefox' кад јој додамо боје.

Advanced: Боје у CSS-у могу да се утврде на неколико начина. Овај пример показује два: именом (“purple” - љубичасто) или хексадецималном вредношћу (“#d8da3d”). Постоји око 140 утврђених имена за боје а хексадецималне вредности омогућују да се дефинише преко 16 милиона боја. Текст Adding a touch of style даје више обавештења о овим кодовима.

3. корак: додавање фонтова

Још једна ствар коју је лако урадити јесте направити разлику у фонтовима за различите елементе на страни. Онда нека текст буде у “Georgia” фонту, сем за 'h1' наслов, који ће бити “Helvetica.”

На Мрежи никад не можете бити сигурни које фонтове ваши посетиоци имају на својим рачунарима, зато ћемо додати и пар алтернатива: ако 'Georgia' није расположива, 'Times New Roman' или 'Times' су прихватљиви, а ако ни то не успе, браузер може да користи било који фонт са цртицама (серифима). Ако 'Helvetica' није ту, 'Geneva', 'Arial' и 'SunSans-Regular' су сасвим слични по облику, а ако их нема, браузер може да користи било који фонт који нема цртице (серифе).

Додајте следеће редове у едитору:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Моја прва страна са стилом</title>
  <style type="text/css">
  body {
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  </style>
</head>

<body>
[итд.]

Ако снимите фајл поново и притиснете “Reload” у браузеру, требало би да се појаве различити фонтови за наслов и остатак текста.

Екран са додатим фонтовима

Сада су наслов и главни текст у различитим фонтовима.

6. корак: додавање водоравне линије

Последње што ћемо додати стилу је водоравна линија којом ћемо раздвојити текст од потписа на дну. Користићемо 'border-top' да додамо тачкасту линију изнад елемента <address>:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Моја прва страна са стилом</title>
  <style type="text/css">
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul.navbar {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  ul.navbar li {
    background: white;
    margin: 0.5em 0;
    padding: 0.3em;
    border-right: 1em solid black }
  ul.navbar a {
    text-decoration: none }
  a:link {
    color: blue }
  a:visited {
    color: purple }
  address {
    margin-top: 1em;
    padding-top: 1em;
    border-top: thin dotted }
  </style>
</head>

<body>
[итд]

Сада је наш стил готов. Хајде сад да видимо како да га одвојимо у засебан фајл, како би остале стране могле да користе исти стил.

7. корак: стављање стила у одвојени фајл

Сад имамо HTML фајл унутар кога је уписана и информација о стилу. Али ако наш сајт порасте, вероватно ћемо хтети да нам и друге стране имају исти стил. Постоји бољи метод него да копирамо стил у сваку страну понаособ: ако ставимо стил у одвојени фајл, све стране могу да упућују на њега.

Да би направили фајл за стил, треба нам нови празан текстуални фајл. Можете да изаберете “New” у File менију свог едитора, да би отворили празан прозор. (Ако користите TextEdit, не заборавите да га поставите као обичан текст, користећи Format мени.)

Онда исеците (cut) све што је унутар <style> елемента у HTML фајлу и залепите (paste) у нови прозор. Немојте копирати саме тагове <style> и </style>. Они припадају HTML-у а не CSS-у. У новом прозору едитора требало би да имате комплетан стил:

body {
  padding-left: 11em;
  font-family: Georgia, "Times New Roman",
        Times, serif;
  color: purple;
  background-color: #d8da3d }
ul.navbar {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 2em;
  left: 1em;
  width: 9em }
h1 {
  font-family: Helvetica, Geneva, Arial,
        SunSans-Regular, sans-serif }
ul.navbar li {
  background: white;

  margin: 0.5em 0;
  padding: 0.3em;
  border-right: 1em solid black }
ul.navbar a {
  text-decoration: none }
a:link {
  color: blue }
a:visited {
  color: purple }
address {
  margin-top: 1em;
  padding-top: 1em;
  border-top: thin dotted }

Изаберите “Save As…” из File менија, водите рачуна да сте у истом директоријуму / фолдеру у коме је и mypage.html фајл, и снимите стил као “mystyle.css”.

Сад се вратите у прозор са HTML кодом. Избришите све од <style> до </style> тага, укључујући и саме тагове, и замените их <link> елементом, овако:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Моја прва страна са стилом</title>
  <link rel="stylesheet" href="mystyle.css">
</head>

<body>
[итд]

Ово говори браузеру да се стил налази у фајлу “mystyle.css”, а пошто се директоријум не спомиње, браузер ће тражити овај фајл у директоријуму у коме је нашао и HTML фајл.

Ако снимите HTML фајл и освежите га у браузеру, не би требало да видите никакву промену: стил на страни је и даље исти, само што сада долази из одвојеног, екстерног фајла.

Крајњи резултат додавања стила

Крајњи резултат

Следећи корак је да се оба фајла, mypage.html и mystyle.css, поставе на ваш веб-сајт. (Па добро, можда хоћете да их најпре мало дорадите…) Како се постављају, то већ зависи од вашег Интернет провајдера.

Напомена преводиоца: правилан приказ ћириличних слова најједноставније ћете постићи ако пре снимања фајла већ у 1. кораку (писање у HTML-у) иза наслова (после завршног тага </title>) додате следећи таг:
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
Његова намена је да упути браузер на кодни распоред који се користи на страни. У нашем случају то је utf-8, а ако ви уобичајено користите неки други кодни распоред за ћирилична слова (iso-8859-5, KOI8-r, Windows-1251 итд), упишите одговарајућу ознаку уместо utf-8 под ставком charset.

За даљи увод у CSS, види 2. поглавље у Lie & Bos, или Dave Raggett's intro to CSS..

Друга обавештења, укључујући и још нека упутства, можете наћи на страни learning CSS.

CSS Валидан
CSS!Валидан HTML 4.0!

Берт Бос, CSS контакт
Направљено 5. априла 2004. Последња измена $Date: 2004/12/25 11:53:18 $ GMT