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
- Erstellen Sie eine CSS-Datei
styles.css
und verknüpfe sie die CSS-Datei mit der HTML-Datei. - Fügen Sie eine Regel hinzu, die bei den
<blockquote>
-Elementen mit der Klasecustom-quote
die Zitatzeichen „«“ und „»“ hinzufügt.