diff --git a/css/converse.css b/css/converse.css
index ee9c43976..6523851d2 100644
--- a/css/converse.css
+++ b/css/converse.css
@@ -1966,6 +1966,7 @@
       display: block;
       padding: 4px 7px 0 5px; }
   #conversejs #controlbox #select-xmpp-status {
+    display: none;
     float: right;
     margin-right: 0.5em; }
   #conversejs #controlbox #set-custom-xmpp-status {
@@ -2145,6 +2146,8 @@
       background-position: right 3px center; }
     #conversejs #converse-roster .roster-filter-form .roster-filter.onX {
       cursor: pointer; }
+    #conversejs #converse-roster .roster-filter-form .roster-filter-state {
+      display: none; }
     #conversejs #converse-roster .roster-filter-form .state-type {
       float: left;
       border: 1px solid #999;
@@ -2154,6 +2157,8 @@
       padding: 0;
       padding-left: 0.4em;
       width: 53%; }
+    #conversejs #converse-roster .roster-filter-form .state-type-state {
+      display: none; }
     #conversejs #converse-roster .roster-filter-form .filter-type {
       display: table-cell;
       float: right;
@@ -2167,7 +2172,8 @@
     margin: 0;
     height: 100%;
     overflow-x: hidden;
-    overflow-y: auto; }
+    overflow-y: auto;
+    display: none; }
     #conversejs #converse-roster .roster-contacts dt.roster-group {
       border: none;
       color: #818479;
@@ -2624,6 +2630,9 @@
     position: absolute;
     right: 116px;
     bottom: 10px; }
+  #conversejs #minimized-chats .unread-message-count-hidden,
+  #conversejs #minimized-chats .chat-head-message-count-hidden {
+    display: none; }
 
 #conversejs #controlbox #chatrooms .bookmarks-list {
   padding-top: 1em; }
diff --git a/docs/CHANGES.md b/docs/CHANGES.md
index bf9eb4c40..6023b01b0 100755
--- a/docs/CHANGES.md
+++ b/docs/CHANGES.md
@@ -10,6 +10,7 @@
 - API change: the `message` event now returns a data object with `stanza` and
   `chatbox` attributes, instead of just the stanza. [jcbrand]
 - #567 Unreaded message count reset on page load [novokrest]
+- Remove all inline CSS to comply with strict Content-Security-Policy headers [mathiasertl]
 
 ## 3.0.2 (2017-04-23)
 
diff --git a/sass/_controlbox.scss b/sass/_controlbox.scss
index 8975e8bc3..fabcbeafb 100644
--- a/sass/_controlbox.scss
+++ b/sass/_controlbox.scss
@@ -220,6 +220,7 @@
         }
 
         #select-xmpp-status {
+            display: none;
             float: right;
             margin-right: 0.5em;
         }
diff --git a/sass/_minimized_chats.scss b/sass/_minimized_chats.scss
index 35a6b301e..eca6db35d 100644
--- a/sass/_minimized_chats.scss
+++ b/sass/_minimized_chats.scss
@@ -54,5 +54,9 @@
             right: 116px;
             bottom: 10px;
         }
+        .unread-message-count-hidden,
+        .chat-head-message-count-hidden {
+            display: none;
+        }
     }
 }
diff --git a/sass/_roster.scss b/sass/_roster.scss
index a7b0ffbfa..7fd32338e 100644
--- a/sass/_roster.scss
+++ b/sass/_roster.scss
@@ -49,6 +49,9 @@
         .roster-filter.onX {
             cursor: pointer;
         }
+        .roster-filter-state {
+            display: none;
+        }
         .state-type {
             float: left;
             border: 1px solid #999;
@@ -59,6 +62,9 @@
             padding-left: 0.4em;
             width: 53%;
         }
+        .state-type-state {
+            display: none;
+        }
         .filter-type {
             display: table-cell;
             float: right;
@@ -76,6 +82,7 @@
         height: 100%;
         overflow-x: hidden;
         overflow-y: auto;
+        display: none;
         dt.roster-group {
             border: none;
             color: $text-color;
diff --git a/src/templates/contacts_panel.html b/src/templates/contacts_panel.html
index 0ca105a7f..0830efe47 100644
--- a/src/templates/contacts_panel.html
+++ b/src/templates/contacts_panel.html
@@ -1,6 +1,6 @@
 <form class="pure-form set-xmpp-status" action="" method="post">
     <span id="xmpp-status-holder">
-        <select id="select-xmpp-status" style="display:none">
+        <select id="select-xmpp-status">
             <option value="online">{{{label_online}}}</option>
             <option value="dnd">{{{label_busy}}}</option>
             <option value="away">{{{label_away}}}</option>
diff --git a/src/templates/roster.html b/src/templates/roster.html
index 3f26995a7..1318e6daa 100644
--- a/src/templates/roster.html
+++ b/src/templates/roster.html
@@ -1 +1 @@
-<dl class="roster-contacts" style="display: none;"></dl>
+<dl class="roster-contacts"></dl>
diff --git a/src/templates/roster_filter.html b/src/templates/roster_filter.html
index 596e3a6f2..792280f11 100644
--- a/src/templates/roster_filter.html
+++ b/src/templates/roster_filter.html
@@ -1,8 +1,7 @@
 <form class="pure-form roster-filter-form input-button-group">
-    <input value="{{filter_text}}" class="roster-filter"
-           placeholder="{{placeholder}}"
-           {[ if (filter_type === 'state') { ]}  style="display: none" {[ } ]} >
-    <select class="state-type" {[ if (filter_type !== 'state') { ]}  style="display: none" {[ } ]} >
+    <input value="{{filter_text}}" class="roster-filter roster-filter-{{filter_type}}"
+           placeholder="{{placeholder}}">
+           <select class="state-type state-type-{{filter_type}}">
         <option value="">{{label_any}}</option>
         <option {[ if (chat_state === 'unread_messages') { ]} selected="selected" {[ } ]}
             value="unread_messages">{{label_unread_messages}}</option>
diff --git a/src/templates/toggle_chats.html b/src/templates/toggle_chats.html
index d57d60b9a..3845415d2 100644
--- a/src/templates/toggle_chats.html
+++ b/src/templates/toggle_chats.html
@@ -1,4 +1,4 @@
 {{{Minimized}}} <span id="minimized-count">({{{num_minimized}}})</span>
-<span class="unread-message-count"
-    {[ if (!num_unread) { ]} style="display: none" {[ } ]}
+<span class="unread-message-count
+    {[ if (!num_unread) { ]} unread-message-count-hidden {[ } ]}
     href="#">{{{num_unread}}}</span>
diff --git a/src/templates/trimmed_chat.html b/src/templates/trimmed_chat.html
index 458302312..7c4fdc9a1 100644
--- a/src/templates/trimmed_chat.html
+++ b/src/templates/trimmed_chat.html
@@ -1,6 +1,6 @@
 <a class="chatbox-btn close-chatbox-button icon-close"></a>
-<a class="chat-head-message-count" 
-    {[ if (!num_unread) { ]} style="display: none" {[ } ]}
+<a class="chat-head-message-count
+    {[ if (!num_unread) { ]} chat-head-message-count-hidden {[ } ]}"
     href="#">{{{num_unread}}}</a>
 <a href="#" class="restore-chat" title="{{{tooltip}}}">
     {{{ title }}}