Umiemy już stworzyć

kompletną stronę internetową,

z tekstem i obrazami,
ale czegoś brakuje: stylu.

Moja strona wygląda tak,

jak te, które tworzycie wy.

Czarny tekst, białe tło,
taka sama czcionka,

układ od góry do dołu.

Ale przecież widzieliście,
że strony

bardzo różnią się między sobą.

Na stronie Khan Academy

są różne kolory, czcionki
o różnym kroju i rozmiarze.

Zróbmy teraz coś takiego.

Zatrzymajcie ten wykład
i obejrzyjcie parę stron.

Czym się różnią?

Co w ich stylu
wam się podoba, a co nie?

Zaczekam.

Musicie wiedzieć,
jak różne mogą być strony,

bo niedługo sami wymyślicie,

jak odróżnić swoją stronę
od innych,

tak, by wyrażała was samych

i podobała się użytkownikom.

Żeby uatrakcyjnić naszą stronę,

nauczymy się nowego języka, CSS.

CSS to skrót od
„Cascading Style Sheets”

i określa style,
których użyjemy

w różnych częściach naszej strony.

Umieszczamy CSS w HTML,
mimo że jest on innym językiem.

Musimy się nauczyć języka CSS;

nie mylmy go z HTML.

Zobaczymy, jak za pomocą CSS
zmieniać wygląd strony:

czcionki, rozmiary i układ.

Na początek coś wesołego. Kolor.

Może damy niektóre nagłówki

w kolorze trawiastozielonym?

Aby zacząć,
wstawiamy znacznik „style”

u góry strony.

Znacznik „style”
to sygnał dla przeglądarki,

że wszystko wewnątrz to CSS.

Dla jasności użyję parsera CSS

zamiast parsera HTML.

Tu dodamy regułę stylu CSS.

Ma ona selektor,
mówiący przeglądarce,

której części strony dotyczy styl,

a deklaracje wskazują,
jaki styl zastosować.

Chcąc zmienić wszystkie
nagłówki „h2”,

wpisujemy „h2” w selektorze.

Później wstawiamy klamry.

Upewnijcie się,
że wstawiliście klamry.

Inaczej nic z tego nie będzie.

W środku umieścimy deklaracje

z właściwościami i wartościami.

Do zmiany koloru tekstu
używamy właściwości „color”.

Dalej dwukropek
i trzeba wpisać wartość.

Informujemy przeglądarkę,
który wyświetlić kolor.

Moglibyśmy wpisać „green”
(zielony).

Przeglądarka zrozumie,
bo to typowy kolor.

Ale ja nie chciałam zieleni,

tylko zieleń trawiastą.

Wpiszę „trawiastozielony”…

Przeglądarka się pogubiła.
Wyświetli nagłówki

na czarno, bo nie zna
trawiastej zieleni.

Żeby określić kolor,

korzystajmy z palety RGB.

Może słyszeliście o niej
na plastyce.

Bez obaw,
nie musicie być ekspertami:

przygotowaliśmy próbnik kolorów.

Wystarczy zamienić to
na „rgb()”

Wyskoczy próbnik wyboru koloru,

w którym najeżdżacie
na wybrany kolor myszką

i od razu widzicie,
jak będzie wyglądać.

Gdy znajdziecie dla siebie
kolor, kliknijcie.

Wiecie, co oznaczają trzy liczby

w nawiasie RGB?

Czerwień, zieleń i błękit.

Składniki wybranego koloru.

Dobre jest to,
że selektor „h2” w CSS

zmieni kolor wszystkich
nagłówków „h2” na stronie.

Możemy zmienić
wiele nagłówków naraz,

wszystkie będą zielone,

jednakowe na całej stronie.

Poznając CSS, dowiecie się,

jak inaczej zmieniać
wygląd części strony,

np. tylko jednego nagłówka „h2”.

Tego rodzaju selektory
dają dużo możliwości.

Teraz - inna reguła stylu CSS.

Zrobimy tło w kolorze
błękitu nieba.

Jak zmienić kolor tła strony?

Który znacznik obejmuje ją całą?

Nie „h1”.

Ani „p”, ani „image”.

To „body”. Pamiętacie?

To, co widoczne,
zawsze jest w znaczniku „body”.

Chcąc zmienić styl całej strony,

używamy selektora,
by wybrać ten znacznik.

Wpiszemy „body”.

Zamiast „color” wpiszemy
„background-color” (kolor tła),

dalej dwukropek i „rgb()”.

Wyskakuje próbnik kolorów,
wybieram błękit,

który kojarzy się z królikami
i pierzastymi chmurami.

I już!

Spójrzcie na moją piękną stronę!

CSS może zmieniać
setki właściwości

oprócz koloru czcionki i tła,

ale te były dobre na początek.

Kiedy skończę,
pobawcie się kolorami,

pozmieniajcie tę stronę,

żeby nabrała waszego stylu.

Dobrze? Start!