Domyślny font Times New Roman jest fontem szeryfowym i będzie słabo wyglądać na większości stron. Prosta zmiana na font bezszeryfowy taki jak Lato znacznie poprawi wygląd strony. Więcej fontów możesz znaleźć na Google Fonts.
@import url('https://fonts.googleapis.com/css?family=Lato:300,400&subset=latin-ext');
body {
font-family: 'Lato', sans-serif;
}
Odstępy są jednym z najważniejszych elementów na stronie. Dobrze użyte mogą poprawić czytelność i dodać estetyki. Źle użyte mogą sprawić, że użytkownik bardzo szybko opuści wytrynę.
body {
line-height: 1.5;
}
h2 {
margin-top: 20px;
padding-top: 20px;
}
pre {
padding: 1em;
}
p {
margin: 10px 0;
}
section ul {
margin: 30px 0;
}
section li {
margin-top: 3px;
}
Strona wygląda już znacznie lepiej. Dodajmy teraz podstawowe kolory.
Kolory
Kolory są kolejnym bardzo istotnym elementem. Najważniejsza zasada: nie przesadzaj z kolorami. Jeśli jesteś początkujący to używaj 2-3 kolorów: ogólny kolor tekstu, kolor elementów klikalnych (np. linki) i kolor po najechaniu myszką na element klikalny (hover).
a {
color: #16a085;
}
p {
color: #545454;
}
h1, h2, li, strong {
color: #333333;
}
pre {
background-color: #efefef;
border-left: 3px solid #16a085;
}
Strona jest już prawie gotowa. Dodajmy teraz coś, bez czego nie obędzie się żadna strona. Dodajmy nawigację.
Nawigacja
Nawigacja wymaga większej ilości reguł niż poprzednie elementy. Po pierwsze ustawiamy rozmiary elementu nav. Następnie dodajemy style dla linków w menu.
nav {
width: 100%;
height: 60px;
line-height: 60px;
background-color: #16a085;
position: fixed;
}
nav div {
max-width: 1200px;
width: 80%;
margin: 0 auto;
}
nav ul li {
display: inline-block;
}
nav a {
color: #ffffff;
margin: 0 25px;
font-size: 18px;
text-decoration: none;
display: block;
opacity: .8;
}
nav a:hover {
color: #ffffff;
opacity: 1;
}
nav li:last-of-type a {
margin-right: 0;
}
nav li:first-of-type a {
margin-left: 0;
}