CODEWITHSUNDEEP
htmlcss
Rasmus
Rasmus

Reputation: 366

Two different styles in the same h1 tag

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.

Upvotes: 11

Views: 37410

Answers (4)

David Mann
David Mann

Reputation: 2260

Kinda a non-typical way to do this would be to use a combination of ::first-line and white-space: pre-line. This combo works pretty well since white=space: pre-line allows you to determine exactly where the first line ends. Of course, like the other answers, this method keeps you at just one h1 tag—ideal for SEO purposes.

A quick example on how this works:

h1 {
  white-space: pre-line;
  color: #fff;
  font-size: 88px;
}
h1::first-line {
  font-size: 34px;
}
body {
  background: black;
}
<h1>First half
  Second half
</h1>

That HTML looks a little weird. That's because we're forcing a newline with white-space: pre-line. It preserves any line breaks in the code (except, apparently, the last one). This makes new lines important, as demonstrated below.

h1 {
  white-space: pre-line;
  border: 1px black solid;
}
 <h1>First half
   
   Second half</h1>

<h1>
  First half
  Second half
</h1>

Still, it makes our first line end wherever we want it to, allowing us to target it with the ::first-line pseudo-element. Unfortunately, the styles supported by the ::first-line pseudo-element are fairly limited, but you can still do quite a bit. Sadly, this makes your margin-bottom hard to replicate. My closest attempt came from using line-height, which worked, but left a larger gap between the h1 and the next element. Still, it could be fixed with a little bit of negative margins, but then you could potentially run into other issues.

Though it's probably not the best way to go about doing this, it is a fun and interesting approach to solving the problem.

h1 {
  white-space: pre-line;
  color: #fff;
  font-size: 88px;
  line-height: 120px;
}
h1::first-line {
  font-size: 34px;
  line-height: normal;
}
/* Formatting styles */

* {
  margin: 0;
  padding: 0;
}
body {
  background: black;
  padding-top: 10%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
h1,
div {
  max-width: 475px;
  border: 1px white solid;
  flex: 1;
  /* Makes h1 the same font-weight
   of p for better comparison */
  font-weight: normal;
}
<h1>First half
      Second half
</h1>
<div>
  <p style="color:#FFF; font-size:34px; margin-bottom:10px;">First half</p>
  <p style="color:#FFF; font-size:88px;">Second half</p>
</div>

Upvotes: 0

bvakiti
bvakiti

Reputation: 3611

you can use

<h1>
<span >First half</span>
<span class='otherStyle' >Second half</span>
</h1>

Css style:

h1{
color :red;
}

h1> span{ //all the span elements within h1 is applied this style
 color : blue;
font-size:34px; 
margin-bottom:10px;
 }
.otherStyle{  
color:yellow;
font-size:88px;
}

Upvotes: 0

Ole Sauffaus
Ole Sauffaus

Reputation: 534

1) You should move your styling to a stylesheet.

2) You can easily have several styles in a single h1 ... like this:

HTML:

<h1>First <span class='A'>Second</span></h1>

CSS:

h1 { color:#F00; }
.A { color:#0F0; }

Upvotes: 2

Asaf David
Asaf David

Reputation: 3297

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;
}

Upvotes: 25

Related Questions