Beispiel:CSS-Selektor-2.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen" href="./Beispiel:Grundlayout.css">
<title>Klassen- und ID-Selektor</title>
<style>
#main-header {
font-size: 1.8rem;
color: navy;
background-color: skyblue;
padding: 1em;
border: thin solid;
}
.warning {
background-color: #ffe0e0;
border-left: thick solid #c82f04;
padding: 0.5em;
margin-bottom: 1em;
}
.example {
background-color: #f9eed2;
border-left: thick solid gold;
padding: 0.5em;
margin-bottom: 1em;
}
</style>
</head>
<body>
<h1 id="main-header">Selektoren in CSS - 3</h1>
<p class="warning">Achtung, Das ist ein Warnhinweis (in einem <code><p</code>-Element).</p>
<p class="example">Dieser Absatz erhält die Klasse <code>.example</code>.</p>
<p class="warning">Noch eine Warnung!</p>
<p>Ein Satz in einem Absatz - ganz ohne Klassen!</p>
<div class="warning">
<h2>Ein Warnhinweis in einem <code><div></code>, nicht im <code><p></code>-Element.</h2>
<ol>
<li>Setze Klassen nur sparsam ein.</li>
<li>Benenne Klassen nach ihrer Funktion, nicht nach ihrem Aussehen.</li>
<li>Achte auf hohe Kontraste!</li>
</ol>
</div>
</body>
</html>
