diff --git a/src/terms/static/css/style.css b/src/terms/static/css/style.css
index 2869837..ce14e2c 100644
--- a/src/terms/static/css/style.css
+++ b/src/terms/static/css/style.css
@@ -53,3 +53,44 @@ main {
     margin-top: 6rem;
     margin-bottom: 6rem;
 }
+
+.code-questions {
+    color: rgb(16, 31, 112);
+    background-color: rgba(16, 31, 112, 0.1);
+}
+.code-options {
+    color: rgb(255, 100, 0);
+    background-color: rgba(255, 100, 0, 0.1);
+}
+.code-options-provider {
+    color: white;
+    background-color: rgba(255, 100, 0, 0.8);
+}
+.code-conditions {
+    color: rgb(128, 0, 128);
+    background-color: rgba(128, 0, 128, 0.1);
+}
+.code-tasks {
+    color: rgb(128, 0, 0);
+    background-color: rgba(128, 0, 0, 0.1);
+}
+.code-views {
+    color: rgb(0, 128, 0);
+    background-color: rgba(0, 128, 0, 0.1);
+}
+.code-order {
+    color: rgb(96, 96, 96);
+    background-color: rgba(96, 96, 96, 0.1);
+}
+.code-default {
+    color: rgb(96, 96, 96);
+    background-color: rgba(96, 96, 96, 0.1);
+}
+.code-optional {
+    color: white;
+    background-color: rgb(119.085, 119.085, 119.085);
+}
+.code-import {
+    color: black;
+    background-color: rgba(96, 96, 96, 0.1);
+}
diff --git a/src/terms/templates/_element.html b/src/terms/templates/_element.html
index a5ec06c..b53d1da 100644
--- a/src/terms/templates/_element.html
+++ b/src/terms/templates/_element.html
@@ -1,3 +1,5 @@
+<style></style>
+
 <div class="card mb-3 element" data-uri="{{ element.uri }}">
     <div class="card-header">
         <div class="row">
@@ -18,19 +20,29 @@
                     <strong>{{ key }}</strong>
                 </div>
                 <div class="col-10">
-                    {% if value is string %}
-                    {{ value | striptags }}
-                    {% elif value is mapping %}
-                    <a href="{{ base_url }}{{ value.url }}">{{ value.uri }}</a>
-                    {% elif value is iterable %}
-                    <ul class="list-unstyled">
-                        {% for item in value %}
-                        <li><a href="{{ base_url }}{{ item.url }}">{{ item.uri }}</a></li>
-                        {% endfor %}
-                    </ul>
-                    {% else %}
-                    {{ value }}
-                    {% endif %}
+                    {% if key in ["catalog","section","page","questionset","question"] %}<p class="code-questions">
+                    {% elif key in ["attribute","parent"] %}<p class="code-domain">
+                    {% elif key in ["optionset","option"] %}<p class="code-options">
+                    {% elif key in ["condition"] %}<p class="code-conditions">
+                    {% elif key in ["task"] %}<p class="code-tasks">
+                    {% elif key in ["view"] %}<p class="code-views">
+                    {% elif key in ["is_optional","is_collection","key","path"] %}<p class="code-order">
+                    {% elif key in ["comment","help_de","help_en","help_es","help_fr","help_it"] %}<p class="code-import">
+                    {% else %}<p>{% endif %}
+                        {% if value is string %}
+                        {{ value | striptags }}
+                        {% elif value is mapping %}
+                        <a href="{{ base_url }}{{ value.url }}">{{ value.uri }}</a>
+                        {% elif value is iterable %}
+                        <ul class="list-unstyled">
+                            {% for item in value %}
+                            <li><a href="{{ base_url }}{{ item.url }}">{{ item.uri }}</a></li>
+                            {% endfor %}
+                        </ul>
+                        {% else %}
+                        {{ value }}
+                        {% endif %}
+                    </p>
                 </div>
             </div>
         </li>