How to set text color & font style in HTML ?

How to Style Text in HTML?

Last Updated : 30 Jul, 2024

The HTML style attribute adds styles to an element, such as color, font, size, and more. Here, we are going to learn how to style Text in HTML.

These are the following methods:

Table of Content

Using CSS Styles
Using Element for Styling

Using CSS Styles

The <b> tag makes text bold, while <strong> adds semantic importance, typically displaying as bold by default. Incorporating these tags improves readability and user engagement. The <p> tags enclose paragraphs of text, while inline styles defined with the style attribute modify their appearance. By specifying properties like color and font size directly within the tag, precise styling adjustments are achieved without the need for external CSS files.

Example: The example shows the above-explained approach.

HTML

<!DOCTYPE html>
<html>

<body>

    <p>I am normal</p>
    <p style="color:red;">I am red</p>
    <p style="color:blue;">I am blue</p>
    <p style="font-size:50px;">I am big</p>
    <p>Hello <b>GFG</b></p>
</body>

</html>

Output:

Screenshot-(232) — Using inline css

Using Element for Styling

<strong> is used to semantically indicate strong importance.
<em> is used to semantically indicate emphasis.
<u> is used to underline text.
<b> is used for bold text styling, similar to <strong> but carries no semantic meaning.

Example: The example shows the above-explained approach.

HTML

<!DOCTYPE html>
<html>

<body>

    <p>I am normal</p>
    <p><strong>I am strong</strong></p>
    <p><em>I am emphasized</em></p>
    <p><u>I am underlined</u></p>
    <p style="color:red;">I am red</p>
    <p style="color:blue;"><b>I am blue and bold</b></p>
    <p style="font-size:50px;">I am big</p>
    <p>Hello <b>GFG</b></p>

</body>

</html>

Output:

Screenshot-(235) — Using internal styling

How to set text color & font style in HTML ?

Anonymous

Improve

Article Tags :

Similar Reads

How to Make Text Italic in HTML?

To make the text italic in HTML, we can either use <i> or <em> tag. Both tags make the text italic but used for different purposes. The <i> tag is used to make the text italic without semantic meaning while <em> makes the text italic with semantic importance, improving access

How to move a text in HTML ?

Moving text in HTML refers to changing its position within the document's layout structure. This can be achieved by adjusting HTML elements' attributes such as style or class and <marquee> tag to modify their positioning, or by dynamically manipulating the HTML structure using JavaScript. Synt

How to Wrap Text in HTML?

To wrap text in HTML, you can use the default behaviour of block-level elements like <p>, <div>, and <h1>, which automatically wrap text to fit within their parent container. For more control over text wrapping, you can use CSS properties like word-wrap, white-space, and overflow-w

How to set text color & font style in HTML ?

In this article, we will learn how to set text color & font style in HTML. The <style> tag in HTML helps us to set the text color & font style in HTML. This modification includes changing font size, font family, font color, etc. Not only the text but also we can change the style of a b

How to Align Text in HTML?

We can use align attribute in HTML to align text to the left, right, and center. This attribute was used in older versions of HTML but it is deprecated in HTML5. We can change the alignment of the text using the text-align property for modern and flexible text alignment. 1. Align Text using align at

How to set the size of textarea in HTML ?

In this article, we will discuss how to set the size of the textarea in HTML. The <textarea> tag in HTML defines a multi-line plain-text editing control. A text space will hold an infinite range of characters, and therefore the text renders in a set-width font (usually Courier). In the below c

How to set smaller text using HTML?

To create smaller text in HTML5, use the <small> tag. This element is designed specifically to reduce font size, providing a straightforward method to display text in a smaller font within web documents. Syntax:<small> Content... </small>Example:Â The following is the explanation of

How to Highlight Text in HTML?

Highlighting text in HTML can be done in various ways, allowing you to draw attention to important content. The most straightforward method involves using built-in HTML tags, but you can also achieve custom highlights using CSS styling for more control over the appearance. These are the following ap

How to italicize text in CSS ?

Here are the approaches to italicize text in CSS: Using the font-style PropertyThe CSS font-style property is the most straightforward way to italicize text. [GFGTABS] HTML <html> <head> <style> .italic-text { font-style: italic; } </style> </head> <body> <p cl

How To Edit Text in HTML Paragraph?

To edit the text in an HTML paragraph, you can do it by directly editing the HTML file or dynamically using JavaScript or by using contenteditable Attributes. Directly Editing the HTML FileThe simplest way to change the text of a paragraph is to edit it directly in the HTML file. This is useful when