contact@typicalcoding.com
+91 740 032 5771

HTML Basics: Styling and Formatting

May 8, 2021
Amardeep Subadar

Change Font Color

In HTML we can also do styling to our elements. Suppose, we want to make our H1 tag red color, H2 tag blue color and H3 tag green color. For this we need to use an attribute style, after within “…” here we can put our styling codes. Below we’ve shared the HTML code for this.

<h1 style=”color:red;”>Heading 1</h1>

<h2 style=”color:blue;”>Heading 2</h2>

<h3 style=”color:green;”>Heading 3</h3>

Heading 1

Heading 2

Heading 3

Change the Background Color

And if we want to change the background color of our HTML element, then we can use background-color attribute.

<h1 style=”background-color:Blue; color:red;”>Heading 1</h1>

<h2 style=”background-color:green; color:blue;”>Heading 2</h2>

<h3 style=”background-color:red; color:green;”>Heading 3</h3>

Heading 1

Heading 2

Heading 3

Change Font Size and text align

In order to change the font size of an HTML element, we can use font-size attribute. For example

<h1 style=”font-size: 20px;”>Heading 1</h1>

Or

<h1 style=”font-size: 40%”>Heading 1</h1>

Similarly, to align the text in HTML element, used text-align attribute.

<h1 style=”text-align:center;”>Heading 1</h1>

<h2 style=” text-align:left;”>Heading 2</h2>

<h3 style=” text-align:right;”>Heading 3</h3>

Heading 1

                                           Heading 2

                                            Heading 3

Here, we’ve shared only few examples of how you can do formatting and styling to your html elements. Later we will show you in deep with all the CSS properties.

HTML Quotation

While writing any blog post in your website, we often required to add some quotes between our content, in order to make it more attractive. So, in those cases you can use <blockquote> tag. These tags defines the lines that are been taken from other sources. For example:

<blockquote cite=”https://typicalcoding.com”>

Let us do your development and designing stuff.

<blockquote>

Another html tag is <q>, which is called as short quotation. For example:

<p>This is an example for <q>html q tag.<q></p>

Output:

This is an example for “html q tag”.

HTML Comments

While writing any codes, it’s always an good practice to add comments wherever needed. If you add comments in your codes, then it becomes somewhat easy for other developers to understand your code and make any changes if required. And even sometimes it also helpful for yourself also. Because often once you write any codes, and again you open that same code after a long time, it also becomes helpful for you as well to recall your old written codes and make changes accordingly.

To add comments in HTML you need to add double backslash and close it again with double backslash after you finished writing your comments. For example

//This is slider container//

……. Some HTML codes

//This is products container//

.. . ….. . Some HTML codes

Leave a Reply

Your email address will not be published. Required fields are marked *