Exploring HTML as a beginner has led me to an interesting issue. I've been practicing my newfound skills on W3Schools' platform and everything was running smoothly until I encountered a discrepancy in how the code is rendered on Wordpress.
The specific section of code between < style > and </ style > seems to work perfectly fine on W3Schools, but when copied over to the Wordpress editor, the font-family: Arial, sans-serif; attribute doesn't seem to be applied to the specified elements like < h1 >Heading 1</ h1 >.
I'm using identical code on both platforms, so why would there be a difference in the outcome? Could it be that Wordpress interprets the code differently?
Here's the code snippet in question:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
font-family: Arial, sans-serif;
background-color: powderblue;
}
</style>
<title>A Title</title>
</head>
<body>
<h1 style="font-size:60px;">Heading 1</h1>
<h1>This is a heading</h1>
<hr>
<p>My first paragraph</p>
<p title="I'm a tooltip">This is a paragraph.</p>
<p>This is<br>a paragraph<br>with line breaks.</p>
</body>
</html>
Examining the images from both cases demonstrates the varying results achieved with the same code:
View W3Schools space result See Wordpress code editor result
Initially, I attempted adjusting this part of the code from:
<h1 style="font-size:60px;">Heading 1</h1>
To simply:
<h1>Heading 1</h1>
However, altering the inline styling didn't solve the issue. The mystery persists as to why the same code produces different outcomes on Wordpress compared to W3Schools.