/* ovo je CSS-komentar +/
/* najvažniji deo CSS-a, koji zapravo opisuje izgled HTML-dokumenta,
je skup CSS-pravila. Tipično CSS-pravilo izgleda ovako:
selektor {
svojstvo1: vrednost1;
svojstvo2: vrednost2;
...
svojstvo: vrednost;
}
Selektor "bira" deo HTML-dokumenta koji se formatira. Formatiranje se opisuje tako što se pojedinim CSS-svojstavima selektora zadaju željene vrednosti.
Najjednostavniji selektor je naziv nekog HTML-elementa. Na primer selektor "p" bira sve HTML-elemente u dokumentu sa tim nazivom, drugim rečima sve pasuse.
Ako želimo da pasusi budu poravnati uz obe margine, upotrebićemo CSS-svojstvo 'text-align'. Moguće vrednosti tog svojstva su 'left' (tekst HTML-elementa je poravnat samo uz levu marginu), 'right' (tekst HTML-elementa je poravnat samo uz desnu marginu), 'center' (tekst HTML-elementa je centriran), 'justify' (tekst HTML-elementa je poravnat uz obe margine). Ukoliko se ne zada vrednost CSS-svojstva 'text-align', podrazumeva se da je zadata vrednost 'left'.
Prema tome, pravilo za poravnavanje svih pasusa u dokumentu uz obe margine izgleda ovako:
*/
p {
text-align: justify;
}
/* centriranje naslova */
h1 {
text-align: center;
}
h2 {
text-align: center;
}
h3 {
text-align: center;
}
/* kraći način:
h1, h2, h3 {
text-align: center;
}
*/
<!DOCTYPE html>
<html>
<head>
<title>Naslov prozora</title>
<meta charset='UTF-8'/>
<style>
p {
text-align: justify;
}
/* centriranje naslova */
h1 {
text-align: center;
}
h2 {
text-align: center;
}
h3 {
text-align: center;
}
/* kraći način:
h1, h2, h3 {
text-align: center;
}
*/
</style>
</head>
<body>
<h2>Структура и стил. CSS</h2>
<p>Прва верзија HTML-а је омогућила да се приликом креирања документа опише и његова структура и његов изглед (стил, форматирање). Структурирање документа је процес идентификације и означавања структурних јединица у документу попут наслова и поднаслова, пасуса, цитата, листи, слика, табела, формулара и елемената формулара, итд. Опис стила документа се односи на то приказ структурних јединица: да ли су структурне јединице (на пример, наслови) центриране или са поравнатом само левом маргином, коју фамилију, тежину, стил, величину фонта користе, које боје је текст, а које боје је позадина структурне јединице‚ да ли постоји неки оквир око структурне јединице, колико је растојање садржине структурне јединице од тог оквира (унутрашње маргине), односно колико је растојање структурне јединице од суседних структурних јединица (маргине), на којој позицији у документу се приказује одређена структурна јединица, како се нумеришу листе и слично.</p>
<p>Испоставило се да је за потребе ажурирања и одржавања документа, поготово када се структура документа не мења, већ само његов изглед, боље решење да се физички раздвоје опис структуре документа и опис стила, односно форматирања документа. Из наведених разлога се препоручује да се актуелна верзија HTML5 користи искључиво за опис структуре документа, а да се опис стила препусти CSS-у.</p>
<h3>CSS-правила</h3>
<p>Најважнији део CSS-а, који описује изглед HTML-документа,
је скуп CSS-правила. Типично CSS-правило изгледа овако:</p>
<p>селектор {<br/>
својство1: вредност1;<br/>
својство2: вредност2;<br/>
...<br/>
својство: вредност;<br/>
}</p>
<p>Селектор "бира" део HTML-документа који се форматира. Форматирање се описује тако што се појединим CSS-својставима селектора задају жељене вредности.</p>
<p>Најједноставнији селектор је назив неког HTML-елемента. На пример селектор "p" бира све HTML-елементе у документу са тим називом, другим речима све пасусе.</p>
<p>Ако желимо да пасуси буду поравнати уз обе маргине, употребићемо CSS-својство 'text-align'. Могуће вредности тог својства су 'left' (текст HTML-елемента је поравнат само уз леву маргину), 'right' (текст HTML-елемента је поравнат само уз десну маргину), 'center' (текст HTML-елемента је центриран), 'justify' (текст HTML-елемента је поравнат уз обе маргине). Уколико се не зада вредност CSS-својства 'text-align', подразумева се да је задата вредност 'left'.</p>
<p>Према томе, правило за поравнавање свих пасуса у документу уз обе маргине изгледа овако:</p>
<p>p { text-align: justify; }</p>
<h3>Унутрашњи CSS</h3>
<p>Један од начина за повезивање CSS-а и HTML-а је унутрашњи CSS. Идеја је да се CSS налази унутар HTML-документа (по чему је и добио име унутрашњи), али строго издвојен од остатка документа у оквиру HTML-елемента style. Елемент style се наводи искључиво у оквиру елемента head, тј. у оквиру заглавља HTML-документа.</p>
<p>Унутрашњи CSS је погодан за употребу ако се примењује само на један HTML-документ и такви ће углавном бити наредни примери, тј. углавном ћемо користити унутрашњи CSS као начин повезивања CSS-а и HTML-а.</p>
</body>
</html>