Untitled

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Szymon Jankowski</title>
    <!--<link rel="stylesheet" href="style2.css" type="text/css">-->
    <style>
        /*background-color: #00ffff ; - dla <div>...</div>
        color: #000080 ; - dla <h1>...</h1>
        text-align: center; - dla <h1>...</h1>
        color: #ffff00 ; - <i>...</i>*/

        div {
            background-color: #00ffff;
        }

        h1 {
            color: #000080;
            text-align: center;
        }

        i {
            color: #ffff00;
        }

        /*link - background-color: #000080 ; color: #00ffff ;
        visited - background-color: #00ffff ; color: #000080 ;
        hover - background-color: #ff0000 ; color: #ffff00 ; font-size: x-large;
        font-style: italic;
        active - background-color: #000000 ; color: #ffffff ;*/

        a:link {
            background-color: #000080;
            color: #00ffff;
        }

        a:visited {
            background-color: #00ffff ; color: #000080 ;
        }

        a:hover {
            background-color: #ff0000 ; color: #ffff00 ; font-size: x-large;
            font-style: italic;
        }

        a:active {
            background-color: #000000 ; color: #ffffff
        }

        .header-1 {
            text-align: center;
            background-color: #c0c0c0;
        }

        .header-2 {
            text-align: center;
            background-color: #ffff99;
        }

        .header-3 {
            text-align: right;
            background-color: #800000;
        }

        .header-4 {
            text-align: left;
            background-color: #ff99ff;
        }

        .text-1 {
            color: #00ff00;
        }

        .text-2 {
            color: #00ffff;
        }

        .text-3 {
            color: #808000;
        }

        .text-4 {
            color: #0000ff;
        }

        .liczebnik-1 {
            color: #ff0000;
        }

        .liczebnik-2 {
            color: #008000;
        }

        .liczebnik-3 {
            color: #008080;
        }

        .liczebnik-4 {
            color: #800080;
        }
    </style>
</head>

<body>
<h1 class="header-1"><span class="text-1">1. To jest tytuł <i class="liczebnik-1">pierwszego</i> stopnia</span></h1>
<h2 class="header-2"><span class="text-2">2. To jest tytuł <i class="liczebnik-2">drugiego</i>  stopnia</span></h2>
<h3 class="header-3"><span class="text-3">3. To jest tytuł <i class="liczebnik-3">trzeciego</i>  stopnia</span></h3>
<h4 class="header-4"><span class="text-4">4. To jest tytuł <i class="liczebnik-4">czwartego</i>  stopnia</span></h4>
<div>
    <h1><span>5. To jest tytuł <i>pierwszego</i> stopnia</span></h1>
</div>
<h1 class="header-4"><span class="text-1">6. To jest tytuł <i class="liczebnik-1">pierwszego</i>  stopnia</span></h1>
<h2 class="header-3"><span class="text-2">7. To jest tytuł <i class="liczebnik-2">drugiego</i>  stopnia</span></h2>
<h3 class="header-2"><span class="text-3">8. To jest tytuł <i class="liczebnik-3">trzeciego</i>  stopnia</span></h3>
<h4 class="header-1"><span class="text-4">9. To jest tytuł <i class="liczebnik-4">czwartego</i>  stopnia</span></h4>

<ol type="1">
<li> punkt 1</li>
    <ol type="1">
    <li class="liczebnik-2"> podpunkt 2.1</li>
    <li class="liczebnik-2">podpunkt 2.2</li>
    </ol>
<li> punkt 3</li>
</ol>
Łacze z zadeklarowanymi czterema pseudoklasami <a href="http://google.pl">www.google.pl</a>

</body>
</html>