We continue learning labels that help us to format the text.

So far all of our examples have been in black and white. Very boring! Surely you are wanting to give a little color to the pages, so in this article we are going to start with it.

Despite the fact that for reasons of homogeneity and simplicity, but above all due to the need to separate the code by responsibilities, this type of tag to define formats must be carried out exclusively through the (which we will have time to talk about) . However, in traditional HTML there is a classic and direct way to define color, size and font of a given text.

This is done from the FONT tag and its corresponding closure. Within this label we must specify the attributes corresponding to each of these parameters that we wish to define. Here are the main attributes of this tag:

Note: The colors are not the responsibility of the HTML, since they belong to the style and not to the content. Therefore, everything that is going to be explained here is deprecated. We warn you through this note and in the text of the article itself. This article may come in handy as practice if you’re just starting out with HTML and want to play around with different tags. Be very careful though, never use these tags in a real project, use .

Even in the HTML5 standard, which is the most current, tags like FONT have been removed, so they shouldn’t be used.

face attribute

Defines the font. Most likely your browser will ignore the attribute, since it is totally deprecated.

You have to be careful with this attribute since each user, depending on the platform they use, may not have the same fonts as us, so if we choose a type that it does not have, the browser will be forced to display the text in the default font (usually Times New Roman). To avoid this, several fonts separated by commas are usually selected within the attribute. In this case, the browser will verify that it has the first type listed and if it does not, it will go to the second and so on until it finds a type that does have it or ends the list and sets the default font. Let’s see an example.

This text has a different font

What would it look like on a web page?

Note: Here is an example of an attribute whose value must be limited by quotes (“). We said that quotes are optional in attributes, however this is not always the case. If the attribute value contains spaces, as is the case of:

face=”Comic Sans MS,arial,verdana”

we must place the quotes to limit it. In case of not having quotes

face=Comic Sans MS, arial, verdana

face=Comic would be understood, but everything that follows would be ignored, because HTML would not associate it with the value of the attribute. In this case HTML would think that the following words (after the space) are other attributes, but since it doesn’t know them as attributes it will simply ignore them.

size attribute

Defines the font size. This size can be absolute or relative.

If we speak in absolute terms, there are 7 different size levels numbered from 1 to 7 in increasing order. We will therefore choose a value size=”1″ for the smallest letter or size=”7″ for the largest.

This text is bigger

What would it look like on a web page?

We can also modify the size of our letter with respect to that of the text shown above by defining the number of levels that we want to go up or down in this scale of sizes by means of a + or – sign. In this way, if we define our attribute as size=”+1″ what we mean is that we increase the size of the letter by one level. If we were previously writing in 3, we will automatically go to 4.

The actual sizes that we will see on the screen will depend on the definition and font size chosen by the user in the browser. This font size can be defined in the Explorer by going to the top menu, View/Font Size. In Netscape we will choose View/Text Size. This flexibility can be embarrassing on more than one occasion, since in many cases we will want the size of the text to remain constant so that it fits in a certain space. We will see in due course that this sizing can be accomplished by cascading style sheets.

color attribute

The color of the text can be defined using the color attribute. Each color is in turn defined by a hexadecimal number that is made up of three parts. Each of these parts represents the contribution of red, green and blue to the color in question.

You can understand how this numbering works and which are the most compatible colors from this article: .

On the other hand, it is possible to immediately define some of the most frequently used colors for which a more memonic name has been created:

This text is in red

What would it look like on a web page?

With all this we are already in a position to create a formatted text in a really elaborate way.

So let’s put everything we’ve learned in these chapters into practice by doing an exercise consisting of a page that has the following characteristics:

• A headline with a level 1 header, in italics and olive green.
• A second level 2 header holder, also olive green.
• All text on the page must be presented in a font other than the default font. For example “Comic Sans MS” and if this is not in the system, place the font “Arial”.

A possible resolution of this exercise can be seen here. However, note that this code should not be implemented on a public-facing site, as things are not currently done that way. Remember that the styles are part of the CSS. As a practice it can come in handy and it’s nice to give a little color to the page, with the little we know about HTML. But don’t use the FONT tag on your websites. We will never admit that we are the authors of this code. If they ever ask you don’t say you’ve seen it here 😉