HTML Styles and Formatting

HTML Styles:

Styles in HTML are basically rules that describe how a document will be presented in a browser. Style information can be either attached as a separate document or embedded in the HTML document.

1. Background Color
The CSS background-color property defines the background color for an HTML element. This example sets the background color for a page to grey:

CODE:

 

Result:

 

2. Text Color:
The CSS color property defines the text color for an HTML element:

CODE:

 

Result:

 

3. Fonts:

The CSS font-family property defines the font to be used for an HTML element. To define the fonts of words. For example, Verdana, italics, classic, courier, etc.

CODE:

 

Result:

4.Text Size:
The CSS font-size property defines the text size for an HTML element:

CODE:

 

Result:

 

5. Text Alignment:
The CSS text-align property defines the horizontal text alignment for an HTML element:

CODE:

 

Result:

HTML Formatting:

HTML Formatting is a process of formatting text for a better look and feel. There are many formatting tags in HTML. These tags are used to make text bold, italicized, or underlined. There are almost 14 options available that how text appears in HTML and XHTML.

Formatting elements were designed to display special types of text:

–   <b> –   Bold text
–  <strong> –   Important text
–  <i> –   Italic text
–  <em> –   Emphasized text
–  <mark> –   Marked text
–  <small> –   Small text
–  <del> –   Deleted text
–  <ins> –   Inserted text
–  <sub> –  Subscript text
–  <sup> –  Superscript text

 

1.Bold Text :
Anything that appears within <b>…</b> element is displayed in bold as shown below

CODE:

 

Result:

 

2. Important text:

The HTML <strong> element defines strong text, with added semantic “strong” importance.

CODE:

Result:

3. Italic Text
The HTML <i> element is a physical element, which displays the enclosed content in italic font, without any added importance. If you write anything within <i>…………</i> element, it is shown in italic letters.

CODE:

 

Result:

4. Emphasized text:

The HTML <em> tag is a logical element, which will display the enclosed content in italic font, with added semantics importance.

CODE:

 

Result:

5. HTML Marked formatting:

It is also possible to highlight a text in HTML using the <mark> tag. It has an opening tag <mark> and a closing tag </mark>.

CODE:

 

Result:

6. Making text smaller :

The <small> element is used to make the text smaller. The text that needs to be displayed smaller should be written inside <small> and </small> tag.

CODE:

 

Result:

7. Striking through the text :

The <del> element is used to strike through the text marking the part as deleted. It also has an opening and a closing tag.

CODE:

 

Result:

8. Adding a text: 
The <ins> element is used to underline a text marking the part as inserted or added. It also has an opening and a closing tag

CODE:

 

Result:

9. Subscripted :

The content of a _… 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.

CODE:

Result:

10. Superscripted :

The content of a ^… 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.

CODE: