Wybrane reguły CSS
Podane przykłady reguł regulujących wygląd strony to tylko proste przykłady mające pomóc w rozpoczęciu przygody ze stylowaniem stron. Nie wyczerpują tematu ani nie mają pokazywać optymalnych rozwiązań.
Zmiana koloru tła
Do prostej zmiany koloru tła wybranego elementu służy właściwość background-color. Jako jej wartość podajemy konkretny kolor, który od tej pory będzie kolorem tła. Poniższy przykład zmieni kolor całej strony na jasnoniebieski.
body{
background-color: lightblue;
}Zmiana koloru tekstu
Kolor tekstu dla wybranego elementu zmieniamy właściwością color. Jako jej wartość podajemy konkretny kolor, jaki mają mieć literki danego elementu. Poniższy kod zmieni kolor akapitów na fioletowy.
p{
color: purple;
}Wyśrodkowanie zawartości strony na ekranie
Po dodaniu do <body> cała zawartość strony będzie przyklejona do lewej strony ekranu. Dodatkowo rozleje się od lewej do prawej krawędzi.
Prostym sposobem na wyśrodkowanie strony i ograniczenie jej szerokości jest dodanie dwóch reguł:
- Pierwsza reguła: ograniczy szerokość strony do 800 pikseli (nie jest to idealne rozwiązanie, służy tylko pokazowi. Lepiej jest użyć jednostek względnych, jak
%czyvw). - Druga reguła: wyznaczy górny margines na 0 pikseli („przylepiając” stronę go góry okna przeglądarki), a pozostałe rozłoży po równo (zależnie od dostęnego miejsca na ekranie). Lewy i prawy margines będą równe – zawartość strony wyląduje na środku ekranu.
body{
max-width: 800px;
margin: 0 auto;
}