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:SELFHTML-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>
Selektoren in CSS - 3
Achtung, Das ist ein Warnhinweis (in einem <p-Element).
Dieser Absatz erhält die Klasse .example.
Noch eine Warnung!
Ein Satz in einem Absatz - ganz ohne Klassen!
Ein Warnhinweis in einem <div>, nicht im <p>-Element.
- Setze Klassen nur sparsam ein.
- Benenne Klassen nach ihrer Funktion, nicht nach ihrem Aussehen.
- Achte auf hohe Kontraste!
</body> </html>
