HTML Tutorial

Chapter 5 – HTML Text Styles and Formatting

Welcome to Chapter 5 of HTML Tutorials. In the previous tutorial, we learnt about HTML line breaks and horizontal line.

In this tutorial, we shall learn how can we add styles and formatting on our HTML textual elements.

HTML “style” is a CSS (Cascading Style Sheet) attribute which is used to add custom styling and formatting to the HTML elements. In this tutorial, we will not go deep into CSS as it is a separate topic in depth which is used for styling all types of HTML elements such as DIVs, Images, Links, Texts etc.

In this tutorial, let us learn how can we add styles and formatting to text elements.

Styling Syntax:

To set the style of an element, following HTML syntax is to be used:

<tag style=”CSS property:CSS value;”>

An example is shown below for reference:

<div style=”font-size:100px;”>

Multiple properties can be added as shown in the below example:

<div style=”font-size:100px;font-weight:100;”>

Styling Properties:

Let us go through some of the properties for styling textual elements.

You can try running these code snippets on our Online HTML Editor to view the output.

1. Font Style
   To apply a particular font on the a text, you can use the “font-family” CSS property as shown below
   HTML: <p style=”font-family:verdana”>This is in Verdana Font</p>
   Output:

   This is in Verdana Font

2. Font size
   To set a specific font size for a textual element, you can use the “font-size” CSS property as shown below:
   HTML: <p style=”font-size:25px”>This is Large text</p>
   Output:

   This is Large text

3. Font color
   To set a specific font color for a textual element, you can use the “color” CSS property as shown below:
   HTML: <p style=”color:red”>This text is in red color</p>
   Output:

   This text is in red color

4. Background color
   To set a background color for any HTML element (irrespective of whether it is text or not), you can use “background-color” CSS property as shown below:
   HTML: <p style=”background-color:cyan”>The background is cyan</p>
   Output:

   The background is cyan

   You can either use specific color names or hex color codes or RGB color codes to set the color in font color and background color properties.

5. Aligning Text
   To align a text either towards left, right or center, you can use the “text-align” CSS property as shown below:
   The text-align property can have value as “center”, “left” or “right” as per your needs.
   HTML: <p style=”text-align:center”>The text is aligned towards the center”</p>
   Output:

   The text is aligned towards the center

Text Formatting:

Now, let us check how you can do Text formatting using HTML

1. Bold:
   To make a specific text look bold, you can use <b> tag as shown below;
   HTML: This is <b>Bold Text</b>
   Output: This is Bold Text


2. Italics
   To display text in italics, you can use <i> tag as shown below:
   HTML: This text is in <i>Italics</i>
   Output:This text is in Italics


3. Underline
   To display text in underline format, you can use <u> tag as shown below:
   HTML: This text is <u>having underline.</u>
   Output: This text is having underline.


4. Superscript
   To display text as a Superscript, you can use <sup> tag as shown below:
   HTML: This text is ^Superscript
   Output: This text is ^Superscript


5. Subscript
   To display text as Subscript, you can use <sub> tag as shown below:
   HTML: This text is _Subscript
   Output: This text is _Subscript


6. Strikethrough
   To display a text in strikethrough format, you can use <s> tag as shown below:
   HTML: This text is <s>Deleted</s>
   Output: This text is Deleted

Hope you liked reading this tutorial, see you in next chapter to explore HTML in further details.

Next Chapter Chapter 6 - HTML Comments

Follow Me on Social Media

Advertisement

FREE Sales CRM Software

Fully customizable CRM Software for Freelancers and Small Businesses

Signup for Free

Sign up for DigitalOcean Cloud

Get FREE $200 credits, deploy your hobby projects for Free

Sign up for Hostinger Cloud or VPS plans and get upto 20% Discount