0:00:00.705,0:00:02.163
Сада знамо како да[br]направимо поприлично

0:00:02.163,0:00:04.119
комплетну веб страницу[br]са свакаквим означеним

0:00:04.119,0:00:07.949
текстовима и сликама.[br]Али нешто недостаје. Стил.

0:00:07.949,0:00:09.400
Моја веб страница изгледа исто

0:00:09.400,0:00:10.982
као страница коју сте ви правили.

0:00:10.982,0:00:13.686
Текст црне боје, бела позадина, исти фонт,

0:00:13.686,0:00:15.851
све је постављено да иде од горе на доле.

0:00:15.851,0:00:18.019
Али ви сте били на вебу[br]и видели сте да странице

0:00:18.019,0:00:20.229
међусобно изгледају веома другачије.

0:00:20.229,0:00:21.609
Погледајте около на Кхан Академији

0:00:21.609,0:00:24.652
у све различите боје и фонтове и величине.

0:00:24.652,0:00:26.819
Заправо, урадимо ово сада.

0:00:26.819,0:00:29.895
Паузирајте овај аудио водич и погледајте[br]неколико различитих сајтова.

0:00:29.895,0:00:31.625
По чему се сваки од њих разликује?

0:00:31.625,0:00:35.012
Шта волите или не волите[br]око њихових стилова?

0:00:35.012,0:00:37.204
Сачекаћу вас овде...

0:00:38.051,0:00:40.750
Важно је да видите колико[br]веб сајтови могу бити различити,

0:00:40.750,0:00:43.229
пошто ћете веома брзо сазнати како да

0:00:43.229,0:00:45.442
и ваши сајтови изгледају другачије[br]и желећете да то урадите

0:00:45.442,0:00:48.535
на начин који вас чини срећним,[br]пошто он представља вас,

0:00:48.535,0:00:51.198
али он такође усрећује и друге кориснике.

0:00:51.198,0:00:53.001
Добро, да би подесили[br]нашу страницу, треба

0:00:53.001,0:00:55.455
да научимо цео нови језик, CSS.

0:00:55.455,0:00:57.878
То означава каскадни стил страница[br](енгл: cascading style sheets).

0:00:57.878,0:00:59.759
И то је начин дефинисања стилова[br]који ће се применити

0:00:59.759,0:01:01.735
на различите делове наше веб странице.

0:01:01.735,0:01:06.306
Уграђујемо CSS унутар HTML-а,[br]али он заправо није HTML.

0:01:06.306,0:01:08.025
Тако да морамо научити читав нов језик

0:01:08.025,0:01:11.165
и да покушамо да не бркамо HTML са CSS-ом.

0:01:11.165,0:01:13.957
Видећемо како CSS-ом можемо[br]да стилизујемо свакакве аспекате

0:01:13.957,0:01:16.696
наше странице, као што су[br]фонтови, величине и распоред,

0:01:16.696,0:01:20.548
али почећемо са нечим[br]веома забавним - бојом.

0:01:20.548,0:01:22.184
Шта кажете да изменимо неке наслове

0:01:22.184,0:01:25.531
на нашој страници у фину травнату зелену?

0:01:25.531,0:01:28.404
Да почнемо, треба да додамо таг STYLE

0:01:28.404,0:01:30.523
унутар HEAD тага наше веб странице.

0:01:31.845,0:01:34.461
Када претраживач то види,[br]он ће помислити: "У реду,

0:01:34.461,0:01:37.388
све унутар овога је CSS.

0:01:37.388,0:01:40.061
Користићу мој CSS парсер да то разумем

0:01:40.061,0:01:43.105
уместо мог HTML парсера."

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

0:01:48.312,0:01:50.886
Стилско правило садржи селектор[br]који претраживачу говори

0:01:50.886,0:01:54.063
на који део веб странице[br]се стил односи и декларације

0:01:54.063,0:01:56.791
које претраживачу говоре какав стил[br]да примени на тај део.

0:01:56.791,0:02:00.336
Ако желимо да стилизујемо[br]све Н2 наслове на нашој страници,

0:02:00.336,0:02:03.995
навешћемо тај селектор Н2.

0:02:03.995,0:02:06.010
Затим ћемо ставити витичасте заграде.

0:02:06.010,0:02:08.475
Постарајте се да буду витичасте,[br]а не угласте или округле.

0:02:08.475,0:02:10.151
Оне неће радити.

0:02:10.151,0:02:12.797
Унутра ћемо сместити наше декларације

0:02:12.797,0:02:14.402
које садрже својства и вредности.

0:02:14.402,0:02:19.240
Дакле, да променимо боју текста,[br]користимо особину COLOR.

0:02:19.240,0:02:22.901
Затим стављамо двотачку и сада[br]треба да смислимо неку вредност.

0:02:22.901,0:02:25.777
Треба да кажемо претраживачу[br]за коју боју смо заинтересовани.

0:02:25.777,0:02:28.706
Па, можемо просто записати[br]зелена (енгл. green).

0:02:29.306,0:02:32.197
Он ће то разумети,[br]пошто је зелена уобичајена боја.

0:02:32.197,0:02:33.833
Али то није зелена коју сам желела.

0:02:33.833,0:02:35.930
Желела сам зелену боју траве.

0:02:35.930,0:02:39.422
Ако напишем травнато зелена... Упс.

0:02:39.422,0:02:42.401
Сада се претраживач збунио[br]и исписује наслове

0:02:42.401,0:02:45.656
поново у црној боји пошто никад није чуо[br]за травнато зелену боју.

0:02:45.656,0:02:48.446
Ако желимо да можемо да[br]наведемо било коју боју,

0:02:48.446,0:02:51.638
онда морамо да користимо[br]нешто што се зове RGB спектар.

0:02:51.638,0:02:54.150
За њега сте можда чули на часу ликовног.

0:02:54.150,0:02:55.996
Не морате бити неки експерт за то,

0:02:55.996,0:02:58.806
пошто имамо за вас овде један RGB бирач.

0:02:58.806,0:03:03.806
Да бисте га користили,[br]само замените ово са RGB и заграде.

0:03:04.083,0:03:06.559
Бирач боја ће искочити и можете померити

0:03:06.559,0:03:09.330
миш унутар њега и изабрати боју

0:03:09.330,0:03:12.405
и видећете боју моментално ажурирану.

0:03:12.405,0:03:14.874
И када сте задовољни, кликните.

0:03:14.874,0:03:17.024
Сада, да ли сте приметили ова три броја

0:03:17.024,0:03:20.407
која су се изменила у нашим RGB заградама?

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

0:03:22.933,0:03:25.818
компонента које чине ту боју.

0:03:26.464,0:03:29.928
У реду, згодна ствар[br]око овог CSS селектора H2

0:03:29.928,0:03:33.940
који користимо јесте то што он утиче[br]на све Н2 на страници.

0:03:33.940,0:03:36.532
Тако да можемо променити више наслова,[br]пошто желимо

0:03:36.532,0:03:40.360
да сви ови Н2-ови буду зелени,[br]и то јесте доследно

0:03:40.360,0:03:43.475
за све ове Н2-ове који се[br]налазе на страници.

0:03:43.475,0:03:45.123
Ако наставите даље са CSS-ом,[br]можете научити

0:03:45.123,0:03:47.482
о многим другим начинима[br]за селектовање делова странце,

0:03:47.482,0:03:50.020
као када би желели[br]само један од ових Н2-ова.

0:03:50.020,0:03:54.408
Али можете урадити доста тога и са овим[br]селекторима заснованим на таговима.

0:03:54.408,0:03:56.318
Хајде да додамо још једно[br]CSS стилско правило.

0:03:56.318,0:03:59.213
Овај пут да направимо[br]позадину небеско плавом.

0:03:59.213,0:04:02.056
Како бисмо обојили позадину странице?

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

0:04:05.811,0:04:07.204
То није Н1.

0:04:07.204,0:04:10.571
То није Р, није слика.

0:04:10.571,0:04:13.168
То је BODY таг. Запамтите, све

0:04:13.168,0:04:16.201
видљиво је увек унутар тог BODY тага.

0:04:16.201,0:04:18.380
Значи, ако желимо да[br]стилизујемо целу страницу,

0:04:18.380,0:04:22.617
треба да користимо селектор[br]да изаберемо тај таг.

0:04:22.617,0:04:25.412
Дакле, написаћемо BODY.

0:04:26.905,0:04:31.278
Сада, уместо color,[br]написаћемо background color,

0:04:31.709,0:04:36.359
двотачку и онда RGB, па заграде.

0:04:36.359,0:04:41.049
Добијемо наш бирач боја[br]и отворићу га и одабрати плаву

0:04:41.049,0:04:45.646
која ме потсећа на смешне зеке[br]и облачно небо.

0:04:45.646,0:04:46.661
Ето га!

0:04:46.661,0:04:49.370
Погледајте моју стилизовану страницу!

0:04:49.370,0:04:51.494
Постоји још стотине CSS својстава

0:04:51.494,0:04:54.116
поред боје и позадине,

0:04:54.116,0:04:56.743
али ове су забавне да се са њима почне.

0:04:56.758,0:04:59.157
Заправо, када завршим са причом,[br]поиграјте се

0:04:59.157,0:05:01.534
бојама које сам изабрала[br]и прилагодите ову страницу

0:05:01.534,0:05:04.043
да буде више по вашем укусу него по мом.

0:05:04.043,0:05:06.489
У реду? Крените!