- Nyní obsah stránky zkusíme naformátovat, vycentrovat a obarvit. V mé představě to vypadá takto:

Přidejte do sekce <head> kaskádový styl:
<style>
.obsah {
max-width: 350px;
margin: auto;
background: white;
}
</style>
Třída obsah zajistí, že obsah sekce je uprostřed, má maximální šířku a bílý podklad. Poté přidejte tag <div> hned za <body> a ukončete před </body>. Mělo by to vypadat asi takto.
<body> <div class="obsah"> ....existující kód.... </div> </body>
- Nyní vytvořte styl pro body a vložte do něj oblíbenou barvu pozadí pomocí: background. Pokud si nevíte rady, podívejte se zde: https://www.w3schools.com/css/tryit.asp?filename=trycss_background-color_body
- Naformátujte odstavec <p> pomocí stylu tak, aby:
- text má větší velikost (font-size: large;)
- text je zarovnán do bloku (text-align: justify;)
- mezera kolem odstavce (padding: 10px;)
Styl s větším textem může vypadat např. takto:
p {
text-align: justify;
}
- Naformátujte odkazy jako tlačítka.
Ukázka formátování odkazu:
a:link, a:visited { color: white; padding: 20px 0px; text-align: center; text-decoration: none; display: inline-block; width: 350px; }
Zkuste u každé vlastnosi stylu zjistit, co dělá, případně si ji upravit podle svého vkusu.
Ukázka formátování odkazu po najetí myší:
a:hover, a:active { background-color: rgb(255, 0, 0); }
Jednotlivým tlačítku zkuste přidat třídu (class):
<a href="pravidla.html" class="pravidla">Pravidla</a>
Pro třídu poté můžete změnit např. barvu pozadí.
a.pravidla { background-color: rgb(55, 0, 255); }