Obraz tła

background-color: kolor tła
background-image: obrazek tła, np. background-image: url('mojetlo.jpg')
background-repeat: powtarzanie (lub nie) obrazka gdy jest mniejszy niż całe tło
background-attachment: przytwierdzenie lub przewijanie obrazka wraz ze stroną
background-position: położenie obrazka tła w dwóch wymiarach

Zadanie 1.

Dodaj do strony o pociągach obrazek tła wzięty np. z tej strony, (skopiuj adres obrazka a nie obrazek).
Niech komórka tabeli, nad którą jest kursor myszki, ma inny kolor tła.
Niech nagłówek, w który się klika, ma czerwony kolor czcionki.

Układ strony

Na żywo w trakcie zajęć, później zostanie to tu uzupełnione...

Nie używamy tabel do ustalenia układu strony!

Styl dla wydruku

Warto zdefiniować specjalny arkusz stylu dla wydruku i podać w nim odpowiedni krój i rozmiar czcionki (zwykle domyślnie przeglądarki drukują zbyt dużą czcionką), ukryć niepotrzebne na wydruku elementy (gdy drukujemy artykuł z gazety po co nam panel z listą innych artykułów i ich streszczeń?).

Definiując styl dla wydruku można wymusić odpowiedni podział stron, np. podział przez każdym nagłówkiem h1, nie dzielenie elementów listy czy tabel...

Przykład 1. Dołączenie osobnego arkusza stylu specjalnie dla wydruku

<link rel="stylesheet" type="text/css" href="normalny.css">
<link rel="stylesheet" type="text/css" media="print" href="wydruk.css">

Przykład 2. Wspólny arkusz stylu z wydzielonymi fragmentami dla różnych mediów

body {
  padding: 3pt;
}

@media screen {
  body {
    font-family: sans-serif;
  }
}
@media print {
  body {
    font-family: serif;
  }
}