diff --git a/packages/html/stories/MenuStyle.stories.ts b/packages/html/stories/MenuStyle.stories.ts
index 9e2dd301b3..8548705bd6 100644
--- a/packages/html/stories/MenuStyle.stories.ts
+++ b/packages/html/stories/MenuStyle.stories.ts
@@ -47,46 +47,8 @@ import { globalTypes, globalValues } from './shared/args.js';
 import { configureImagesBasePath, createGraphContainer } from './shared/configure.js';
 // style required by RubberBand and MaxPopupMenu
 import '@maxgraph/core/css/common.css';
-
-// Use custom CSS for the popup menu
-const CSS_TEMPLATE = `
-body div.mxPopupMenu {
-  -webkit-box-shadow: 3px 3px 6px #C0C0C0;
-  -moz-box-shadow: 3px 3px 6px #C0C0C0;
-  box-shadow: 3px 3px 6px #C0C0C0;
-  background: white;
-  position: absolute;
-  border: 3px solid #e7e7e7;
-  padding: 3px;
-}
-body table.mxPopupMenu {
-  border-collapse: collapse;
-  margin: 0px;
-}
-body tr.mxPopupMenuItem {
-  color: black;
-  cursor: default;
-}
-body td.mxPopupMenuItem {
-  padding: 6px 60px 6px 30px;
-  font-family: Arial;
-  font-size: 10pt;
-}
-body td.mxPopupMenuIcon {
-  background-color: white;
-  padding: 0px;
-}
-body tr.mxPopupMenuItemHover {
-  background-color: #eeeeee;
-  color: black;
-}
-table.mxPopupMenu hr {
-  border-top: solid 1px #cccccc;
-}
-table.mxPopupMenu tr {
-  font-size: 4pt;
-}
-`;
+// custom style for Popup Menu
+import './css/menu-style.css';
 
 export default {
   title: 'Misc/MenuStyle',
@@ -101,10 +63,6 @@ export default {
 const Template = ({ label, ...args }: Record<string, string>) => {
   configureImagesBasePath();
 
-  const styleElm = document.createElement('style');
-  styleElm.innerText = CSS_TEMPLATE;
-  document.head.appendChild(styleElm);
-
   const container = createGraphContainer(args);
 
   // Disables built-in context menu
diff --git a/packages/html/stories/ShowRegion.stories.ts b/packages/html/stories/ShowRegion.stories.ts
index c2a81b8c9b..bbfef8319d 100644
--- a/packages/html/stories/ShowRegion.stories.ts
+++ b/packages/html/stories/ShowRegion.stories.ts
@@ -44,45 +44,8 @@ import {
 import { createGraphContainer } from './shared/configure.js';
 // style required by RubberBand and MaxPopupMenu
 import '@maxgraph/core/css/common.css';
-
-const CSS_TEMPLATE = `
-body div.mxPopupMenu {
-  -webkit-box-shadow: 3px 3px 6px #C0C0C0;
-  -moz-box-shadow: 3px 3px 6px #C0C0C0;
-  box-shadow: 3px 3px 6px #C0C0C0;
-  background: white;
-  position: absolute;
-  border: 3px solid #e7e7e7;
-  padding: 3px;
-}
-body table.mxPopupMenu {
-  border-collapse: collapse;
-  margin: 0px;
-}
-body tr.mxPopupMenuItem {
-  color: black;
-  cursor: default;
-}
-body td.mxPopupMenuItem {
-  padding: 6px 60px 6px 30px;
-  font-family: Arial;
-  font-size: 10pt;
-}
-body td.mxPopupMenuIcon {
-  background-color: white;
-  padding: 0px;
-}
-body tr.mxPopupMenuItemHover {
-  background-color: #eeeeee;
-  color: black;
-}
-table.mxPopupMenu hr {
-  border-top: solid 1px #cccccc;
-}
-table.mxPopupMenu tr {
-  font-size: 4pt;
-}
-`;
+// custom style for Popup Menu
+import './css/show-region.css';
 
 export default {
   title: 'Misc/ShowRegion',
@@ -97,10 +60,6 @@ export default {
 };
 
 const Template = ({ label, ...args }: Record<string, string>) => {
-  const styleElm = document.createElement('style');
-  styleElm.innerText = CSS_TEMPLATE;
-  document.head.appendChild(styleElm);
-
   const mainDiv = document.createElement('div');
   const divMessage = document.createElement('div');
   divMessage.innerHTML =
diff --git a/packages/html/stories/css/menu-style.css b/packages/html/stories/css/menu-style.css
new file mode 100644
index 0000000000..cba17a40a8
--- /dev/null
+++ b/packages/html/stories/css/menu-style.css
@@ -0,0 +1,36 @@
+body div.mxPopupMenu {
+    -webkit-box-shadow: 3px 3px 6px #C0C0C0;
+    -moz-box-shadow: 3px 3px 6px #C0C0C0;
+    box-shadow: 3px 3px 6px #C0C0C0;
+    background: white;
+    position: absolute;
+    border: 3px solid #e7e7e7;
+    padding: 3px;
+}
+body table.mxPopupMenu {
+    border-collapse: collapse;
+    margin: 0;
+}
+body tr.mxPopupMenuItem {
+    color: black;
+    cursor: default;
+}
+body td.mxPopupMenuItem {
+    padding: 6px 60px 6px 30px;
+    font-family: Arial, sans-serif;
+    font-size: 10pt;
+}
+body td.mxPopupMenuIcon {
+    background-color: white;
+    padding: 0;
+}
+body tr.mxPopupMenuItemHover {
+    background-color: #eeeeee;
+    color: black;
+}
+table.mxPopupMenu hr {
+    border-top: solid 1px #cccccc;
+}
+table.mxPopupMenu tr {
+    font-size: 4pt;
+}
diff --git a/packages/html/stories/css/show-region.css b/packages/html/stories/css/show-region.css
new file mode 100644
index 0000000000..b839a79e72
--- /dev/null
+++ b/packages/html/stories/css/show-region.css
@@ -0,0 +1 @@
+@import "menu-style.css";