Skip to content

Aufgabe CSS verstehen

In dieser Aufgabe sollst du ein Basis HTML anpassen um ein gewünschtes Resultat zu erreichen.

Ausgangslage, basis html

Es soll folgende html Datei als Ausgangslage verwendet werden:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>HTML - CSS Aufgabe IT-Berufsbildung Basis</title>
        <style>
        </style>
    </head>
    <!-- no changes behind this line :-) -->
    <body style="font-size: xx-large">
        <div id="b1">
            <ul>
                <li>roter text</li>
                <li class="activePage">red text</li>
                <li>roter text</li>
            </ul>
        </div>
        <div id="b2">
            <ul>
                <li>Grüner text</li>
                <li class="activePage">green text, pink hintergrund</li>
                <li>Grüner text</li>
            </ul>
            <span>
                        schwarzer text
                    </span>
            <div class="b2">
                <ul>
                    <li>Grüner text</li>
                    <li>Grüner text</li>
                    <li class="activePage">green text, pink hintergrund</li>
                </ul>
                <span>blauer Text</span>
            </div>
        </div>
        <div class=activePage>schwarzer Text, white Hintergrund</div>
    </body>
</html>

Ziel ist das folgende Resultat im Browser zu sehen:

bild

Folgende Bedingungen für die Aufgabe sind einzuhalten:

  • es dürfen keine Änderungen im html.body vorgenommen werden. Keine Erweiterungen etc. der html.body darf nicht verändert werden
  • änderungen dürfen nur im html.head.style vorgenommen werden
  • Farben dürfen nur einmalig im style definiert werden. also z.B. darf "color: red" z.B. nur einmal vorkommen
  • die zu verwendenden Farben sind jeeweils im html text als text aufgeführt
  • es braucht keinen css angaben für body in irgendeiner form für diese Lösung. Die Hintergrundfarbe des body ist ohne Angabe weiss
  • wir haben genau 4 Zeilen im style benötigt, und jede Zeile hat nur einen Eintrag in den { } klammern welche die Farbe setzt

Zeitbudget

15 minuten

viel Spass