Сада знамо како да
направимо поприлично

комплетну веб страницу
са свакаквим означеним

текстовима и сликама.
Али нешто недостаје. Стил.

Моја веб страница изгледа исто

као страница коју сте ви правили.

Текст црне боје, бела позадина, исти фонт,

све је постављено да иде од горе на доле.

Али ви сте били на вебу
и видели сте да странице

међусобно изгледају веома другачије.

Погледајте около на Кхан Академији

у све различите боје и фонтове и величине.

Заправо, урадимо ово сада.

Паузирајте овај аудио водич и погледајте
неколико различитих сајтова.

По чему се сваки од њих разликује?

Шта волите или не волите
око њихових стилова?

Сачекаћу вас овде...

Важно је да видите колико
веб сајтови могу бити различити,

пошто ћете веома брзо сазнати како да

и ваши сајтови изгледају другачије
и желећете да то урадите

на начин који вас чини срећним,
пошто он представља вас,

али он такође усрећује и друге кориснике.

Добро, да би подесили
нашу страницу, треба

да научимо цео нови језик, CSS.

То означава каскадни стил страница
(енгл: cascading style sheets).

И то је начин дефинисања стилова
који ће се применити

на различите делове наше веб странице.

Уграђујемо CSS унутар HTML-а,
али он заправо није HTML.

Тако да морамо научити читав нов језик

и да покушамо да не бркамо HTML са CSS-ом.

Видећемо како CSS-ом можемо
да стилизујемо свакакве аспекате

наше странице, као што су
фонтови, величине и распоред,

али почећемо са нечим
веома забавним - бојом.

Шта кажете да изменимо неке наслове

на нашој страници у фину травнату зелену?

Да почнемо, треба да додамо таг STYLE

унутар HEAD тага наше веб странице.

Када претраживач то види,
он ће помислити: "У реду,

све унутар овога је CSS.

Користићу мој CSS парсер да то разумем

уместо мог HTML парсера."

Овде унутра, додаћемо CSS стилско правило.

Стилско правило садржи селектор
који претраживачу говори

на који део веб странице
се стил односи и декларације

које претраживачу говоре какав стил
да примени на тај део.

Ако желимо да стилизујемо
све Н2 наслове на нашој страници,

навешћемо тај селектор Н2.

Затим ћемо ставити витичасте заграде.

Постарајте се да буду витичасте,
а не угласте или округле.

Оне неће радити.

Унутра ћемо сместити наше декларације

које садрже својства и вредности.

Дакле, да променимо боју текста,
користимо особину COLOR.

Затим стављамо двотачку и сада
треба да смислимо неку вредност.

Треба да кажемо претраживачу
за коју боју смо заинтересовани.

Па, можемо просто записати
зелена (енгл. green).

Он ће то разумети,
пошто је зелена уобичајена боја.

Али то није зелена коју сам желела.

Желела сам зелену боју траве.

Ако напишем травнато зелена... Упс.

Сада се претраживач збунио
и исписује наслове

поново у црној боји пошто никад није чуо
за травнато зелену боју.

Ако желимо да можемо да
наведемо било коју боју,

онда морамо да користимо
нешто што се зове RGB спектар.

За њега сте можда чули на часу ликовног.

Не морате бити неки експерт за то,

пошто имамо за вас овде један RGB бирач.

Да бисте га користили,
само замените ово са RGB и заграде.

Бирач боја ће искочити и можете померити

миш унутар њега и изабрати боју

и видећете боју моментално ажурирану.

И када сте задовољни, кликните.

Сада, да ли сте приметили ова три броја

која су се изменила у нашим RGB заградама?

То су црвена, зелена и плава
(енгл: [R]ed, [G]reen, [B]lue)

компонента које чине ту боју.

У реду, згодна ствар
око овог CSS селектора H2

који користимо јесте то што он утиче
на све Н2 на страници.

Тако да можемо променити више наслова,
пошто желимо

да сви ови Н2-ови буду зелени,
и то јесте доследно

за све ове Н2-ове који се
налазе на страници.

Ако наставите даље са CSS-ом,
можете научити

о многим другим начинима
за селектовање делова странце,

као када би желели
само један од ових Н2-ова.

Али можете урадити доста тога и са овим
селекторима заснованим на таговима.

Хајде да додамо још једно
CSS стилско правило.

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

Како бисмо обојили позадину странице?

Па, који таг обухвата целу страницу?

То није Н1.

То није Р, није слика.

То је BODY таг. Запамтите, све

видљиво је увек унутар тог BODY тага.

Значи, ако желимо да
стилизујемо целу страницу,

треба да користимо селектор
да изаберемо тај таг.

Дакле, написаћемо BODY.

Сада, уместо color,
написаћемо background color,

двотачку и онда RGB, па заграде.

Добијемо наш бирач боја
и отворићу га и одабрати плаву

која ме потсећа на смешне зеке
и облачно небо.

Ето га!

Погледајте моју стилизовану страницу!

Постоји још стотине CSS својстава

поред боје и позадине,

али ове су забавне да се са њима почне.

Заправо, када завршим са причом,
поиграјте се

бојама које сам изабрала
и прилагодите ову страницу

да буде више по вашем укусу него по мом.

У реду? Крените!