HTML Text

This page contains HTML text codes as well as links to other relevant HTML text pages. HTML text code consists of a number of CSS properties - each that specify a certain property of the text. When combined, these properties determine what the overall HTML text should look like.

Common HTML Text Tasks

The most common tasks when working with HTML text tend to be setting the font family and making the text bold or italic. Text color is also another big one, as well as font size.

The examples below combine the various CSS text properties to demonstrate these common HTML text requirements. For more advanced requirements, check out the various HTML text links in the navigation.

Explicit Font Properties

Source Code	Result
<!-- Codes by HTMLcodes.me --> <p style="font-family:Garamond, Georgia, Times, Serif;line-height:24px;color:orange;width:200px;">This <span style="font-style:italic;">amazing</span> piece of <span style="font-weight:bold;">HTML text</span> uses various <span style="font-size:18px;">font properties</span> to set it's style.</p> <p><a style="font-size:11px;color:#999;" href="http://www.htmlcodes.me/text/">HTML text codes</a></p>	This amazing piece of HTML text uses various font properties to set it's style.

Source Code

Result

<!-- Codes by HTMLcodes.me -->
<p style="font-family:Garamond, Georgia, Times, Serif;line-height:24px;color:orange;width:200px;">This <span style="font-style:italic;">amazing</span> piece of <span style="font-weight:bold;">HTML text</span> uses various <span style="font-size:18px;">font properties</span> to set it's style.</p>
<p><a  style="font-size:11px;color:#999;" href="http://www.htmlcodes.me/text/">HTML text codes</a></p>

This amazing piece of HTML text uses various font properties to set it's style.

Shorthand Font Properties

The following example uses the shorthand font property to set all styles in one go.

Source Code Result

Source Code	Result
<!-- Codes by HTMLcodes.me --> <p style="font:italic bold 14px/24px Garamond, Georgia, Times, Serif;color:orange;width:200px;">This amazing piece of HTML text is using the <code>font</code> shorthand property to set the font family, style, boldness, size, and line-height all in one. We also use the <code>color</code> property to set the text color.</p> <p><a style="font-size:11px;color:#999;" href="http://www.htmlcodes.me/text/">HTML text codes</a></p>	This amazing piece of HTML text is using the `font` shorthand property to set the font family, style, boldness, size, and line-height all in one. We also use the `color` property to set the text color.

<!-- Codes by HTMLcodes.me -->
<p style="font:italic bold 14px/24px Garamond, Georgia, Times, Serif;color:orange;width:200px;">This amazing piece of HTML text is using the <code>font</code> shorthand property to set the font family, style, boldness, size, and line-height all in one. We also use the <code>color</code> property to set the text color.</p>
<p><a  style="font-size:11px;color:#999;" href="http://www.htmlcodes.me/text/">HTML text codes</a></p>

This amazing piece of HTML text is using the font shorthand property to set the font family, style, boldness, size, and line-height all in one. We also use the color property to set the text color.

More HTML Text

For more advanced requirements, check out the various HTML text and font links below.

About these HTML Codes

The HTML code on this page is provided free of charge, for you to use however you wish. Feel free to modify the code to suit your own needs.

External Style Sheets

As with any CSS code, in most cases you benefit greatly by using external style sheets. Probably the biggest benefit of external style sheets is that your code can be re-used on as many web pages as you like (i.e. you write it once, then reference it from every page on your website).

To learn more, check out this explanation of external style sheets.