Krok 3 - Kaskadowe Arkusze Stylów

Tak wygląda strona, po zastosowaniu CSS. Aby było ciekawiej, powiem, że kod HTML'a tej strony, a poprzedniej prawie niczym się nie różni. To jest właśnie magia kaskadowych arkuszów stylów. Jeżeli pamiętacie, w pierwszym kroku określiliśmy link do nieinstniejącego jeszcze pliku CSS.
Kodowanie w CSS różni się od kodowania w HTML, ale jego nauka wcale nie jest trudniejsza. HTML i CSS uzupełniają się wzajemnie:
W poprzednim kroku zbudowaliśmy stronę z divów, czy jak to określiłem klocków/cegiełek. Wyobraźmy sobie, że
mamy urządzenie, które pozwala nam dowolnie modyfikować wielkość, kolor, czy kształt tych klocków. Tym narzędziem jest właśnie CSS. Przydatny link: Składnia CSS

Do dzieła!

Stwórzmy najpierw plik, do którego wcześniej określiliśmy ścieżkę:

Teraz go otwórzmy i wpiszmy:

W tym skrypcie nie określamy żadnego diva, lecz cały znacznik <body>. W ten sposób, możemy wprowadzić ustawienia potrzebne dla całej strony. Zaznaczamy w nim, że kolor tła (background-color) ma mieć wartość 171a21, czyli ciemnoszaroniebieski.
Zasada kodowania kolorów jest bardzo prosta. Używa się standardu RGB od Red Green Blue. Pierwsze dwa znaki określają odcień czerwieni, trzeci i czwarty określają odcień zieleni, a dwa ostatnie odcień niebieskości. Odcienie te się ze sobą mieszają dając nam odpowiedni kolor.

Ale co oznaczają te litery i cyfry?

Te litery i cyfry to po prostu liczby szesnastkowe, czyli "0 1 2 3 4 5 6 7 8 9 A B C D E F", gdzie "0" oznacza czarny, a "F" biały.
Mamy więc 16*16*16*16*16*16 możliwości wymieszania tych kolorów, czyli możemy uzyskać 16777216 kolorów łącznie. To całkiem niezły wynik i uważam, że każdy znajdzie coś dla siebie.

Kolor czcionki

Kolor czcionki w przeglądarkach jest domyślnie czarny. Z racji, że stworzyliśmy bardzo ciemne tło dla naszej strony, to wypadałoby sprawić, aby nasze znaki były czytelniejsze. W tym celu wystarczy, że wpiszemy "color: white".

I tym właśnie sposobem, czcionka na całej stronie stała się biała.

Określenie wyglądu divów

Zacznijmy od naszego "pojemnika", czyli diva o identyfikatorze "container". Teraz wyjaśni się do czego w ogóle jest on nam potrzebny. Container przechowuje nasze bloczki i dzięki niemu możemy je wszystkie na przesuwać. Ja chcę, żeby moja strona miała szerokość 1000 pikseli oraz była na środku. W tym celu wpisujemy:

Jak to działa? To proste!
Skrypt ten określa margines dla lewej i dla prawej strony. Wpisując "auto" sprawiamy, że określa się on automatycznie i w ten sposób wyrównuje się dla obu stron. "Width" natomiast to z angielskiego "szerokość". Ma 1000 pikseli.

Czcionka

Nasza strona bez wątpienia nabiera rąk i nóg, jednak brakuje jej jeszcze charakteru. Z pewnością pomoże nam z tym problemem wybór odpowiedniej czcionki. Google zrobiło świetne narzędzie dla programistów, dzięki któremu możemy dobierać darmowe czcionki, a kod generuje nam się automatycznie.
Zapraszam na: fonts.google.com

Którą wybrać?

Pierwszą rzeczą, na którą musimy zwrócić uwagę to kompatybilność z naszym językiem. Aby poprawnie wyświetlały się polskie znaki potrzebne jest nam wybranie typu Latin Extended na prawym panelu z listą podpisaną "languages".

Kiedy już je wybierzemy, nasza lista się uaktualni i nie musimy już się martwić o polskie ogonki.
Jak już znajdziemy te, które nam się podobają wystarczy, że naciśniemy na nią, a później wybierzemy pozycję Select this font:

Wybieranie czcionek na fonts.google.com przypomina robienie zakupów w sklepie internetowym. Możemy wybierać co chcemy, a następnie przejść do "koszyka". Ja wybrałem dwie - jedną na główny baner, a drugą do wpisywania treści.
Jak już wybraliśmy co nas najbardziej interesuje to wystarczy, że przejdziemy do "koszyka" klikając na ciemny panel na dole z napisem "X Families Selected". Wysunie nam się małe okienko z gotowymi skryptami do wklejenia w <head> strony oraz bezpośrednio do css.

Kopiujemy wygenerowany kod i wklejamy do HTML:

i do CSS:

Pamiętajmy o tym, że należy wklejać odpowiednie czcionki do odpowiednich miejsc.

Szerokość została dopasowana do szerokości głównego containera, a wysokość do przycisku "home". Jednak czym jest float: left?
"Float: left;" sprawia, że bloki układają się do lewej strony zamiast domyślnie od góry do dołu. Przejdą do następnej linii w momencie, kiedy zabraknie im miejsca w divie nadrzędnym. Działa to jak zawijanie tekstu. Możemy też sprawić, że bloki będą się układały do prawej wpisując "Float: right;".
Teraz określam szerokość i wysokość spisu treści:

Sprawmy teraz, aby nasze przyciski, w ogóle przypominały przyciski. Musimy podzielić menu na pięć części. Wiemy już, że przycisk strony głównej ma wymiary 100px na 100px, a szerokość panelu ma 1000px. Po odjęciu daje nam to 900px wolnego miejsca na pozostałe cztery przyciski. Po krótkim rachunku wychodzi, że na każdy przycisk spisu treści wypada 225px szerokości, czyli będą miały wymiary 225px na 100px. Z tymi danymi możemy brać się do roboty! Wróćmy do przycisku "home". Musimy go dostatecznie zmniejszyć, bo 512x512 to zdecydowanie za dużo. 50x50 powinno być idealne. Dodaję nowy identyfikator specjalnie dla naszej ikony. Nazwę go "domek".

Widzimy, że oprócz znanych nam skryptów, znajduje się text-align oraz display. Text-align: center;, jak sama nazwa wskazuje sprawia, że tekst, bądź element się wyśrodkowuje, natomiast display: block; sprawia, że owy div traktowany jest, jako element blokowy.

Dodamy do naszego obrazka atrybut id="domek" z racji, że wcześniej tego nie zrobiliśmy.

Ale samo określenie wymiarów przycisku, nie wystarcza. Musimy wprowadzić niewielkie poprawki, aby każda przeglądarka wyświetlała go w ten sam sposób.

Dzięki tym dodatkowym elementom, ikona zawsze będzie widoczna w centrum naszego przycisku, ale to jeszcze nie wszystko!
Przycisk ten działa, ale tylko w momencie, kiedy naciskamy na ikonę, a przecież chodziło o to, aby działał cały przycisk, a nie tylko obrazek bądź napis w środku. W tym celu musimy "naciągnąć" link na całego diva. W tym celu musimy dodać kolejne linijki kodu do naszego pliku CSS.

Szybkie wyjaśnienie:
a.fillhome składa się z dwóch części: a oraz .fillhome. "a", jak wiemy to jest link, a .fillhome to klasa. Klasa różni się tym od identyfikatora, że identyfikatory poprawnie są przyznawane dla pojedynczych divów, natomiast klasa jest przyznawana dla wielu różnych. Na tym etapie nie wiedziałem, czy nie dodam jeszcze podobnego przycisku na samym dole strony dlatego użyłem klasy.
Sam skrypt a.fillhome określa linki (a) tylko dla klasy .fillhome.
W środku jest tylko określenie elementu elastycznego oraz wymiary rozciągające element na 100% diva.
Teraz musimy jeszcze dodać klasę do tego przycisku w HTML:

I przycisk działa! Brakuje jeszcze jakiejś wskazówki, że mamy doczynienia z elementem interaktywnym. Najlepiej byłoby, jakby przycisk się delikatnie podświetlał lub przyciemniał wraz z najechaniem na niego kursorem. Zrobimy to w bardzo prosty sposób:

Atrybut :hover dodany do jakiegokolwiek elemntu sprawi, że zmieni się on w dany sposób po najechaniu na niego oraz wróci do poprzedniego stanu po zdjęciu kursora.

Wszystkie te kroki powtórzę teraz do pozostałych elementów menu i zmienię kolor liter na czarny.

Gotowe! Czas zająć się innymi rażącymi błędami strony.
Pierwszym błędem jest to, że strona jest bardzo jednolita. Musimy sprawić, żeby panel z treścią różnił się od tła i przykuwał uwagę bardziej, niż reszta strony.

Na początek może sprawmy, aby kolor tła panelu z treścią, był nieco jaśniejszy od tła strony. Możemy to zrobić poprzez małą modyfikację koloru, który wcześniej wybraliśmy. Kolor tła dla body to 171a21. Wiadomo natomiast, że jeżeli cyfra szesnastkowa jest większa, tym kolor jest jaśniejszy. Dodajmy więc do każdej z tych cyfr jeden. 171a21 --> 282b32. Powinno być nieco jaśniejsze. Sprawdźmy:

Idealnie!

Teraz dodajmy może jeszcze ramkę. Możemy to zrobić stosując "Border".

Border: (szerokość)px (typ ramki, np "solid" lub "dashed") (kolor ramki)

Myślę, że pasowałaby gruba, biała linia przerywana. Wpisuję więc:

Oprócz ramki określiłem jeszcze padding, czyli margines "do wewnątrz", przez co wpisywany tekst nie będzie przy samej krawędzi panelu treści oraz marginesy górne i dolne, aby oddzielić treść od menu i stopki.

Poprawiamy linki

Na wcześniejszym screenshocie można było zauważyć mało widoczne linki. Podobnie, jak czcionka, linki również mają swój domyślny kolor. Jest to ciemno-niebieski na nieodwiedzone oraz ciemno-fioletowy na odwiedzone strony. Sprawmy, żeby zarówno odwiedzone, jak i nieodwiedzone były białe.
W tym celu musimy określić wygląd <a> dla atrybutu visited oraz link. Wpisuję:

Atrybuty oddziela się dwukropkiem. Visited oznacza z angielskiego "odwiedzony", a link to po prostu link.
Oznaczyłem tam text-decoration, czyli dekorację tekstu w linku na underlined, czyli "podkreślony". Color to tak jak poprzednio kolor czcionki. I to wszystko - linki naprawione!

Stopkę pozostawię bez zmian. Według mnie jest idealna taka, jaka jest.

I to już wszystko w tym kroku. Zrobiliśmy całą masę dobrej roboty, a strona wygląda, jak powinna. W następnym kroku zajmiemy się tylko wrzuceniem jej na hosting.