HTML Text Formatting And Styles

HTML provides the ability for formatting text just like you can do in MS Word, or any other text editing software.


HTML text formatting


Formatting elements were designed to display special types of text:

bold <b>

italic <i>

underline <ins>

marked <mark>

superscript <sup>

subscript <sub>

small <small>

deleted <del>

Example:

<!DOCTYPE html>
<html>

<head>
<title>HTML Text Formatting</title>
</head>

<body>

<p><b>The text can be bolded.</b> </p>
<p><i>The text can be italic.</i></p>
<p><ins>The text can  be underlined</ins></p>
<p><mark>The text can be highlighted</mark></p>

<p>The normal text
<sup>This text will be super scripted</sup>
The normal again</p>

<p>The normal text
<sub> The text can be subscripted </sub></p>
<p>Normal Text <small> Smal Text </small></p>
<p><del> The text can be deleted</del></p>

</body>

</html> 


Output:



















What else you can do with the text?
HTML Styles

Setting the style of the HTML element can be done with the style attribute (more about style attribute you can find in my previous post). 

a) Changing colour (to see more about HTML colours click here and here.) 

b) Changing font family (the CSS font-family property specifies the font for an element. The HTML <font> tag is not supported in HTML5. You should use CSS instead.)

c) Changing the text size.

d) Changing the text position.

Example:

<!DOCTYPE html>
<html>

<head>
<title>HTML Text Formatting</title>
</head>

<body>

<p style="color:blue">The text can be blue. </p>

<p style="font-family:Arial"> The text can be in Arial </p>

<p style="font-size: 55"> The size can be changed by style tag. </p>

<p style="text-align:center">

This position is changed by style tag.</p>

</body>
</html> 
Output:


Enjoy coding!

Comments

Post a comment

Hi, thank you for taking the time to leave a comment :)

Popular Posts