diff --git a/examples/server/public_simplechat/simplechat.css b/examples/server/public_simplechat/simplechat.css
new file mode 100644
index 000000000..da6357973
--- /dev/null
+++ b/examples/server/public_simplechat/simplechat.css
@@ -0,0 +1,23 @@
+/**
+ * the styling of the simplechat web frontend
+ * by Humans for All
+ */
+
+ .heading {
+    background-color: lightgray;
+}
+.role-system {
+    background-color: lightblue;
+}
+.role-user {
+    background-color: lightgray;
+}
+.wideinput {
+    width: 90vw;
+}
+.float-right {
+    float: right;
+}
+* {
+    margin: 0.4vh;
+}
diff --git a/examples/server/public_simplechat/simplechat.html b/examples/server/public_simplechat/simplechat.html
index f755e6157..5d5118b21 100644
--- a/examples/server/public_simplechat/simplechat.html
+++ b/examples/server/public_simplechat/simplechat.html
@@ -5,26 +5,7 @@
         <meta name="description" content="SimpleChat: trigger LLM web service endpoints /chat/completions and /completions, also try chat" />
         <meta name="author" content="by Humans for All" />
         <script src="simplechat.js"></script>
-        <style>
-            .heading {
-                background-color: lightgray;
-            }
-            .role-system {
-                background-color: lightblue;
-            }
-            .role-user {
-                background-color: lightgray;
-            }
-            .wideinput {
-                width: 90vw;
-            }
-            .float-right {
-                float: right;
-            }
-            * {
-                margin: 0.4vh;
-            }
-        </style>
+        <link rel="stylesheet" href="simplechat.css" />
     </head>
     <body>
 
