Two different styles in the same h1 tag

Question

Right now my header contains two p-tags with different styles:

<p style="color:#FFF; font-size:34px; margin-bottom:10px;">First half</p>
<p style="color:#FFF; font-size:88px;">Second half</p>

Is it possible to convert this into one h1-tag? Or can I have two h1 after each other? The main purpose is that it should work well with seo.

Answer 1

SEO-wise - each web page should contain one H1 tag. A possible solution for what I believe you're trying to achieve is adding span tags in your H1 enabling you to style each part of your H1 differently:

HTML:

<h1>
  <span class="smallerFont">First half</span>
  <span class="bigFont">Second half</span>
</h1>

CSS:

h1 {
  color: #fff;
}

.smallerFont {
  font-size: 34px;
  margin-bottom: 10px;
}

.bigFont {
  font-size: 88px;
}