diff --git a/src/core/css/webcaosdb.css b/src/core/css/webcaosdb.css
index 8fe10a153887a0c051846734a5a40cc195666f5b..e8b7b42086dd41b0c599fb93b5ac0c1977abfd06 100644
--- a/src/core/css/webcaosdb.css
+++ b/src/core/css/webcaosdb.css
@@ -779,3 +779,15 @@ details p {
     font-size: 0.875rem;
     color: #5E6762;
 }
+
+.caosdb-f-form-wrapper .caosdb-f-form-required-marker {
+    font-size: 10px;
+    color: red;
+    margin-right: 4px;
+    font-weight: 100;
+}
+
+.caosdb-f-form-elements-footer .caosdb-f-form-required-label {
+    margin-right: 4px;
+    font-size: 11px;
+}
diff --git a/src/core/js/form_elements.js b/src/core/js/form_elements.js
index 193235a2f8a799c07ccc893742d5df9a7d0fa7d1..6815acd791213c6b239a693c3c64667965c369ed 100644
--- a/src/core/js/form_elements.js
+++ b/src/core/js/form_elements.js
@@ -1232,7 +1232,7 @@ var form_elements = new function () {
             .css({
                 "margin": "20px",
             }).append(this.make_required_marker())
-            .append('<span style="margin-right: 4px; font-size: 11px">required field</span>')[0];
+            .append('<span class="caosdb-f-form-required-label">required field</span>')[0];
     }
 
     this.make_error_message = function (message) {
@@ -1502,14 +1502,7 @@ var form_elements = new function () {
      * @returns {HTMLElement} span element.
      */
     this.make_required_marker = function () {
-        // TODO create class and move to css file
-        return $('<span>*</span>')
-            .css({
-                "font-size": "10px",
-                "color": "red",
-                "margin-right": "4px",
-                "font-weight": "100",
-            })[0];
+        return $('<span class="caosdb-f-form-required-marker">*</span>')[0];
     }