Altering the appearance of the text on your website is a great way to draw a visitor’s attention to your key sections of content, or simply to make a page look less like a single block of text. As a Web Designer you will need to understand how you can go about changing the style of your text to create websites that are highly effective. Fortunately using HTML, and a little CSS, this is an easy feat to master.

Simple HTML Styling

The first port of call of many web designers is to do some simple text styling using HTML. It is easy to make text bold, for example, by enclosing it within <b> or <strong> tags as in this example:

<strong>This text is bold.</strong>

Likewise you can easily italicise text with <em> tags, or underline it with <u>:

<em>But this text is in italics!</em>

<u>And this is underlined!</u>

This simple formatting can certainly help to spice up any web designer’s pages, but what if you want to do something fancier such as changing the size of the text or altering its colour?

Text Styling with HTML & CSS

Before the days of CSS, the best way for a Web Designer to style the font on their web pages was with the little HTML tag <font>. This tag could be used in the following way to define the typeface, size and colour of a piece of content on your website:

<p>

<font color=”blue” size=”2″ face=”arial”>

This text has been styled.

</font>

</p>

Although it is still possible to use the <font> tag within your own web programming, it is highly recommended today that you incorporate some simple CSS to handle the styling of your text for you. Why? Because CSS can be used to style all of your web pages, which saves you having to copy and paste your font information for each and every piece of text on each and every page of HTML.

Let’s say that you would like all of the headings on your website to be coloured in blue, whereas the bulk of the text itself you would prefer in black. This quick and easy section of CSS styling would achieve that effect, without needing to keep reminding the web browser of your stylistic choices:

<html>

<head>

<style type=”text/css”>

h1 {color:blue;}

p {color:black;}

</style>

</head>

 

<body>

…

Why not take some time to practice styling the text within your initial website; you might be pleasantly surprised at how simply you can alter the words that appear on screen to make your web pages really stand out.

If you enjoyed reading the above, you may like to read more articles like this in our Articles For Web Designers category.