<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" type="text/css" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" />
		<title>Beispiel für alternative Stylesheets</title>
		<style title="seriös">
			html { font-family: serif; }
			.demo { display: inline-block; border: 1px solid #bbb; background: #ddd; padding: 1em;}
			.demo span::after { content: "'seriös'"; }
		</style>
		<style title="Fantasy">
			html { font-family: fantasy; }
			.demo { display: inline-block; border: 5px solid red; background: gold; padding: 1em;}
			.demo span::after { content: "»Fantasy«"; }
		</style>
	</head>
	<body>
		<h1>alternative Stylesheets</h1>
		<main>
			<h2>Beispiel für alternative Stylesheets</h2>
			<p class="demo">Sie verwenden den Stil <span></span>.</p>
			<p>
				Manche Browser bieten die Möglichkeit, alternative
				Stylesheets zu verwenden.
			</p>
			<p>
				Im Firefox etwa können Sie über den Menüpunkt
				<kbd>Ansicht/Webseitenstil</kbd>
				(Menüleiste muss aktiviert sein!)
				die verschiedenen Stylesheets auswählen.
			</p>
		</main>
	</body>
</html>