Znasz już wszystkie elementy HTML potrzebne do dokończenia strony głównej, więc czas wykonać tę pracę. Dla przypomnienia pokazuję jeszcze raz, jak ma ona wyglądać.
Powyżej jest widoczna pomniejszona wersja, na której nie wszystko dobrze widać. Jeśli chcesz dokładnie zobaczyć, jak ta strona wygląda w oknie przeglądarki, kliknij obraz, aby wyświetlić go w pełnym rozmiarze.
Poniżej znajduje się kod HTML, na bazie którego będziemy teraz pracować.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Ciekawi ludzie</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body id="home">
<header id="main-header">
<hgroup>
<h1>Ciekawi ludzie</h1>
<p>Poznaj ciekawe osoby ze świata nauki i techniki</p>
</hgroup>
<nav>
<a href="index.html">Główna</a>
<a href="erdos.html">Paul Erdős</a>
<a href="feynman.html">Richard Feynman</a>
<a href="why-the-lucky-stiff.html">why the lucky stiff</a>
</nav>
</header>
<main>
<article>
<img src="img/home-featured.png" alt="" class="featured">
<p>W świecie nauki i techniki można znaleźć wiele nietuzinkowych i czasami genialnych postaci, które odcisnęły niezatarte piętno na swoich dziedzinach wiedzy.</p>
<p>Niektóre z tych osób, jak na przykład słynny matematyk Paul Erdős czy genialny fizyk teoretyczny Richard Feynman, miały usposobienie ekstrawertyczne i nie stroniły od zainteresowania innych ludzi.</p>
<p>Inni są introwertykami, których męczy rozgłos. Należy do nich na przykład znany programista o pseudonimie why the lucky stiff, a także należał nieżyjący już słynny fizyk teoretyczny Paul Dirac.</p>
<p>Jeśli lubisz poznawać niezwykłe osobowości, które wsławiły się ciekawymi dokonaniami w dziedzinie nauki lub techniki, to w naszej witrynie z pewnością znajdziesz coś dla siebie.</p>
</article>
</main>
<footer id="main-footer">
<p>Copyright © Shebang 2023 || <a href="kontakt.html">Kontakt</a> | <a href="o-nas.html">O nas</a> | <a href="wspolpraca.html">Współpraca</a></p>
</footer>
</body>
</html>Zwróć uwagę na dodatek identyfikatora do elementu body. Strona główna w większości witryn internetowych jest wyjątkowa i często nie jest zbudowana według szablonu obowiązującego na podstronach. Dlatego nadaliśmy jej identyfikator home, aby móc odwoływać się specyficznie tylko do elementów należących wyłącznie do tej strony.
Także elementy header i footer mają identyfikatory, ponieważ mogą one występować w różnych miejscach na stronie (np. jako nagłówek i stopka sekcji albo artykułu), więc chcemy mieć możliwość wygodnego odnoszenia się tylko do tych podstawowych komponentów strukturalnych całego dokumentu.
Pracę zaczniemy od zdefiniowania cech podstawowego kontenera naszej strony, czyli elementu body, oraz przypisania mu pewnych ogólnych właściwości, które zostaną odziedziczone przez wszystkie pozostałe elementy.
Stylizacja elementu body
Kiedy spojrzymy na zrzut ekranu naszej strony, to zauważymy, że jest wyśrodkowana w poziomie w oknie przeglądarki, ma określoną szerokość oraz ma szare, dość grube, obramowanie.
Wszystkie te ustawienia zostały zdefiniowane w regule CSS dotyczącej elementu body.
Aby element można było wyśrodkować w poziomie, musi on spełniać dwa warunki. Po pierwsze musi być blokowy (element body jest), a po drugie musi mieć określoną szerokość (tym ustawieniem się teraz zajmiemy).
Ustawianie szerokości elementu
Kwestia ustawienia szerokości strony internetowej jest bardzo ważna, ponieważ mogą ją oglądać zarówno osoby korzystające z dużych monitorów, jak i użytkowniczki posługujące się iPhone’ami.
Jeśli ustawimy zbyt dużą szerokość, to strona może będzie dobrze się prezentować na dużych monitorach, ale będzie wyglądać fatalnie na telefonach komórkowych.
Z drugiej strony, jeśli zdefiniujemy bardzo wąską stronę, to będzie ona ładnie się prezentowała na telefonach, ale będzie fatalnie wyglądała na szerokim ekranie monitora.
Rozwiązaniem tego problemu są tzw. techniki projektowania responsywnych stron internetowych, czyli takich, które zmieniają układ, rozmiar, rozmieszczenie elementów i inne cechy w zależności od rozmiaru ekranu, na jakim są oglądane.
My zaczniemy pracę od stworzenia wersji dla szerokich monitorów, a kiedy już ją ukończymy, dostosujemy ją za pomocą tzw. zapytań o media CSS także do innych urządzeń.
W związku z tym na razie ustawiamy maksymalną szerokość elementu body na 1200 pikseli oraz dodajemy szare obramowanie o grubości 6 pikseli.
body {
max-width: 1200px;
border: 6px solid #eaeaea;
}Dzięki zdefiniowaniu maksymalnej szerokości mamy pewność, że strona nie rozciągnie się na całą szerokość ekranu nawet na bardzo dużych monitorach, przez co wyglądałaby niezbyt atrakcyjnie.
Gdybyśmy jednak teraz zmierzyli szerokość naszej strony, okazałoby się, że wynosi ona 1212 pikseli, a nie 1200 pikseli. Jest to spowodowane tym, że przeglądarka dodałaby do 1200 po 6 pikseli obramowania z każdej strony. Odpowiada za to tzw. model polowy CSS (znany też pod nazwą model pudełkowy CSS) – ang. box model.
Model polowy CSS
W opisywanym przypadku zwiększenie szerokości elementu przez obramowanie nie sprawiałoby nam wielkiego problemu, ponieważ zawsze moglibyśmy zmniejszyć wartość własności max-width, aby uzyskać pożądaną sumaryczną szerokość i byłoby po kłopocie.
Wyobraź sobie jednak, że musisz wykonywać takie obliczenia dla wszystkich elementów, którym określasz szerokość na swoich stronach. Mogłoby to być bardzo uciążliwe. Dlatego warto wiedzieć, czym jest model polowy CSS i jak go okiełznać, aby tańczył tak, jak mu zagramy.
Znasz już pojęcia elementów blokowych (ang. block-level element) i elementów śródliniowych (ang. inline element). Mówiąc w uproszczeniu, elementy blokowe dodają złamanie wiersza oraz obsługują w pełni ustawienia marginesów, dopełnienia, obramowania, szerokości i wysokości.
Natomiast elementy śródliniowe nie dodają złamania wiersza, nie obsługują ustawień szerokości i wysokości oraz obsługują dopełnienie, marginesy i obramowanie tylko w taki sposób, że górne i dolne ustawienia tych własności nie powodują odsunięcia elementów znajdujących się powyżej lub poniżej.
Model polowy CSS określa, w jaki sposób są traktowane obramowanie i dopełnienie przy obliczaniu ich szerokości i wysokości.
W CSS każdy element tworzy na stronie tzw. pole (ang. box) składające się z treści (ang. content box), dopełnienia (ang. padding box), obramowania (ang. border box) i marginesu (ang. margin box), jak na poniższej ilustracji.
W standardowym modelu polowym (ang. standard box model) całkowita szerokość pola elementu składa się z szerokości pola treści, lewego i prawego pola dopełnienia oraz lewego i prawego pola obramowania. Natomiast całkowita wysokość elementu składa się z wysokości pola treści, górnego i dolnego pola dopełnienia oraz górnego i dolnego pola obramowania. Na przykład:
div {
height: 200px;
width: 600px;
margin: 20px;
padding: 15px;
border: 10px solid black;
}Temu elementowi div ustawiliśmy wysokość na 200 pikseli i szerokość na 600 pikseli, ale jego rzeczywiste wymiary w standardowym modelu polowym będą inne.
Wysokość tego elementu div wyniesie: 200 (własność height) + 15 (dopełnienie górne) +15 (dopełnienie dolne) + 10 (górna krawędź obramowania) + 10 (dolna krawędź obramowania) = 250 pikseli.
Szerokość tego elementu div wyniesie: 600 (własność width) + 15 (dopełnienie lewe) +15 (dopełnienie prawe) + 10 (lewa krawędź obramowania) + 10 (prawa krawędź obramowania) = 650 pikseli.
Krótko mówiąc, czasami można się zdziwić, ponieważ mimo ustawienia konkretnej wysokości i szerokości otrzymujemy element o innych wymiarach.
Dlatego stworzono także alternatywny model polowy (ang. alternative box model), w którym szerokość i wysokość dopełnienia i obramowania są wliczane w szerokość i wysokość całkowitą elementu.
Do wyboru modelu polowego służy własność CSS box-sizing, która przyjmuje dwie wartości: content-box (domyślna, odpowiadająca modelowi standardowemu) i border-box (włączająca model alternatywny).
Powiedzmy, że do powyższej reguły CSS dodajemy deklarację box-sizing: border-box:
div {
box-sizing: border-box;
height: 200px;
width: 600px;
margin: 20px;
padding: 15px;
border: 10px solid black;
}Teraz elementy div na naszej stronie będą miały wysokość 200 pikseli i szerokość 600 pikseli bez względu na ustawienie obramowania i dopełnienia. Ich zmiana będzie po prostu powodowała modyfikację rozmiaru treści.
Przy obecnych ustawieniach na treść zostaje nam: 130 (200 − 20 − 20 − 15 − 15) pikseli wysokości i 530 (600 − 20 − 20 − 15 − 15) pikseli szerokości.
Gdybyśmy zmienili szerokość dopełnienia na 10 pikseli, a szerokość obramowania na 5 pikseli, to na treść zostawałoby nam: 170 pikseli wysokości i 570 pikseli szerokości. Całkowita wysokość i szerokość elementu nadal jednak wynosiłaby 200 i 600 pikseli.
Większość projektantów stron internetowych woli pracować z alternatywnym modelem polowym, ponieważ jest bardziej intuicyjny i uwalnia ich od konieczności wykonywania obliczeń.
My też będziemy korzystać z alternatywnego modelu polowego i ustawimy go dla wszystkich elementów w naszej witrynie. Do wszystkich elementów pozwala odnieść się selektor uniwersalny *, więc użyjemy go w następujący sposób:
* {
box-sizing: border-box;
}Od tej pory wszystkie elementy blokowe w naszej witrynie będą „działały” w trybie alternatywnego modelu polowego. Podsumujemy napisane do tej pory arkusze stylów:
* {
box-sizing: border-box;
}
body {
max-width: 1200px;
border: 6px solid #eaeaea;
}Zostało nam jeszcze kilka ustawień „kosmetycznych”, nad którymi nie będziemy się już zbytnio rozwodzić. Powiedzmy, że oprócz omówionych kwestii dostaliśmy od zespołu projektowego następujące wytyczne dotyczące elementu body:
- górny margines ma mieć 20 pikseli
- dolny margines ma wynosić 0
- strona ma być wyśrodkowana
- dopełnienie: 20 pikseli z lewej i prawej oraz 30 pikseli na górze i na dole
- obramowanie: 6 pikseli, jednolite w kolorze
eaeaea - kolor tekstu:
646363 - czcionka: Poppins (trzeba dołączyć do stron za pomocą elementu
linkz serwisu Google Fonts) - wysokość wiersza ma wynosić 1.5
Poniżej znajduje się arkusz stylów spełniający wszystkie opisane wymagania naszych projektantów:
* {
box-sizing: border-box;
}
body {
box-sizing: border-box;
max-width: 1200px;
margin: 20px auto 0 auto;
padding: 20px 30px;
border: 6px solid #eaeaea;
color: #646363;
font-family: Poppins, sans-serif;
line-height: 1.5;
}Font Poppins dołączamy do każdej strony za pomocą poniższego elementu link:
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">Ustawienia własności font-family są dziedziczone, więc wystarczy zdefiniować odpowiedni krój pisma dla elementu body, aby został zastosowany we wszystkich elementach na stronie.
Teraz nasza strona wygląda tak:
Już jest lepiej, ale nadal mamy sporo do zrobienia. Teraz zajmiemy się nagłówkiem strony.
Stylizacja nagłówka strony – header
Nasz nagłówek dzieli się na dwie główne części. Pierwsza zawiera nazwę witryny i podtytuł, a druga zawiera nawigację.
Jeśli chodzi o nazwę witryny i podtytuł, to wymagania naszych projektantów są proste:
- tekst całego elementu nagłówka strony ma być wyrównany do środka
- rozmiar tekstu nagłówka ma wynosić 32 piksele
- podtytuł ma znajdować się blisko tytułu i ma mieć pismo pochylone
Poniżej znajdują się reguły CSS, które realizują te założenia. Zastosowaliśmy w nich selektor identyfikatora #main-header, ponieważ element header może występować w kilku miejscach na stronie, a my w tym przypadku chcemy odnieść się tylko do jego konkretnego egzemplarza, który będzie umieszczony w niezmienionej formie na każdej stronie naszej witryny. Spójrz na poniższy kod:
#main-header {text-align: center;}
#main-header h1 {font-size: 2rem}
#main-header hgroup p {margin-top: 0; font-style: italic;}Praktycznie wszystko tutaj jest Ci już dobrze znane… może z wyjątkiem jednostki rem, która została użyta do ustawienia rozmiaru pisma elementu h1.
Jednostka rem odnosi się do rozmiaru pisma elementu głównego, czyli html. Zazwyczaj wynosi ono 16 pikseli, więc jeśli chcemy uzyskać 32-pilselowy rozmiar pisma, możemy napisać 2rem. Jeśli jednak chcesz mieć absolutną pewność, że otrzymasz dokładnie taką wartość (gdyby jakaś przeglądarka miała inne ustawienie domyślne), możesz ustawić rozmiar pisma elementu html na 16 pikseli: html {font-size: 16px;}.
A po co w ogóle bawić się w jakieś obliczenia, skoro można po prostu napisać 32px? Użycie jednostki rem lub em (odnoszącej się do rozmiaru pisma elementu nadrzędnego, jakikolwiek jest) zwiększa elastyczność strony i ułatwia zmianę wszystkich ustawień na raz. Kiedy np. zmienimy rozmiar pisma elementu html na 14 pikseli, to automatycznie zostaną pomniejszone wszystkie pozostałe wartości innych elementów.
Teraz przyjrzymy się wymaganiom projektowym dotyczącym nawigacji:
- od dołu i od góry nawigację ma zdobić jednopikselowa linia ciągła o kolorze
dddddd. - marginesy górny i dolny mają mieć wartość 40 pikseli, a marginesy lewy i prawy – 0
- dopełnienie z wszystkich stron ma wynosić 15 pikseli
Napisanie reguły spełniającej te wymagania to dla nas błahostka:
#main-header nav {
border-top: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
margin: 40px 0;
padding: 15px;
}Ta reguła dotyczy samego elementu nav, ale może pamiętasz z rozdziału Struktura strony HTML5, że do budowy nawigacji zwyczajowo używa się list nieuporządkowanych. Wtedy jeszcze nie umieliśmy ich tworzyć, dlatego zostawiliśmy to na później. Teraz już możemy dokończyć budowę naszej nawigacji od strony konstrukcyjnej:
<nav>
<ul>
<li><a href="index.html">Główna</a></li>
<li><a href="erdos.html">Paul Erdős</a></li>
<li><a href="feynman.html">Richard Feynman</a></li>
<li><a href="why-the-lucky-stiff.html">why the lucky stiff</a></li>
</ul>
</nav>Wklej ten kod w miejsce obecnej nawigacji i sprawdź, jak teraz wygląda strona (oczywiście wklej też do arkusza stylów wszystkie napisane do tej pory reguły CSS). Część nagłówkowa powinna wyglądać tak:
Dodanie listy nieuporządkowanej spowodowało pojawienie się punktorów oraz ułożenie elementów menu jeden nad drugim (nic w tym dziwnego, ponieważ są to elementy blokowe). Za pomocą odpowiednich reguł CSS bez problemu pozbędziemy się tych problemów:
#main-header nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#main-header nav ul li {
display: inline-block;
margin: 0 15px;
}Najpierw wyłączyliśmy punktory elementów listy, a następnie zlikwidowaliśmy wszelkie odstępy dodawane przez element ul.
Następnie za pomocą własności display zmieniliśmy charakterystykę zachowania elementów li znajdujących się w nawigacji na tzw. bloki śródliniowe (inline-block).
Za pomocą własności CSS display można wybrać, czy dany element ma mieć właściwości elementu blokowego (wartość block), śródliniowego (wartość inline), bloku śródliniowego (wartość inline-block), elementu listy (wartość list-item), a nawet można sprawić, aby w ogóle nie był uwzględniany wśród elementów pokazywanych na stronie (wartość none). Tych ustawień jest dużo więcej, ale w tej chwili nie wszystkie nas interesują.
Warto natomiast wiedzieć, że o tym, czy domyślnie element jest blokowy (np. p, div, li), czy śródliniowy (np. abbr, em, del, strong), decydują standardowe arkusze stylów przeglądarek, których ustawienia możemy dowolnie zmieniać za pomocą własnych reguł CSS.
W związku z tym każdy element blokowy możemy zamienić na śródliniowy za pomocą deklaracji display: inline, każdy element śródliniowy możemy zamienić na blokowy za pomocą deklaracji display: block, dowolny element możemy zamienić na element listy za pomocą deklaracji display: list-item itd.
W przykładzie użyliśmy wartości inline-block. Dzięki temu elementy listy reprezentującej nasze menu będą zachowywały się, jak elementy śródliniowe, tzn. nie będą tworzyły złamania wiersza, a jednocześnie będą obsługiwały wszystkie ustawienia marginesów, szerokości itd., jak elementy blokowe.
Dodatkowo do elementów li zastosowaliśmy 15-pikselowy margines lewy i prawy, aby odpowiednio rozstawić poszczególne elementy menu.
Nagłówkowa część naszej strony nabrała już rumieńców:
Łącza są fioletowe, ponieważ takie jest domyślne ustawienie przeglądarki dla odwiedzonych linków. Niedługo zmienimy je na coś bardziej pasującego do naszej witryny. Teraz jednak przechodzimy do części głównej, czyli elementu main.
Stylizacja treści głównej – main
Treść właściwa naszej strony głównej jest prosta i wymaga zajęcia się tylko dwiema sprawami – odpowiednim ustawieniem grafiki względem tekstu oraz zwężeniem obszaru, aby nie rozchodził się zbyt szeroko, co nieatrakcyjnie wygląda.
Najprostszym sposobem na umieszczenie obrazu po lewej stronie tekstu jest użycie znanej nam już własności CSS o nazwie float. Za jej pomocą można sprawić, aby wybrany element, np. obraz, przesunął się na lewą (wartość left) lub prawą (wartość right) stronę sąsiedniej treści.
My przesuniemy nasz obraz na lewą stronę. Ponadto nadamy mu 20-pikselowy margines górny, prawy i dolny, aby odsunąć od niego opływający go tekst, oraz zlikwidujemy lewy, aby element przylegał do krawędzi swojego kontenera.
.featured {
float: left;
margin: 20px 20px 20px 0;
}Zwróć też uwagę, że obrazowi przypisaliśmy klasę featured. Dzięki temu możemy odnosić się tylko do „promocyjnego” obrazu na stronie głównej – na podstronach też będziemy używać obrazów i nie zawsze będziemy chcieli stosować do nich takie same ustawienia.
Jeśli chodzi o zwężenie treści elementu main, to zastosujemy proste dopełnienie:
#home main {
padding: 0 90px
}Tutaj użyliśmy dodatkowo identyfikatora home, aby zaznaczyć, że to ustawienie dotyczy tylko elementu main na stronie głównej. Na podstronach będzie on inaczej sformatowany.
Strona coraz bardziej zaczyna przypominać to, o co nam chodziło. Spójrz na poniższy zrzut ekranu:
Pozostały nam jeszcze dwie sprawy: stylizacja stopki i linków.
Stylizacja stopki – footer
Oto wymagania naszych projektantów odnośnie do wyglądu samej stopki:
- ma być odsunięta od treści znajdującej się nad nią o 60 pikseli
- nad nią ma biec jednopikselowa jednolita linia w kolorze
ddddddodsunięta od treści na 20 pikseli - treść ma być wyśrodkowana
- odnośniki standardowo mają być podkreślone
- po najechaniu na odnośnik podkreślenie ma znikać
Z takimi wymaganiami poradzimy sobie błyskawicznie. Poniżej znajdują się odpowiednie reguły CSS:
#main-footer {
margin-top: 60px;
padding-top: 20px;
text-align: center;
border-top: 1px solid #dddddd;
}
#main-footer a {
text-decoration: underline;
}
#main-footer a:hover {
text-decoration: none;
}Ponadto otrzymaliśmy dodatkowe informacje na temat wyglądu odnośników dla całej witryny i dla nagłówka:
- odnośnik nieodwiedzony i odwiedzony – w całej witrynie kolor:
646363(w treści artykułów kolor odnośnika odwiedzonego będzie inny, zostanie podany później), podkreślenie: brak - odnośnik najechany kursorem – kolor granatowy (w treści artykułów będzie się pojawiać podkreślenie)
Realizacja tych wymagań jest bardzo prosta:
a {
color: #646363;
text-decoration: none;
}
#main-header a:visited {
color: #646363;
}
a:hover {
color: navy !important;
}W ten sposób ukończyliśmy prace nad naszą stroną główną. Posłuży nam ona jako punkt wyjścia do stworzenia szablonu podstrony, dzięki czemu do ukończenia stylizacji całej witryny pozostaje nam już niewiele pracy.
Poniżej znajduje się kompletny arkusz stylów utworzony w tym rozdziale.
* {
box-sizing: border-box;
}
html {
font-size: 16px;
}
body {
max-width: 1200px;
margin: 20px auto 0 auto;
padding: 20px 30px;
border: 6px solid #eaeaea;
color: #646363;
font-family: Poppins, sans-serif;
line-height: 1.5;
}
#main-header {
text-align: center;
}
#main-header h1 {
font-size: 2rem;
}
#main-header hgroup p {
margin-top: 0;
font-style: italic;
}
#main-header nav {
border-top: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
margin: 40px 0;
padding: 15px;
}
#main-header nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#main-header nav ul li {
display: inline-block;
margin: 0 15px;
}
#home main {
padding: 0 90px;
}
.featured {
float: left;
margin: 20px 20px 20px 0;
}
#main-footer {
margin-top: 60px;
padding-top: 20px;
text-align: center;
border-top: 1px solid #dddddd;
}
#main-footer a {
text-decoration: underline;
}
#main-footer a:hover {
text-decoration: none;
}
a {
color: #646363;
text-decoration: none;
}
a:visited {
color: #646363;
}
a:hover {
color: navy;
}Menu główne to bardzo ważny element każdej witryny, więc warto mu poświęcić odrobinę więcej czasu niż niektórym innym elementom. Na wielu stronach w internecie można spotkać menu, które rozwijają się po najechaniu kursorem, ukazując zestaw opcji do wyboru.
W następnym rozdziale nauczysz się tworzyć właśnie takie menu za pomocą HTML i CSS i jak zwykle poznasz nową ciekawą własność CSS.
Podsumowanie
- Model polowy CSS określa wzajemne relacje między ustawieniami szerokości i wysokości elementów blokowych a ich dopełnieniem i obramowaniem.
- Wielu projektantów lubi ujednolicać model polowy wszystkich elementów na swoich stronach przez zastosowanie deklaracji
box-sizing: border-boxw parze z selektorem uniwersalnym*. - W standardowym modelu polowym obramowanie i dopełnienie nie wliczają się w szerokość elementów blokowych.
- W alternatywnym modelu polowym obramowanie i dopełnienie wliczają się w szerokość i wysokość elementów.
- Główne menu nawigacyjne zazwyczaj buduje się na bazie listy nieuporządkowanej.
- Własność CSS
displayumożliwia zmianę charakterystyki zachowania elementów na stronie.
Ćwiczenia
- Utwórz testowy plik HTML o dowolnej nazwie i napisz regułę CSS dla elementu
bodywg następujących wytycznych:- lewy margines: 20 pikseli
- prawy margines: 15 pikseli
- dolny margines: 20 pikseli
- górny margines: 30 pikseli
- dopełnienie: 15 pikseli z lewej i prawej oraz 20 pikseli u góry i u dołu
- obramowanie górne: 1 piksel, jednolite w kolorze zielonym
- obramowanie dolne: 2 piksele, kropkowane w kolorze
43dfab - obramowanie lewe: 3 piksele, kreskowane w kolorze fioletowym
- kolor tekstu: żółty
- czcionka: Roboto z Google Fonts
- wysokość wiersza: 1.75