W pliku CSS - kaskadowe arkusze stylów, zdefiniujemy wygląd poszczególnych elementów strony w odniesieniu do kodu HTML, który już mamy. Określimy w nim m.in. tło, rodzaj czcionki, jej wielkość, kolor itd.
Do przygotowania takiego dokumentu wystarczy dowolny edytor tekstowy np. notatnik.
Zaczynamy od zdeklarowania kodowania znaków:
@charset "utf-8";
/* CSS Document */Teraz przygotujemy kolejne linie kodu, które będą odpowiadać za ogólne ustawienia strony.
/* reset marginesów i dopełnień */
html, body, ul, li { margin: 0; padding: 0; }
/* reset wysokości linii i fontu */
h1, h2, h3, h4, ul, li, ol, p { margin:0; padding:0; font-size: 1em;
line-height: 1.6em; }
/* ustawienia ogólne */
body { background: #ffffff;
font: 0.625em/1.5em arial, tahoma, verdana, sans-serif; }Decydując się na określony rozmiar strony musimy zadbać o możliwie wygodne przeglądanie i wyświetlanie jej zawartości w zależności od urządzenia. W naszym projekcie zastosujemy jedną z najczęściej występujących szerokości 980px. Dodatkowo wyśrodkujemy naszą stronę - w tym celu ustalimy marginesy na 0 (góra i dół) oraz auto (lewy i prawy).
/* szerokość strony */
.content { width: 980px; margin: 0 auto; overflow: hidden; }Pamiętajmy, aby zachować odpowiednią proporcję pomiędzy wyglądem a czytelnością. Najlepiej czyta się ciemny tekst na jasnym tle.
p, a, li { color: #304055; font-size: 1.4em;
font-family: arial, tahoma, verdana, sans-serif; }W powyższym zapisie zdefiniowałem wygląd czcionki dla nagłówków - p, linków - a, listy - li. Użyłem koloru oznaczonego kodem HEX. Dla ułatwienia kolory możemy zapisywać również w ich angielskim znaczeniu.
<p style="color: blue">tekst</p>tekst
W powyższym przykładzie widzimy, że również w samym kodzie HTML możemy nadawać indywidualne formatowanie poszczególnym znacznikom.
/* header */
header { position: relative; background: #f9f9f9;
border-bottom: 3px solid #e90000; }
header .content { overflow: hidden; text-align: center;Dla bloku header jako nadrzędnego względem pozostałych znajdujących się w nim ustawiamy pozycjonowanie relatywne.
position: relative;Następnie ustalamy kolor tła, w naszym przypadku będzie to kolor szary.
background: #f9f9f9;U dołu na całej szerokości sekcji header wstawimy obramowanie w kolorze czerwonym.
border-bottom: 3px solid #e90000;Wewnątrz bloku header znajduje się kolejny blok z klasą content, w którym umieścimy właściwą zawartość naszej strony. U góry arkusza stylów zdefiniowaliśmy szerokość dla content na 980px. Będzie ona identyczna w przypadku pozostałych bloków głównych - main oraz footer.
Dodatkowo zawartość tego bloku wyśrodkujemy.
text-align: center;Wewnątrz header-a mamy logo oraz menu. Zacznijmy od nadania stylu dla logo.
header h1 { position: relative; }
header h1 a { display: block; padding: 10px; margin-top: 10px;
font-size: 3.45em; outline: none; clear: both;
text-transform: uppercase; text-decoration: none; }Logo to kluczowy element naszej strony, dlatego powinno się odpowiednio go wyróżnić. W naszym przypadku pożądany efekt przyniesie zwiększenie rozmiaru czcionki.
font-size: 3.45em;Dodatkowo pojawiły się nam nowe wartości jak padding oraz margin. Padding zwiększa odległość wewnątrz danego bloku z kolei margin na zewnątrz.
W przykładzie mamy deklarację text-transform: uppercase która sprawi, że wszystkie litery logo będą duże.
Zajmijmy się teraz menu. Ustalamy deklaracje po kolei dla poszczególnych bloków.
header nav { clear: both; }
header nav ul { overflow: hidden; position: relative;
list-style: none; float: left; }
header nav ul li { float: left; }
header nav ul li a { display: block; padding: 17px 0px 9px 0px;
margin-right: 2px; width: 241px; height: 26px; text-align: center;
text-decoration: none; outline: none; background: #e0e0e0; }Ustawienie float (opływania) na left sprawi, że przyciski menu pojawią się po lewej stronie względem elementów sąsiadujących.
Dodanie poniższego kodu do dokumentu css spowoduje zmianę tła po najechaniu na dany przycisk kursorem myszki.
header nav ul li a:hover { background: #ffffff; }#main { position: relative; }
#main .content { margin-bottom: 25px; }Pierwszy od góry w centralnej części - main jest baner. Ścieżkę do zdjęcia podaliśmy w pliku HTML, natomiast teraz przygotujemy formatowanie dla bloku z klasą text poniżej banera.
#main .text { padding: 10px 80px 20px 80px; margin: 0px 0px 20px 0px;
background: #304055; border: 3px solid #202a38; }W tym boksie mamy nagłówek h3 oraz akapit p. Jest to główny element pierwszej strony mający zwrócić uwagę internautów, dlatego tekst wyróżnimy większą czcionką oraz nadamy nowy kolor.
#main .text h3 { color: #e0e0e0; font-weight: 100; font-size: 2.4em; }
#main .text p { color: #e0e0e0; }Poniżej bloku z klasą text są dwie sekcje. Jedna z klasą left, druga z klasą right. W każdej z nich znajduje się artykuł z nagłówkiem h2, akapitem p oraz linkiem a z klasą wiecej.
Teraz przygotujemy deklaracje odpowiedzialne za rozmieszczenie sekcji w odpowiednich miejscach na stronie.
#main .left { float: left; width: 48%; }
#main .right { float: right; width: 48%; }Ustawienie opływania (float) na left sprawi, że sekcja left znajdzie się po lewej stronie i analogicznie right po prawej. Dla każdej sekcji szerokość wynosi po 48%.
Przejdźmy do formatowania zawartości sekcji - artykułów.
#main section article { overflow: hidden; padding: 20px;
background: #ffffff; border: 1px solid #e0e0e0; }Zostało nam jeszcze przypisanie stylu dla nagłówka i linka.
#main h2 { margin-bottom: 10px; color: #e90000; font-size: 18px;
padding: 5px; border: 1px solid #e0e0e0; background: #ffffff;
#main article a.wiecej { margin-top: 10px; font-weight: bold;
float: right; }
#main article a:hover { text-decoration: none; }Na podstronach są nowe elementy - nagłówek h4 i lista li, dla których przygotujemy styl.
#main h4 { margin-bottom: 30px; color: #304055; font-size: 1.8em; }
#main ul { float: left; margin: 13px 0px 12px 15px; }
#main ul li { text-align: left; padding-left: 10px; }Ostatni blok to stopka - footer.
footer { position: relative; }Przechodizmy do elementów listy z danymi kontaktowymi.
footer ul { overflow: hidden; margin: 0px 0px 35px 0px; clear: both;
list-style: none; background: #f5f5f5; border: 1px solid #e0e0e0; }
footer ul li { float: left; padding: 17px 20px 15px 20px; width: 29%;
text-align: center; }Dla środkowego elementu listy dodaliśmy klasę center. Dzięki temu będziemy mogli dodać obramowanie tylko dla tego elementu.
footer ul li.center { border-left: 1px solid #e0e0e0;
border-right: 1px solid #e0e0e0; }Poniższy przykład sprawi, że zawartość copyrights zostanie wyśrodkowana.
text-align: center;Tak przygotowany plik css zapisujemy w głównym katalogu strony jako styl.css.
Mając już opracowane formatowanie strony efekt naszych prac możemy podejrzeć w oknie przeglądarki. Na kolejej lekcji dowiesz się jak wybrać domenę i serwer oraz opublikować stronę w Internecie.