Why is my {{.Content}} getting rendered but not following CSS rules?

[newyorker]

Hey guys, new to Hugo and I have crossed all but one hurdle and could use your help with something benign. I am unable to get my {{ .Content }} to format according to my wishes (using bootstrap):

---

<p style="color: red;">{{ .Content }}</p>

Note: Everything else including the {{.Title}} and Date work perfectly. These are all looped inside two div s. The content itself is getting rendered just fine, except it’s refusing to format.

Do I need to put it inside a range?

[jmooring]

@newyorker

it’s refusing to format

What does this mean?

This would be much easier to troubleshoot if you could share your layout, or better yet, provide a link to the public repository for your project.

[newyorker]

Apologies, I haven’t put the code up on github, but in essence this is the entirety of my single.html.

nifty-smoke-5 - CodeSandbox

Question: If I format the outer div with a css styling, it goes through, but when I put a class or CSS style to the inner <p> element, it does not. Why is that?

[jmooring]

You are nesting paragraphs, which is not possible. See:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p

Paragraphs are block-level elements, and notably will automatically close if another block-level element is parsed before the closing </p> tag.

Your layout code renders as:

<div>
  <p style="color: red;">
    <p>
      This is content/post/test.md
    </p>
  </p>
</div>

<div style="color: red;">
  <p>
    <p>
      This is content/post/test.md
    </p>
  </p>
</div>

Your template code should look like this:

<div style="color: red;">
  {{- .Content -}}
</div>