HTML question about font size

**HeadlessMermaid** · 2014-11-09, 01:16 AM (ISO 8601)

High! I'm trying to produce this effect:

Section Z [back to top]

The only way I know to change font size is to define the entire paragraph. For example:

But I don't want the smaller font to be on another paragraph, I'd like it to be on the same line with the regular-sized text. Is that possible?

Thanks in advance. :)

**Douglas** · 2014-11-09, 02:17 AM (ISO 8601)

It is possible in several different ways. The one closest to what you already know is simply use span instead of p. However, inline style attributes like that are considered very poor programming practice these days.

The good way involves a header tag (h1 through h6), possibly a class attribute, and a little CSS. That may or may not be worth it depending on the scale of what you're doing.

**HeadlessMermaid** · 2014-11-09, 03:09 AM (ISO 8601)

Originally Posted by Douglas

It is possible in several different ways. The one closest to what you already know is simply use span instead of p. However, inline style attributes like that are considered very poor programming practice these days.

The good way involves a header tag (h1 through h6), possibly a class attribute, and a little CSS. That may or may not be worth it depending on the scale of what you're doing.

Span worked, yay! :)

I tried to use headers like this:

<h3>TEXT</h3> <h6>small text</h6>

but then it doesn't all end up in the same line, the small text goes on the line below.

I'm not sure I can mess with the CSS, it's a tumblr theme. Its CSS is not in the HTML itself, but gets called from somewhere else. The <h> attributes were defined by whoever made the theme, and I can only use them as is. I think.

In any case, the first suggestion worked, so thanks a lot!

**CarpeGuitarrem** · 2014-11-10, 12:24 PM (ISO 8601)

The <hX> tags push stuff out of the way by default so that they look like headers; ditto for <p> tags. (If you put a bunch of <p> tags together, they'd separate out into paragraphs accordingly.) I don't even know if it's possible to override that, and you don't want to; it's too useful otherwise.

Span is a pretty useful tool. Best when used in conjunction with a stylesheet, but inline style declaration works too. Of course, I would advise you just to put a style up at the top of the page, inside a <style> tag, instead of doing it inline, that way if you need to adjust it, you can do it easily.

Code:

<head>
<style>
.small-text {
font-size: 10px;
}
</style>
</head>

<p>So here's some text <span class="small-text">and here's some small text</span></p>

**KillianHawkeye** · 2014-11-20, 03:00 PM (ISO 8601)

@OP, considering this looks like something you'll have in several places on your page, I have to agree 100% with CarpeGuitarrem's suggestion of declaring a CSS class in the page header. It guarantees that your small texts will always be the same and lets you add changes to all of them at once. CSS is awesome like that.

**HeadlessMermaid** · 2014-11-21, 03:56 AM (ISO 8601)

CSS appears indeed to be awesome (if a bit confusing for someone who doesn't technically know html...), but this isn't html from scratch. I'm modifying a tumblr theme which pulls a css from elsewhere, and I can't mess with it. (I've tried.) So I'm stuck with defining fonts and sizes and such on a case-by-case basis. It's OK, it wasn't a very big production, and it's done already.

Still, this is all very useful and interesting advice, and I'm sure it will come up in the future. So thanks again to everyone.

**CarpeGuitarrem** · 2014-11-22, 08:57 PM (ISO 8601)

Unless it's using an @import for the CSS file, you should still be able to use CSS. Putting CSS in a <style> tag within the <head> tag will override any CSS file that's linked to the HTML page.

See here

**Teddy** · 2014-11-30, 08:46 AM (ISO 8601)

Let's apply a sanity check on the question:
Yes, it's possible!

And better yet, once we've done so, we can inspect the HTML and see that the forum uses the <font> tag with the size attribute to achieve this. The value doesn't have to be a lone number either, expressing it in px works just as well.

Of course, I'll leave it up to those who haven't learned HTML through disassembling web pages to evaluate whether this is good coding style or not. I've at least found that it isn't supported in HTML5, though...

**CarpeGuitarrem** · 2014-12-02, 10:51 AM (ISO 8601)

Yeah, the FONT tag is being deprecated, along with B and I (in favor of STRONG and EM, because I guess they want the single letters free to be used for other things). I think that's it, aside from DIV being a defacto new standard for a lot of things, like layout (which tends to be done via TABLE in older sites).

**KillianHawkeye** · 2014-12-17, 06:50 PM (ISO 8601)

Originally Posted by HeadlessMermaid

CSS appears indeed to be awesome (if a bit confusing for someone who doesn't technically know html...), but this isn't html from scratch. I'm modifying a tumblr theme which pulls a css from elsewhere, and I can't mess with it. (I've tried.) So I'm stuck with defining fonts and sizes and such on a case-by-case basis. It's OK, it wasn't a very big production, and it's done already.

Still, this is all very useful and interesting advice, and I'm sure it will come up in the future. So thanks again to everyone.

Originally Posted by CarpeGuitarrem

Unless it's using an @import for the CSS file, you should still be able to use CSS. Putting CSS in a <style> tag within the <head> tag will override any CSS file that's linked to the HTML page.

See here

Additionally, you can link more than one CSS file to your web pages, so you can still set up site-wide classes and ids.

Thread: HTML question about font size

Thread Tools

Spoilers