Currently, I am utilizing the incredible StackEdit for my documents.
One of its awesome features is the ability to export an HTML file of the document.
This document utilizes The default CSS File.
As an example, here is the code from the downloaded HTML file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>New Markdown document</title>
<link rel="stylesheet" href="https://stackedit.io/res-min/themes/base.css" />
<script type="text/javascript" src="https://stackedit.io/libs/MathJax/MathJax.js?config=TeX-AMS_HTML"></script>
</head>
<body><div class="container"><h2 id="hello">Hello</h2>
<p>We’re dealing with…</p>
<blockquote>
<p>Written with <a href="https://stackedit.io/">StackEdit</a>.</p>
</blockquote></div></body>
</html>
My goal is to alter the background color of the 'div' element with the ID: "container", without changing any other properties.
The only access I have is to this basic template:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><%= documentTitle %></title>
<link rel="stylesheet" href="https://stackedit.io/res-min/themes/base.css" />
<script type="text/javascript" src="https://stackedit.io/libs/MathJax/MathJax.js?config=TeX-AMS_HTML"></script>
</head>
<body><div class="container"><%= documentHTML %></div></body>
</html>
What is the simplest way to achieve this?
Some additional notes:
- I can only make edits to the template.
- The desired color change is to f6f7f9.
- All other properties of the elements should remain unchanged.
Updates
I attempted your suggestions on the sample code provided:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>New Markdown document</title>
<link rel="stylesheet" href="https://stackedit.io/res-min/themes/base.css" />
<script type="text/javascript" src="https://stackedit.io/libs/MathJax/MathJax.js?config=TeX-AMS_HTML"></script>
</head>
<body><div class="container" style="background-color:#f6f7f9;"><h2 id="hello">Hello</h2>
<p>We’re dealing with…</p>
<blockquote>
<p>Written with <a href="https://stackedit.io/">StackEdit</a>.</p>
</blockquote></div></body>
</html>
Initially, it seemed that the document's appearance changed completely.
However, upon further testing by creating a local HTML file, it turned out that it indeed works! -> My mistake. It does work!