Need 2 different size fonts in the same header

HTML & CSS
1

I have an interesting dilemma. I need to have 2 different font sizes in a header. Part of the text is a date and the rest is plain text. The old, old way of handling this was

<h4><font size="2">2/11/14</font> - some text</h4>

This is not appropriate any more. How do I code this in CSS?

I did several web searches but I am not sure I was wording my search correctly because nothing came up.

2

Says who?

You can’t with pure CSS. You can’t arbitrarily pull the “some text” after the dash (-) and make that a different selection. No matter how you approach this problem, some sort of extra tag will need to be used (if not a <font>, then a <span> so differential styling can take place.

3 
<h4 class="header"><span class="dateStyle">2/11/14</span> Some Text</h4>

.header {
   font-size: 1.8rem;
   line-height: 1.5;
}

.dateStyle {
   font-size: 2.4rem;
   line-height: 1.5;
}
3 Likes
4

That still requires an extra element, which I think OP is trying to avoid.

5

Says who?

No matter how you approach this problem, some sort of extra tag will need to be used (if not a , then a so differential styling can take place.

Definitely true. <span> is a good way to do this. I think OP is just trying to avoid the deprecated <font> tag

6

What does that have to do with anything? I’m saying that an extra tag is still needed. Font tag deprecacy has nothing to do with my argument.

I assumed OP knew enough about basics of CSS to the point where he’s asking about removing the extra element.

7

He said it wasn’t appropriate to use the font tag anymore; you said “says who”; I provided the answer to that question. Seems like a pretty consistent conversational thread to me :wink:

I agree that an extra tag is needed - and the method of how to do it with CSS is to use a span. I haven’t seen OP object to extra tags - just the “old” (deprecated) way of doing it.

8

No, he didn’t say that FONT TAG was inappropriate. He posted the code for it. Which means he believes there’s a better method overall (e.g. removing the extra tag).

I might be wrong and he’s asking CSS/HTML 101 (what elements can be used to increase font-size).

I’m giving the OP more credit than that.

9

Well… I’ll agree to disagree about his intent until he comes and tells us, since you’re inferring one thing and I’m inferring another and it seems a bit silly to argue about it. :wink:

@cgacfox - let us know if the solution provided by @Pepster will work for you, or if you’re looking for something else. As @RyanReese says though, a tag is going to be required.

10

I was simply replying to your reply (starting back in the beginning). Nothing more than that.

11

For what it’s worth, I interpreted the question the same way as @jeffreylees, so my response would have been to use <span> with some CSS styling instead of <font> also. Clarification from the OP would be very helpful.

1 Like
12

I didn’t want a huge argument over this. W3C schools site says that using the <font> tag is obsolete so I was looking for a better way to handle this via CSS.

BTW, he is a SHE! :wink:

1 Like
13

There is no technical limit to what tags you can use @cgacfox! Any HTML tag can be used to change the font size. It doesn’t matter. <span> is a pretty general tag and can be used. Then just use the font property in CSS to make it whatever size you wish. Very very simple.

14

I used the span code and it works perfectly. Thank you everyone again for helping me figure things out.

2 Likes
15

Yes, it would be nice if there was an “nth” kind of ::first-letter thing, but until then span is the usual and valid way of doing this.

16

Agree @RyanReese… you can use any element to change the font size since you can do that with CSS. But we ideally go for a semantic web. Using anything else than a span in this particular case wouldn’t be semantic :wink:

17

What would be more semantic for covering a random snippet of text in this case?

Edit-Ah, you say anything BUT a span.

I was more trying to illustrate that there are no restrictions over what you can set font sizes on. Obviously you want to TRY and be semantic but I felt the need to point out there are nolimitations (no giving her the benefit of the doubt and thinking she knows this stuff! Fool me once, shame on you…etc)

18

Maybe in this case the <time> tag?

3 Likes
19

Actually, you’re right @mittineague. That would be better :slight_smile:

20

Having taught for many years and having been at the receiving end of people who make assumptions about what I don’t know, I need to say that people really appreciate being given the benefit of the doubt :smiley: when others are trying to help them.