Adding <style> makes PyCharm stop autocomplete css <p>I have a problem with <code>PyCharm</code> autocomplete in my Django project. I've added a <code>&lt;style&gt; ... &lt;/style&gt;</code> tag into the <code>head</code> of the page. When I did this, <code>PyCharm</code> stopped autocompleting css in this file - for example <code>col-lg...</code> from Bootstrap etc. </p> <p>If I comment the tag or move it at the bottom of a <code>bootstrap.css</code>, autocomplete works correctly.</p> <p>Is there a reason for that or it is a bug? </p> <p>This is the head:</p> <pre><code>{% extends 'base.html' %} {% load static %} {% load crispy_forms_tags %} {% block head %} &lt;script src="{% static "js/scripts/newOrder.js" %}"&gt;&lt;/script&gt; &lt;script src="{% static "chosen_v1.6.2/chosen.jquery.min.js" %}"&gt;&lt;/script&gt; &lt;script src="{% static "js/scripts/newOrder.js" %}"&gt;&lt;/script&gt; &lt;link href="{% static "chosen_v1.6.2/chosen.min.css" %}" rel="stylesheet"&gt; &lt;link href="{% static "popselect/css/jquery.popSelect.css" %}" rel="stylesheet"&gt; &lt;script src="{% static "popselect/jquery.popSelect.min.js" %}"&gt;&lt;/script&gt; &lt;style&gt; {# THIS IS THE TAG #} /* required to avoid jumping */ .scrollfollowwrapper { position: absolute; width: 350px; } .scrollfollow { position: absolute; top: 0; } .scrollfollow.fixed { position: fixed; top: 12%; width: 332px; } &lt;/style&gt; &lt;script&gt; $(document).ready(function () { $("#id_target_languages").popSelect({ showTitle: false, placeholderText: 'Click to Add More', position: "bottom", width: 500 }); }) &lt;/script&gt; &lt;script&gt; var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i &lt; acc.length; i++) { acc[i].onclick = function () { this.classList.toggle("active"); this.nextElementSibling.classList.toggle("show"); } } &lt;/script&gt; &lt;script&gt; $(document).ready(function () { var top = $('.scrollfollow').offset().top - parseFloat($('.scrollfollow').css('marginTop').replace(/auto/, 0)) - 75; $(window).scroll(function (event) { // what the y position of the scroll is var y = $(this).scrollTop(); // whether that's below the form if (y &gt;= top) { // if so, ad the fixed class $('.scrollfollow').addClass('fixed'); } else { // otherwise remove it $('.scrollfollow').removeClass('fixed'); } }); }); &lt;/script&gt; {% endblock %} {% block content %} .... Body.. ... </code></pre>