Connect with us

Before You Write Your First Post On Blogger, Must Understand These Basic HTML Tags & CSS Properties

Before You Write Your First Post On Blogger

Blogger

Before You Write Your First Post On Blogger, Must Understand These Basic HTML Tags & CSS Properties

HTML is the standard markup language for designing webpages & CSS is a langauge that describes the style of HTML document. Though the Blogger or WordPress are very advance platforms for blogging like everything is available on Editor, but the question is, what a normal blogger has to do with HTML & CSS?

We will explain to you some of the important HTML tags & CSS properties that are used in Blogger  and you will come to know that why their understanding is important for everyone.

 

How To See HTML Code Of Post?

  • There are two views of HTML Editor i.e Compose & HTML.
  • Compose is a normal or front view where you write & compose your post.
  • HTML view contains the HTML code of a post. You switch to HTML view when you have to add/remove code or HTML tags.
  • Click the Pencil icon at your top-left to expand the view options.
Before You Write Your First Post On Blogger 1
  • Click “HTML view”. You can see the HTML tags and CSS styling.
  • To go back to normal view click “Compose view”.
Before You Write Your First Post On Blogger 2

 

Important HTML Tags & CSS Properties

  • Though there are so many HTML tags that are generated when you write a post, but we will explain to you the important ones, which you have to understand.

 

1. <br />

  • When you hit Enter, this HTML tag is generated. It means new line. When you hit Backspace it is deleted.
  • Sometimes though we think that we have deleted the newline by hitting Backspace, but some <br />’s remain in the code. So in that case you have to delete the extra <br />’s from HTML code.
  • When we upload image, sometimes we don’t get any space to Enter a newline below, in that case you can go to HTML code and insert <br /> below that image, so that you will be able to continue to write below that image.

 

Blogger Templates

 

2. <b></b>

  • This tag is for doing bold. Though we can bold from Editor by clicking B, but sometimes the boldness doesn’t remove from Editor, so you need to remove the <b></b> tags from HTML code.
  • <b> is a starting tag whereas </b> is the ending tag.
  • E.g. <b> Anything text between these tags will get bold </b>

 

3. <span></span>

  • Span is a container that holds text, images in between <span> …… </span>. Whenever you add style to the text from the Editor like Bold, Font-size, Color or Underline etc, that text comes in between span tags in HTML code.
  • E.g. <span style=”font-size: x-large; color: red;”> Use of the Span Tag </span>
  • Again, when you write posts there is possibility that Editor might generate extra <span> which could remain in HTML code.
  • It is important to delete the extra spans like extra </br>’s.

 

4. <div> </div>

  • Div tag is used as a container for HTML elements, text, images Like this:
<div id=”maincontainer”>
<h2>This is a heading in a div element</h2>
<p>This is some text in a div element.</p>
</div>

 

5. Style

  • As we wrote above that when we style text, that text comes between <span></span> tags or <div></div> tags in the HTML code. You can give style to any HTML element like here you can see that heading h3 has been aligned left using style. “<h3 style=”text-align: left;”>”
  • HTML uses CSS properties to add style.

 

Here is the format:
  • <span style=”color: #000000; font-size: large; text-decoration: underline”> Understanding CSS properties </span>

 

Customize The Style

  • On Blogger’s Editor we’ve got only fixed font sizes like Largest, Large, Small, Medium etc, but what if you want to add custom font-size of your choice.
Before You Write Your First Post On Blogger 3

 

For that you need to go to HTML code and find that line to add your custom font-size. For example, we have added Largest font-size from the Editor and now we want to change it to font-size of our choice.

  • <span style=”font-size: x-large;”>What People Say</span>
  • <span style=”font-size: 150px;> What People Say</span> //Customized Version

 

Similarly you can customize lot of other CSS properties in HTML code.

If you like this post then don’t forget to share with other people. Share your feedback in the comments section below.

 

 

2 Comments

2 Comments

  1. Mountain Star Transportation

    May 17, 2019 at 5:59 pm

    asd

  2. Anonymous

    August 7, 2020 at 6:50 pm

    it's pain in the ass to remove all these unnecessary codes that are added by switching between Compose and HTML.

Leave a Reply

Your email address will not be published.

More in Blogger

Advertisement
Advertisement
Free Guide to start a blog and make passive income
Download Cheap Website Themes
Get Namecheap Shared Hosting With Free Domain
To Top