HTML Headings
HTML Headings usually contain a title or a main topic of a certain content.
HTML Headings are block-level elements.
Example:
<!doctype html><html><head><title>Heading Example</title></head><body><h1>Heading 1</h1><h2>Heading 2</h2><h3>Heading 3</h3><h4>Heading 4</h4><h5>Heading 5</h5><h6>Heading 6</h6></body></html>
Output:
As you can see on the example given above the elements used are the <h1>, <h2>, <h3>, <h4>, <h5> & <h6>
You should have noticed that the size of a heading depends on its corresponding number after the h.
And the lower the larger the font-size.
⚠Note: You can only use tags from <h1> to <h6>.
Aligning HTML Headings
To align headings we need to use the text-align CSS property with values left, center or right.
Example:
<!doctype html ><html><head><title>Heading align</title></head><body><h1 style="text-align: left">I am aligned left.</h1><h1 style="text-align: center">I am aligned center.</h1><h1 style="text-align: right">I am aligned right.</h1></body></html>
Output:
Heading Colors
To change the color of our HTML Headings we simply need to use inline styling with the CSS color property and a color value.
Example:
<!doctype html ><html><head><title>Heading Color</title></head><body><h1 style="color: blue">I am Blue.</h1><h1 style="color: red">I am Red.</h1><h1 style="color: green">I am Green.</h1></body></html>
Output:
Post a Comment