Html Question posted in
Some basic documentation can be found here.

Html – The style attribute is not working on <h1>

I’m new to HTML and I encountered this problem.
I use the following code to practice what I’ve learned on one of the W3Schools spaces and it works fine. I’m interested in the code between < style > and </ style >.

Once I add this piece of code the whole body changes to the specified style – as you would expect. But when I copy and paste the same code – including the < style > </ style > content – to the WordPress code editor the font-family: Arial, sans-serif; part of the code doesn’t seem to apply to the < h1 >Heading 1</ h1 > and < h1 >This is a heading</ h1 >.

I’m using the exact same code on both W3Schools space, and the WordPress editor, but it doesn’t work properly on WordPress.
Am I missing something? Does WordPress interpret the code differently and therefore delivering a different result?

Thank you!

This is the code:

<!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>

These are images showing the different results for both cases using the same code:

W3Schools space result
WordPress code editor result

At first I tried modifying the following piece of code from:

<h1 style="font-size:60px;">Heading 1</h1>

To:

<h1>Heading 1</h1>

Because I thought that the style I was specifying was somehow overriding the previous style. But if that’s the case, then both results should still yield the same result and that’s not what’s happening.

Tags:

2

Answers


  1. 0

    Add your css in the style tag this way.

            <style>
            body {
                font-family: Arial, sans-serif;
                background-color: powderblue;
            }

            h1 {
                font-family: Arial, sans-serif;
                background-color: powderblue;
                font-size:60px;
            }
        </style>

<body>
<h1>Heading 1</h2>

</body>
    Login or Signup to reply.
  2. 0

    welcome to the wonderful world of HTML!

    In WordPress there might be some other styles that affect your headlines. You’re likely to be using some WordPress theme that already has some styling: most probably it describes h1 tags specifically. So you may try to do the same to override it.

    Try adding this to your <style> tag contents:

    h1 {
  font-family: inherit;
}

    Thus you will tell the browser to apply to h1 the styles of its parent (or the closest ancestor with some font-family property specified).

    You could also provide the font family explicitly, like this:

    .h1 {
  font-family: Arial, sans-serif;
}

    But using inherit value is a more flexible option: if you want to change the font family in the future, you’ll have to do it only for the body, and its children will simply inherit this update automatically.

    Also don’t hesitate to use DevTools in your browser by inspecting an element. Thus you may see the styling applied to it and debug such issues easily.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search