Visit the live webpage
Searching for a solution to showcase code snippets on my site, I'm faced with a challenge as a CSS beginner. My struggle lies in creating a dark background for displaying these code snippets.
Upon trying to implement a class named "test" with color blue and background black properties, I noticed that while the text appears in blue within pre tags, the background remains unchanged from default.
Switching to span tags resolves this issue but goes against best practices due to non-semantic tag usage. It seems like there might be an inherent property of pre tags that requires special handling.
Any suggestions or insights? If necessary, I can share the code snippet here for better analysis.
Edit: Here's a condensed version of the code with the same problem persisting. Hopefully, by simplifying it, we can pinpoint the root cause more effectively.
Here's the HTML:
<!DOCTYPE html>
<head>
<title>Test</title>
<link type="text/css" rel="stylesheet" href="stylesheets/test.css">
</head>
<body>
<p>
<pre class="test">test</pre>
</p>
</body>
</html>
And now, the CSS:
.test {
color: blue;
font-weight: bold;
background: black;
}
pre {
font-family: monospace;
font-size: 1.25em;
text-align: left;
line-height: 0px;
background: black;
}