I oto nadszedł dzień drugi wyzwania, w którym poznajemy podstawy HTML i CSS. Dzisiaj przed nami tajemnice CSS. 3..2..1.. Start!
Instrukcja 
obsługi wyzwania
Ten wpis jest drugim z trzech, które ukażą się na blogu przez najbliższe dni. Każdego dnia w artykule znajdziecie omówienie podstawowych zagadnień z HTML i CSS oraz zadania do zrobienia. Przejście przez treść wpisu i wykonanie zadań nie powinno zająć Wam więcej niż godzinę. Dodatkowo codziennie w tej grupie na FB odbędzie się wystąpienie live, w którym pokażę na żywo omówione we wpisie zagadnienia i odpowiem na Wasze pytania. jeżeli chcecie więc mnie posłuchać, koniecznie śledźcie dedykowaną dla wyzwania grupę na Facebooku dziś o 21:00. Live będzie zapisany w grupie oraz podlinkowany w tym wpisie (wieczorem), także będzie można go też obejrzeć później. W razie jakichkolwiek pytań czy problemów, śmiało piszcie do mnie pod tym postem albo przez Facebooka. Zaczynamy!
EDIT: video możecie już obejrzeć tutaj
Czym jest CSS?
Dziś przed nami CSS. Co to takiego? Otóż CSS do skrót od Cascading Style Sheets, co oznacza Kaskadowe Arkusze Stylów. To CSS sprawia, iż nasza strona internetowa nabiera rumieńców i to dosłownie. Bowiem tutaj zajmujemy się ustawianiem kolorów, różnego rodzaju efektów, jak na przykład ramki. To CSS odpowiada też za rodzaj fontów, jakich używamy, ich rozmiar. To dzięki CSS przeglądarka wie, jak ułożyć elementy na stronie. Widzieliście wczoraj, iż Wasze projekty w samym HTML były dość smutne, wszystko zapisane jak w gazecie. W końcu HTML to dokument i od gazety się wywodzi. A przecież dzisiaj nie chcemy, by strony internetowe przypominały nam gazetę. Mają być dynamiczne, estetyczne, przejrzyste. I to wszystko uzyskujemy dzięki CSS. Konsekwetnie, dzisiaj też podam prostą definicję za Wikipedią:
Arkusz stylów CSS to lista dyrektyw (tzw. reguł) ustalających w jaki sposób ma zostać wyświetlana przez przeglądarkę internetową zawartość wybranego elementu (lub elementów) (X)HTML lub XML. Można w ten sposób opisać wszystkie pojęcia odpowiedzialne za prezentację elementów dokumentów internetowych, takie jak rodzina czcionek, kolor tekstu, marginesy, odstęp międzywierszowy lub choćby pozycja danego elementu względem innych elementów bądź okna przeglądarki. Wykorzystanie arkuszy stylów daje znacznie większe możliwości pozycjonowania elementów na stronie, niż oferuje sam (X)HTML.
Jak wygląda CSS?
Jak przeczytaliście wyżej, w arkuszu CSS znajdziemy listę reguł, które mają być zastosowane do danego dokumentu HTML. Jak więc taki arkusz CSS wygląda? Zróbmy dokładnie tak jak wczoraj i wejdźmy do narzędzi deweloperskich przeglądarki. Dla zapominalskich – prawy przycisk myszy na stronie i Inspect lub Zbadaj. Powinniście zobaczyć dokładnie to samo, co wczoraj, jednak tym razem zwróćcie uwagę na prawą stronę (tę węższą na obrazku poniżej) – to tam znajdziecie spis reguł CSS zastosowanych do danego dokumentu HTML.
Arkusz CSS wygląda zupełnie inaczej niż dokument HTML. Jak widzicie, mamy tutaj selektor, do którego odnosi się reguła, a następnie treść reguły. Selektor jest z kolei odnośnikiem do odpowiedniego elementu w kodzie HTML. Za chwilę wyjaśnimy sobie dokładnie, jak to działa, ale najpierw spójrzcie na ten przykład na Codepen. Kod HTML jest prawie sam jak we wczorajszym poście, jednak w podgląd na dole znacznie się różni i to wszystko właśnie dzięki CSS. Jak widzicie w sekcji z kodem CSS, w arkuszu CSS znajdujemy blok z selektorami, tutaj to na przykład body albo #title, a potem podajemy w nawiasie klamrowym zestaw reguł, które mają być zastosowane. Poszczególne reguły oddzielamy od siebie średnikiem (nie zapominajcie o tym!). Pewnie łatwo zaważyliście, iż można się gwałtownie domyślić za co odpowiada dana reguła, bo ich nazwy są dość intuicyjne. Na początku będziecie musieli na pewno szukać, w jaki sposób poustawiać niektóre rzeczy, ale potem gwałtownie Wam wejdą do głowy
Klasy i ID
Pewnie widzicie, iż w kodzie HTML w przykładzie pojawiło się coś nowego, a są to deklaracje klas oraz ID. Będą nam one służyć do łatwiejszego stylowanie elementów. W kodzie CSS możemy się odnosić bowiem bezpośrednio do znaczników HTML, czyli ostylować wszystkie paragrafy przez podanie reguły dla p, jednak nie zawsze jest tak, iż chcemy wszystkie paragrafy na stronie stylować tak samo. I tutaj z pomocą przychodzą nam klasy. Możemy bowiem nadać klasę wybranym elementem, potem napisać do niej regułę CSS i wszystkie wskazane przez nas elementy w kodzie HTML, będę miały odpowiedni styl. To bardzo ułatwia pracę i zaoszczędza czas, bo nie musimy stylować każdego elementu osobno. Możemy zidentyfikować grupy, do których będą odnosiły się te same style i wykorzystać to w naszym kodzie. Jedną klasę można nadać wielu elementom, natomiast z ID sprawa wygląda inaczej. ID, czyli identyfikator może być w dokumencie HTML tylko jeden. Nadajemy go wybranemu elementowi i również możemy się odwołać do ID w kodzie CSS.
Spójrzcie raz jeszcze na kod HTML z przykładu i zobaczcie, iż klasa i identyfikator są nadawane przez przypisanie do znacznika odpowiedniego atrybutu. Atrybuty te nazywają się class oraz id. Przypisujemy im wartość zupełnie jak robiliśmy to wczoraj dla innych atrybutów, czyli podajemy ją w nawiasie poprzedzając znakiem równości. Przy nadawaniu klas i ID nie używamy polskich znaków. jeżeli nazwa klasy ma więcej niż jedno słowo, zwyczajowo zapisujemy te słowa po myślniku na przykład main-header. Z kolei jeżeli ID ma mieć więcej niż jedno słowo, stosujemy wtedy tzw. zapis camel case, czyli w tym przypadku ID wyglądałoby tak: mainHeader.
Wiemy już jak nadać klasę albo ID elementowi HTML, ale teraz czas, by dowiedzieć się, jak się do nich odwołać w pliku CSS. To bardzo ważna rzecz, o której łatwo zapomnieć na początku nauki. Dlatego Was od razu na to uczulam, by zaoszczędzić Wam frustracji. Mała dygresja – gdy coś zrobimy nie tak w kodzie CSS, tzn. na przykład źle odwołamy się do danego elementu HTML, nic się nie stanie. Nie będzie żadnego komunikatu o błędzie, ani nic w tym stylu, przeglądarka po prostu nie nada danego stylu elementowi, bo nie będzie widziała odwołania do niego. Dlatego czasem tak trudno jest wychwycić, w którym odwołaniu zrobiliśmy błąd. Ale wracając do odwołania – jeżeli chcemy klasie dopisać jakąs regułę, poprzedzamy nazwę klasy kropką w pliku CSS. jeżeli chcemy dopisać regułę dla ID, nazwę ID poprzedzamy tzw. płotkiem albo haszem czyli znakiem #. Z kolei jak odwołujemy się do samego znacznika HTML, zapisujemy po prostu ten znacznik, ale bez znaków < oraz >, jak to robimy w pliku HTML.
Czas na magię!
I tak wygląda magia CSS! Zapisujemy różne style, a one nakładając się na siebie sprawiają, iż nasza strona ożywa. Co ważne, arkusze stylów są kaskadowe nie bez powodu, bowiem style w nich wskazane nakładają się na siebie. To znaczy, jeżeli w kodzie CSS napiszemy regułę dla wszystkich paragrafów odwołując się do znacznika p, a potem jednemu z nich dodamy inną regułę przez nadanie klasy, obie będą zastosowane do danego elementu (o ile oczywiście się nawzajem nie wykluczają, wtedy zawsze ważniejsze są reguły które nadajemy elementom, które mają klasę lub ID).
Żeby zobaczyć to w praktyce, spójrzcie na mój projekt na Codepen. Zobaczycie tam, iż wszystkie paragrafy mają ustawioną wielkość na 14px. Reguła jest napisana przez odwołanie do znacznika p. Jeden z paragrafów ma nadaną klasę main-text i swoją regułę, która podaje, iż tekst tego paragrafu ma być w ciemnoniebieskim kolorze. Mimo iż reguła dla tej klasy nie precyzuje jakie wielkości ma być napis, ma on 14px, ponieważ przeglądarka stosuje dla niego regułę zapisaną dla wszystkich paragrafów. jeżeli jednak zapisalibyśmy w regule klasy, iż ma mieć tu wielkość 20px, zmieniłby się rozmiar napisów w paragrafie o danej klasie. Zawsze ważniejsze są reguły nadane klasom i ID, nie te nadane odwołaniom do znaczników. Warto zauważyć, iż możemy odnosić się też do takich dużych znaczników jak html albo body, dzięki czemu stylujemy cały dokument.
Zadania na dziś!
Bez zbędnego przedłużania – czas na zadania na dziś. Pracuj nad tym samym projekcie, co wczoraj, dzięki czemu Twoja mini strona nabierze kolorów
- Dwóm z trzech paragrafów z wczorajszego ćwiczenia nadaj jedną klasę, a następnie dopisz regułę CSS, która sprawi, iż tekst tej klasy będzie miał kolor zielony.
- Nadaj ID jednemu z nagłówków, a następnie zmień mu kolor tła na żółty.
- Zmień rozmiar fontu na 16 pikseli wszystkim paragrafom odwołując się do znacznika p, a nie do klasy. Mają być też zapisane w Times New Roman.
- Ustaw ramkę obrazkowi. Sprawdź, w jaki sposób można to zrobić. Niech będzie szeroka na 5 pikseli i czerwona, a dodatkowo nie ma być ciągłą linią tylko przerywaną. W razie problemów z wyszukiwaniem, sprawdź w tej dokumentacji.
- Niech drugi z wypisanych przez Ciebie wczoraj linków będzie miał wielkość 25 pikseli. Odwołaj się do niego w wybrany przez siebie sposób.
Powodzenia!
Zadanie bonusowe (oryginalne podane podczas live przy pierwszej edycji wyzwania)
- Spraw, aby każde drugie zdjęcie z Twojej wczorajszej listy z filmami miało zieloną ramkę.
- Ramka ma być w formie zielonych kropek. Ostyluj wszystkie drugie zdjęcia tylko jedną regułą w CSS.
- Spraw, aby wszystkie tytuły filmów miały czerwony kolor, a imiona i nazwiska aktorów niebieski. Również użyj do każdego z tych stylowań tylko jednej reguły w CSS.
Koniecznie podziel się swoimi projektem w grupie na Facebooku. Tam też możesz zadawać pytania w razie problemów A jutro zajmiemy się dalszym wykorzystaniem HTML i CSS razem. Stworzymy pierwszy układ strony! Widzimy się na blogu z samego rana!
Chcesz się czymś podzielić? O coś zapytać? Napisz komentarz pod tym postem, maila do mnie na joanna@wakeupandcode.pl albo wiadomość na fanpage Wake up and Code.
