HTML Styles

The HTML style attribute is used to add styles to an element, such as color, font, size, and more.

Example

The HTML Style Attribute

Setting the style of an HTML element, can be done with the style attribute.

The HTML style attribute has the following syntax:

The property is a CSS property. The value is a CSS value.

You will learn more about CSS later in this tutorial.

Background Color

The CSS background-color property defines the background color for an HTML element.

Example

Set the background color for a page to powderblue:

This is a heading

This is a paragraph.

Example

Set background color for two different elements:

This is a heading

This is a paragraph.

Text Color

The CSS color property defines the text color for an HTML element:

Example

This is a heading

This is a paragraph.

Fonts

The CSS font-family property defines the font to be used for an HTML element:

Example

This is a heading

This is a paragraph.

Text Size

The CSS font-size property defines the text size for an HTML element:

Example

This is a heading

This is a paragraph.

Text Alignment

The CSS text-align property defines the horizontal text alignment for an HTML element:

Example

Centered Heading

Centered paragraph.

Chapter Summary

• Use the style attribute for styling HTML elements
• Use background-color for background color
• Use color for text colors
• Use font-family for text fonts
• Use font-size for text sizes
• Use text-align for text alignment

HTML Exercises

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

HTML Text Formatting

HTML contains several elements for defining text with a special meaning.

Example

This is _subscript and superscript

HTML Formatting Elements

Formatting elements were designed to display special types of text:

• — Bold text
• — Important text
• — Italic text
• — Emphasized text
• — Marked text
• — Smaller text
• — Deleted text
• — Inserted text
• — Subscript text
• — Superscript text

HTML and Elements

The HTML element defines bold text, without any extra importance.

Example

The HTML element defines text with strong importance. The content inside is typically displayed in bold.

Example

HTML and Elements

The HTML element defines a part of text in an alternate voice or mood. The content inside is typically displayed in italic.

Tip: The tag is often used to indicate a technical term, a phrase from another language, a thought, a ship name, etc.

Example

The HTML element defines emphasized text. The content inside is typically displayed in italic.

Tip: A screen reader will pronounce the words in with an emphasis, using verbal stress.

Example

HTML Element

The HTML element defines smaller text:

Example

HTML Element

The HTML element defines text that should be marked or highlighted:

Example

Do not forget to buy milk today.

HTML Element

The HTML element defines text that has been deleted from a document. Browsers will usually strike a line through deleted text:

Example

My favorite color is blue red.

HTML Element

The HTML element defines a text that has been inserted into a document. Browsers will usually underline inserted text:

Example

HTML Element

The HTML _{element defines subscript text. Subscript text appears half a character below the normal line, and is sometimes rendered in a smaller font. Subscript text can be used for chemical formulas, like H2O:}

Example

HTML Element

The HTML element defines superscript text. Superscript text appears half a character above the normal line, and is sometimes rendered in a smaller font. Superscript text can be used for footnotes, like WWW [1] :

Example

This is ^{superscripted} text.

HTML Exercises

HTML Text Formatting Elements

Tag	Description
	Defines bold text
	Defines emphasized text
	Defines a part of text in an alternate voice or mood
	Defines smaller text
	Defines important text
	Defines subscripted text
	Defines superscripted text
	Defines inserted text
	Defines deleted text
	Defines marked/highlighted text

For a complete list of all available HTML tags, visit our HTML Tag Reference.

Источник

HTML Text Formatting

To make any document clear and readable, we need to keep in mind the text formatting of the document. The text formatting is of two types, qualitative, such as font family, and quantitative, like font size, color, and more. In HTML, different elements can be utilized for applying formatting styles to the document elements.

This post will guide about:

HTML Formatting Styles

Several HTML text formatting styles are listed below:

• Bold
• Italic
• Strikethrough
• Subscript
• Superscript
• Underline
• Emphasize
• Strong
• Small

Let’s implement some of them one by one with examples.

How to Bold Text in HTML?

The HTML “ ” tag is utilized to bold the text to gain the user’s attention towards the text.

Example
In HTML, inside the body element, add tag for the heading and

tag for some text. In between the

element, we have placed the starting tag and closing tag. The content in between these tags will be formatted to bold.

In CSS, these mentioned tags would be applied with several style properties for a better presentation.

Style All Elements

The asterisk ( * ) sign is utilized in CSS to apply all elements to the same properties. So, the “font-family” property of each element is set as “Verdana, Geneva, Tahoma, sans-serif”. This list of values is provided to ensure that if the first one is not supported by the browser, others will be applied to the elements.

Style div container

.container {
background- color : rgb ( 238 , 165 , 157 ) ;
width : 90 %;
margin: auto;
padding: 10px;
border : 3px dashed brown;
font- size : 20px;
}

• “background-color” property sets the background color of the div element.
• “width” property, with a value of 90%, sets the width of the div element to 90%.
• “margin” property with value “auto” adds equal space around an element.
• “padding” property adds spacing around the content of the div main.
• “border” property adjusts a border of width 3px, a dashed line with the color brown.
• “font-size” property sets/adjusts the size of the text to 20px.

From the below image, it is clear that the selected text is formatted in bold:

How to Italicize Text in HTML?

Oftentimes, a document needs to italicize the text to show a quote or definition. To do this, use the “ ” tag.

Example
In HTML, add the starting and closing tags of tag before and after the part to italicize as follows:

This paragraph defines how to style text as Italic < / i >. < / p >

Output

How to Make Strikethrough Text in HTML?

The strikethrough text refers to the text having a line through it. It is simple by utilizing the HTML “ ” tag.

Example
Add the starting tag and closing tag to the part of the text that is to be made a strikethrough as shown below:

This paragraph defines how to style text as Strikethrough < / del >. < / p >

Output

How to Add Text as Subscript in HTML?

The subscript is the small-size text that is displayed slightly below the text. For instance, in mathematical expressions. The HTML “” tag can be utilized to do so.

The below HTML code represents a

tag with some part of text inside the _tag:

This paragraph defines how to style text as subscript < / sub >. < / p >It can be seen from the below image that the part of text placed inside the sub beginning _{and closing tag} is formatted as subscript text:

How to Add Text as Superscript in HTML?

The Superscript is the small text that appears slightly above the normal text line. Moreover, to make a text superscript HTML “ ” tag is utilized.

Example
Here is the code representing the

element. Some part of the paragraph is within the tag as shown in the below code:

This paragraph defines how to style text as superscript < / sup >. < / p >The selected text part is successfully formatted as superscript:

How to Underline Text in HTML?

Sometimes, it is necessary to mark some text as underlined. For this purpose, a text formatting element “ ” is supported in HTML.

Example
Below HTML code shows

element with some part resides inside the starting and closing tags:

This paragraph defines how to style text as underline < / u >. < / p >

Output

How to Make Emphasize Text in HTML?

In most of the documents, to draw special attention from the readers, the text is formatted to emphasize. The HTML “ ” tag is used to make the text italic. The readers stress their voices when they read the emphasized text.

Example
Here, the starting and closing tags of element are used in the paragraph:

This paragraph defines how to style text as Emphasize < / em >. < / p >

Output

How to Make Text as Strong in HTML?

The HTML “ ” element is used where it is required to show importance and urgency through text. It has a starting tag and a closing tag .

Example
Let’s observe the working of element by implementing it in HTML:

This paragraph defines how to style text as strong < / strong >. < / p >

Output

How to Make Small Text in HTML?

The HTML “ ” element is used in making the font size small.

Example
The below code section contains

element with some content and some part of it resides between the tag:

This paragraph defines how to style text as small < / small >. < / p >

We have discussed different HTML formatting styles and their applications.

Conclusion

Text formatting plays a vital role in making a document clear and readable. A well-formatted document keeps the user’s attention and helps in understanding. To make an HTML document well-formatted there are several formatting tags such as “ ”, “ ”, “ ”, “ ”, and more that can be utilized accordingly. This blog has explained the elements to format text in HTML with practical examples.

About the author

Sharqa Hameed

I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.

Источник

Читайте также:  Php переменная только числа