LU02.A03 - Pseudo-Elemente

Ausgangslage

Erstellen Sie eine Datei index.html mit folgendem Inhalt: 

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pseudo-Klassen Übung</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Ein Text über Lorem Ipsum</h1>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    <blockquote class="custom-quote">Every programmer is an author.</quote>
</body>
</html>

Aufgabenstellung

  1. Erstellen Sie eine CSS-Datei styles.css und verknüpfe sie die CSS-Datei mit der HTML-Datei.
  2. Fügen Sie eine Regel hinzu, die bei den <blockquote>-Elementen mit der Klase custom-quote die Zitatzeichen „«“ und „»“ hinzufügt.