Tuesday, May 28, 2024

HTML Text: How to Center, Bold, Align, Change Size & Create Headings

(with updates by editorial staff)

So, how did it go with your first HTML page last night? I’ll assume it went well. Because if I don’t, I can’t go on, and I want to go on. So, now you know the basics about placing tags and manipulating text in terms of strong and emphasis styles. That’s good, and along with the <HR>, <BR>, and <P> commands you’ll be able to play around pretty well with text placement. Now we’ll talk about changing text size.

Heading Commands

Heading commands are used extensively in HTML documents to, you guessed it, create headings! How novel.

There are six (6) heading commands: <H1> through <H6>. <H1> is the largest and <H6> is the smallest. Here are their relative sizes:

<H1>This is Heading 1</H1>

<H2>This is Heading 2</H2>

<H3>This is Heading 3</H3>

<H4>This is Heading 4</H4>

<H5>This is Heading 5</H5>

<H6>This is Heading 6</H6>

Note: The numbers 7 and 8 have been added by some browsers, but these are not part of the recognized HTML standard.

Heading commands create nice, bold text, as shown above, and are quite easy to use. It’s a simple H# and /H# command. However, they like to be alone.

Instead of looking at the headings above and seeing text, I want you to draw an imaginary box, the height of the text and the width of the screen.

Something like this actually:

Hello there

The heading takes up the entire width available to it.

This is because, like the P tag, it’s a block level element. This means it likes to be a block shape on your page, and it will start new lines around itself. It will be the full width of the screen unless you specify otherwise.

The other option is an in-line element. These ones don’t create new lines around themselves. If you guessed Strong and Em fell into this category then you’re really getting the hang of this!

In-line elements should always be contained in a Block level element.

Once you learn a little CSS in a few of the next primers, you’ll be able to customize them to appear exactly as you want.

Font Size Commands

Maybe you’d like a little more control over your text size. This used to be done using the <FONT SIZE> commands, but they’ve now been depreciated in favor of CSS, so I’m going to give you the CSS now, and explain in more detail later.

To use CSS all we need is the Style attribute:

<p style=”font-size: 150%;”>This is called an in-line CSS style.</p>

We’ve just used what I like to call a command inside of a command. The technical HTML term is an “attribute”. The paragraph tag has an attribute called style, and this contains some CSS.

The CSS is formed using Property: value;

The property could be the font-size, the color, the border etc, and the value is the value which you wish this property to assume. The property is separated from the value by a colon, and a semi-colon is used to show that the css property is complete.

I’ve used percentages to define my font sizes. Obviously you could use values larger or smaller than 100% to enlarge or reduce the size, but if you’re feeling adventurous there are lots of different ways you can control the size:

  • Pixels: e.g. 14px; sets an exact value.
  • Points: e.g. 14pt; usually used in print stylesheets (more on these later).
  • Em: e.g. 1.2em; something to do with the font-size, but it works. Mostly.
  • Ex; e.g. 0.8ex; something to do with the ‘x-height’, whatever that may be.
  • Named sizes: e.g. xx-small / x-small / small / medium / large / x-large / xx-large

There is no right or wrong answer as to which one is best, so do some experimenting and see what you like best. The only thing to be aware of is that pixel values (like 14px) aren’t adjustable in Internet Explorer for people with poor eyesight who like their text larger. For this reason percentages and ’em’s might be better for accessibility reasons.

There are lots of things you might like to do with CSS, one of which is the font color. Here’s an example with two CSS styles applied to it:

<p style=”font-size: x-small; color: red;”>Two styles applied!</p>

If you only wanted to apply the change of font size to a single word or phrase you could put the style attribute into a strong or em tag:

<p>One big word in <strong style=”font-size: 125%;”>BOLD</strong></p>

Centering Text

Since you’ve already done some writing you’ve no doubt noticed that the text that appeared in the browser window was justified to the left of the screen. That’s what’s known as the default. It just happens without your specifying any particular justification.

What happens if you want to change the alignment?

Notice that this text is centered on the page. It’s done by applying the CSS “text-align: center;”.

Here’s what it looks like:

<p style=”text-align: center;”>
All text in here will be centered

You need to apply this to a block level element which automatically takes the full width of the page, otherwise it may or may not work.

Text To The Right

Go on, guess!

<p style=”text-align: right;”>
All text in here will be right aligned.

And this lesson comes to an end! Notice they’re getting shorter? Now go and incorporate a few of these Heading commands, together with a smattering of CSS into a page. To do is to learn. A brilliant man once said that… I think he had a beard, too.

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles