LU12.L03 - Universal-Selektor anwenden

<!doctype html>
<html lang='de'>
<head>
  <title>Universalselektor</title>
  <meta charset='UTF-8'>
  <link rel='stylesheet' type='text/css' href='css/style.css'>
</head>
<body>
<header>Kopfzeile</header>
<nav><a href='#'>Nav1</a> | <a href='#'>Nav2</a> |<a href='#'>Nav3</a>
</nav>
<main>
  <h1>Universalselektor</h1>
  <p>Ein einfacher Absatztext.</p>
  <p>Ein zweiter Absatztext</p>
</main>
<footer>
  <p>Fusszeile 1</p>
  <p>Fusszeile 2</p>
  <p>Fusszeile 3</p>
</footer>
</body>
</html>

style.css

* {
    margin: 5px;
    padding: 3px;
    border: 1px dotted black;
    text-align: center;
    font-family: 'Futura', sans-serif;
}
 
header, footer {
    background-color: cornflowerblue;
}
 
main * {
    background-color: lawngreen;
}
 
nav {
    background-color: gold;
}
 
nav a {
    background-color: orangered;
}

Ich habe font-family: 'Futura', sans-serif; zur universellen Selektion hinzugefügt, um alle Texte in der Schriftfamilie Futura anzuzeigen.
Ich habe header, footer { background-color: cornflowerblue; } hinzugefügt, um die Hintergrundfarbe von header und footer auf cornflowerblue zu setzen.
Ich habe main * { background-color: lawngreen; } hinzugefügt, um die Hintergrundfarbe aller Elemente in <main> auf lawngreen zu setzen.
nav { background-color: gold; } setzt die Hintergrundfarbe des gesamten <nav> Elements auf gold.
nav a { background-color: orangered; } setzt die Hintergrundfarbe aller Links innerhalb von <nav> auf orangered.

m293-LU12

Daniel Garavaldi, Kevin Maurizi

LU12.L03 - Universal-Selektor anwenden

Änderungen

BZZ - Modulwiki - BiVo21