⭐Task-App mit CSS

In diesem Arbeitsblatt setzt du auf dem Ergebnis aus Arbeitsblatt: HTML (Todo-App) ⭐ 📹 auf und wendest einfaches CSS an, um die App ansprechender zu gestalten.

CSS für ein besseres Styling der App

Bisher sieht die To-do-Liste nicht sehr ansprechend aus. Das ändern wir jetzt!

• Setze die Schriftart für die gesamte App auf "Roboto". Setze außerdem die Schriftfarbe auf den Wert #262626 (dunkelgrau).

• Statte die Todos in der Liste mit einer abgerundeten Ecke aus. Gib den Todos eine Hintergrundfarbe, wie z.B. #B3D2B2 mit einer Deckkraft von 60%. Stelle nun noch sicher, dass die Innen- und Außenabstände so eingestellt sind, dass genug Raum zwischen den einzelnen Todo-Items existiert. Zuletzt gib bitte jedem Todo eine feste Breite von 300 Pixel.

• Entferne die Bullets vor den Todos (list-style: none) sowie die Einrückung der Items (padding-left).

• Während wir mit der Maus über ein Todo-Item fahren soll sich der Hintergrund des Todos ändern: Ändere die Deckkraft auf 100%. Sobald wir das Todo mit der Maus wieder verlassen soll es wieder auf 60% gesetzt werden.

• Ändere das Aussehen des Mauszeigers wenn du mit der Maus über ein Todo fährst. Dieser soll dann zu einem Pointer werden (cursor: pointer).

Gib zum Schluss auch den beiden Buttons abgerundete Ecken und passe die Abstände so an, dass es ansehnlich wird.

So könnte das Ergebnis nach Anwendung von CSS aussehen:

So könnte das Ergebnis mit CSS aussehen.

Videos

Als Inspiration und falls du nicht weiter kommst, gibt es zu diesem Arbeitsblatt das unten stehende Video. Das Video ist bereits etwas älter und die Entwicklung geschieht hier noch in CodePen.