TEXT FORMATTING
&
STYLE
Outline:
• Text Formatting
• Text Formatting Tags
• Align Attribute
• PRE Tag
Text Formatting
Text Formatting describes that how text should
be displayed on document by using different text
formatting tags & attributes.
Heading Tag
• Any documents starts with a heading.
• You use different sizes for your headings.
• HTML also have six levels of headings, which
use the elements <h1>, <h2>, <h3>, <h4>,
<h5>, and <h6>.
• While displaying any heading, browser adds
one line before and after that heading.
Center Tag
Use <center> tag to put any content in the
center of the page or any table cell.
• Example
<p>This is not in the center.</p>
<center><p>This is in the center.</p></center>
Result:
This is not in the center.
This is in the center.
Paragraph Text
The <p> element offers a way to structure
your text.
• Each paragraph of text should go in between
an opening <p> and closing </p> tag
Bold Tag
Anything that appears in a <b>...</b> element
is displayed in bold
<p>The following word uses a <b>bold</b>
typeface.</p>
The following word uses a bold typeface.
Italic Tag
Anything that appears in a <i>...</i> element
is displayed in italicized
<p>The following word uses a <i>italicized</i>
typeface.</p>
The following word uses a italicized typeface.
Underline Tag
Anything that appears in a <u>...</u> element
is displayed with underline
<p>The following word uses a <u>underlined</u>
typeface.</p>
The following word uses a underlined typeface.
Strikethrough Tag
Anything that appears in a <strike>...</strike>
element is displayed with strikethrough,
which is a thin line through the text
<p>The following word uses a <strike>this is
text</strike> typeface.</p>
The following word uses a strikethrough typeface.
Superscript Tag
The content of a <sup> element is written in
superscript; the font size used is the same
size as the characters surrounding it but is
displayed half a character's height above the
other characters.
<p>The following word uses a
<sup>superscript</sup>
typeface.</p>
The following word uses a superscript typeface.
Subscript Tag
The content of a <sub> element is written in
subscript; the font size used is the same as
the characters surrounding it, but is displayed
half a character's height beneath the other
characters.
<p>The following word uses a
<sub>subscript</sub>
typeface.</p>
The following word uses a subscript typeface.
Big Tag – Larger Text
The content of the <big> element is displayed
one font size larger than the rest of the text
surrounding it.
<p>The following word uses a <big>World</big>
typeface.</p>
The following word uses a big typeface.
Small Tag
The content of the <small> element is
displayed one font size smaller than the rest
of the text surrounding it.
<p>The following word uses a
<small>Hello</small> typeface.</p>
The following word uses a small typeface.
Align Attribute
You can use align attribute to write text in
different directions of your paragraph.
Attribute Value Description
Align left Specifies the
alignment/direction of
right the text within a paragraph
center
justify
Text Align Attribute - Example
<html>
<head>
<title>Align Attribute</title>
</head>
<body>
<p style=“text-align: right”>This text is in right
direction</p>
</body>
</html>
HTML Styles
• Background Style
This tag is used to set background colour.
<body style="background-color:powderblue;">
Text Colour
This tag is used to apply colour on text.
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
Font Family
This tag is used to change font family.
<h1 style="font-family:verdana;">This is a
heading</h1>
<p style="font-family:courier;">This is a
paragraph.</p>
Font Size
This tag is used to change font size.
<h1 style="font-size:300%;">This is a
heading</h1>
<p style="font-size:160%;">This is a
paragraph.</p>
Text Alignment
This tag is used to change Font position.
There four alignment
1. Right
2. Left
3. Centre
4. Justify
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>