I am embedding a bokeh chart in a Flask template. The app uses a master stylesheet, while the chart needs its own styles.
The master stylesheet leaks into the chart and changes its appearance. How do I apply different styles to different sections in a template so that only one style is active?
See my question on the Bokeh mailing list for more code and images.
This is the code of the template that pulls in the chart object. resources, script, and div are the elements of the object, generated by the charting library.
{% extends "base.html" %}
{% block content %}
<frame>
<head>
<meta charset='utf-8' />
<meta http-equiv='content-type' content='text/html; charset=utf-8' />
{{ resources|indent(4)|safe }}
{{ script|indent(4)|safe }}
</head>
<body>
{{ div|indent(4)|safe }}
</body>
</frame>
{% endblock %}
You don't, that's not how HTML/CSS works. All linked stylesheets apply to the entire document, Jinja templates don't factor into it. You use selectors to selectively apply CSS rules to HTML elements. Give the chart element an id, and write rules for that id.