move an example

jsnkuhn · Jun 9, 2021 · 647bfb4 · 647bfb4
1 parent 8b1ec34
commit 647bfb4
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 0 deletions.
diff --git a/alt-style-sheets/default.css b/alt-style-sheets/default.css
@@ -0,0 +1,16 @@
+p {
+	background-color: white;
+	color: black;
+	font-size: 14px;
+	font-style: normal;
+	font-weight: normal;
+	font-family: serif;
+}
+
+h1 {
+	text-shadow: 2px 2px 2px #747474;
+	text-align: center;
+	font-weight: bold;
+	font-size: 22px;
+	font-family: sans-serif;
+}
diff --git a/alt-style-sheets/fancy.css b/alt-style-sheets/fancy.css
@@ -0,0 +1,16 @@
+p {
+	border-style: groove;
+	border-width: 2px;
+	background-color: #8d0019;
+	color: #fcff00;
+	font-size: 14px;
+	font-family: Georgia, "Times New Roman", Times, serif;
+}
+
+h1 {
+	background-color: #000c6e;
+	color: #ff8100;
+	font-weight: bold;
+	font-size: 20px;
+	font-family: "Zapf Chancery", "Comic Sans MS", cursive;
+}
diff --git a/alt-style-sheets/index.html b/alt-style-sheets/index.html
@@ -0,0 +1,17 @@
+<html>
+<head>
+  <title>Alternate Style Sheets example</title>
+  <link href="default.css" rel="stylesheet" type="text/css" title="Default Style">
+  <link href="simple.css" rel="alternate stylesheet" type="text/css" title="Simple">
+  <link href="fancy.css" rel="alternate stylesheet" type="text/css" title="Fancy">
+</head>
+<body>
+    <h1>About alternative style sheets</h1>
+    <p>Firefox offers support for <em>alternative style sheets</em>.  Pages that provide alternative style sheets allow the user to select the style in which the page is displayed using the View>Page Style submenu.  This provides a way for users to see multiple versions of a page, based on their needs or preferences.</p>
+
+    <p>A web page can use the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link">&lt;link&gt;</a> element to add alternative style sheets to a document.</p>
+
+    <h1>Try it out!</h1>
+    <p>Go to the View>Page Style submenu and select a different style to watch this page's look change!</p>
+</body>
+</html>
diff --git a/alt-style-sheets/simple.css b/alt-style-sheets/simple.css
@@ -0,0 +1,10 @@
+p {
+	font-size: 12px;
+	font-family: sans-serif;
+}
+
+h1 {
+	font-weight: bold;
+	font-size: 16px;
+	font-family: sans-serif;
+}