CODEWITHSUNDEEP
htmlcss
Anthony
Anthony

Reputation: 37065

Multiple Font Sizes for h1 element via CSS

I need to display a company name so that the "main" part of the name appears on one line and is huge and the secondary part of the name is centered below it and smaller. Since it's not a slogan or "subtitle", I feel like it should all be in the same h1 element and, ideally, be transformed through pure CSS (meaning no spans or ems if it can be avoided.

Example:

<h1>Big Bill's Custom Auto Parts</h1>

should appear as:

Big Bill's

Custom Auto Parts

Is there a pure CSS way of doing this (even a pseudo-class not fully supported yet)?

Upvotes: 1

Views: 8107

Answers (6)

JustJohn
JustJohn

Reputation: 1460

I tried other stuff in this thread, but this finally worked.

<h3>Tutorials <span style="font-size:14px;">(2 of them)</span></h3>

Upvotes: -1

ogur
ogur

Reputation: 4586

You said you want to do it in pure CSS way, separating content and presentation. No addtional spans, no br. I understand it, but if you think about your problem, you want to create presentation rule based on content. Is that making sense? Isn't that mixing content with presentation you want to avoid?

Upvotes: 1

Adam
Adam

Reputation: 36703

Is it permissible to include a new line in the heading itself? If so you can use the first-line selector like this:

HTML

<h1>Foo bar                                                                                            
baz</h1>

CSS

h1 {
  font-size:1em;
  white-space:pre;
}
h1:first-line {
  font-size:3em;
}

Upvotes: 5

Michał Wojciechowski
Michał Wojciechowski

Reputation: 2490

If you're fine with breaking the line with a <br/>, then you might accomplish this using the ::first-line pseudo-element.

Upvotes: 1

MarioDS
MarioDS

Reputation: 13063

The shortest solution to this without using extra headers is the use of a span element:

<h1><span>Big Bill's</span> Custom Auto Parts</h1>

CSS:

h1.span {
  /* styling rules */
}

Upvotes: 3

Ruan Mendes
Ruan Mendes

Reputation: 92274

Not possible, it seems to make more sense that you have two different headers and can be styled accordingly.

How would you possibly specify where changes happen without adding a <span> within the <h1>?

Upvotes: 6

Related Questions