33

In a WordPress twenty eleven theme. I want to change the size of headings When I wrap my headings around h1 and h2 tags as follows

<h1>My h1 heading </h1>
<h2> My h2 heading </h2>

The font size of heading in the theme I am using is almost same as content's font except that they are bold. So my headings are not quite prominent.

I guess I would need to change something in the CSS file. Please advise what exactly in need to put in.

Stephen Ostermiller
  • 23,933
  • 14
  • 88
  • 109
Ahmed
  • 14,503
  • 22
  • 92
  • 150
  • Might seem obvious, but make sure there isn't another container inside the one you're looking at that is defining a font size. :) – Alkanshel Aug 05 '14 at 23:15
  • Also make sure no one has used !important in some other CSS file. I wound up here (this question) because I was trying to change the size of h2 on one specific page and it just was not changing. I started to think I was going crazy and was using the wrong syntax or something. I eventually found out someone else had set h2 size !important much further up stream. Ugh. Don't ever use "!important"... – ZeekLTK Jul 17 '15 at 14:47
  • You can also change the font size of h1 or h2 tags in some occasions setting the style argument directly in html like `

    My h1 heading

    ` and let the other headers to be set by the .css file     – Elias Feb 10 '21 at 17:25

6 Answers6

50
h1 {
  font-weight: bold;
  color: #fff;
  font-size: 32px;
}

h2 {
  font-weight: bold;
  color: #fff;
  font-size: 24px;
}

Note that after color you can use a word (e.g. white), a hex code (e.g. #fff) or RGB (e.g. rgb(255,255,255)) or RGBA (e.g. rgba(255,255,255,0.3)).

Bram Vanroy
  • 27,032
  • 24
  • 137
  • 239
16
 h1 { font-size: 150%; }
 h2 { font-size: 120%; }

Tune as needed.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
6

What have you tried? This should work.

h1 { font-size: 20pt; }
h2 { font-size: 16pt; }
recursive
  • 83,943
  • 34
  • 151
  • 241
1

If you want to change a header specifically this is a much easier solution

<style>
    h1.increase {
       font-size: 15px;
}
</style>

<h1 class="increase">Header</h1>
Icestope419
  • 73
  • 5
1

If you only change the font size, the text might intersect on smaller device types.

<style>
.heading-1{
  font-size: 350%!important;
}
</style>

<h1 class="heading-1">
  Get in Touch
</h1>

enter image description here

To make it responsive, consider tweaking the line height too.

<style>
.heading-1{
  font-size: 350%!important;
  line-height: 120%!important;
}
</style>

<h1 class="heading-1">
  Get in Touch
</h1>

enter image description here

Javapocalypse
  • 2,223
  • 17
  • 23
0

You can quickly achieve using Bootstrap CSS.

enter image description here

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Larger Heading</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" />

    </head>

    <body>
        <main>
            <h1 class="display-1">Display 1</h1>
            <h1 class="display-2">Display 2</h1>
            <h1 class="display-3">Display 3</h1>
            <h1 class="display-4">Display 4</h1>
            <h1 class="display-5">Display 5</h1>
            <h1 class="display-6">Display 6</h1>
        </main>
    </body>

    </html>
tanmaya biswal
  • 65
  • 8