HTML Editing-HTML Codes, HTML Tags to make your Blog attractive
Previously I have posted an article on customizingthe navigation bar of a blogger Template and another article on Robots.txt. In this article I am going to explain the HTML codes, Tags mostly used to set, Margins, Padding, color, border etc. We need these frequently as these are the settings which we need to change mostly. These are very useful to make the appearance of our blog better and attractive. The attractive look of a blog or website is very important to attract the customers to visit again. The procedure of step by step modification of HTML file is given below -
Scales and Measurements used in HTML Coding
Pix - One px is equal to one dot.
Pt - are much like pixels, One point is equal to 1/72 of an inch.
Em – Ems are scalable in nature, and 1 em is equal to 12pt.
First of all login to blogger dashboard, click Template>Edit HTML, The HTML document will open -
Set Margins and Padding by Editing HTML
Pix - One px is equal to one dot.
Pt - are much like pixels, One point is equal to 1/72 of an inch.
Em – Ems are scalable in nature, and 1 em is equal to 12pt.
First of all login to blogger dashboard, click Template>Edit HTML, The HTML document will open -
Margin and Padding are commonly used properties for spacing html elements. A margin is the space outside the page, whereas padding is the space inside the page. There are a number of margins and paddings in an HTML document so first of all you have to go to the margins or paddings which you actually want to edit. For this purpose use the HTML search box. To open the HTML search box click anywhere inside the HTML document, Press CTRL+F, Write ‘margin’ or padding inside the search box and press ‘Enter’. As I have already said there are a number of margins and Paddings in an HTML document therefore you may need to press ‘Enter’ key more than once to find the string you actually want to edit -
(i) In HTML margin or padding is measured in px, pt. em % or auto. Auto means-‘0’.
#div {
-top: 0;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 5px;
}
-top: 0;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 5px;
}
(ii) Predefined Sequence of margin is “top, right, bottom, left” so the above can also be defined in a single line as follow –
#div {
margin:0 5px 5px 5px;
}
(The margins will be set to Top Margin-0, Right Margin -5px, Bottom Margin-5 px and Left Margin-5px). Result of both the above will be the same.)
Set Borders and border colors by Editing HTML
Borders are defined as thin, thick, medium or a value is set in px. If we set it as default, it will be set as medium because the default value is set to medium. Border styles are solid, dashed, dotted, double and default. Default style is set to none.
#div {
border-width: 10px;
border-style: solid;
border-color: green;
}
Predefined Sequence of margin is “width, style, color” so the above can also be defined in a single line as follow –
#div {
border:10px solid green;
}
(The the borders and border colors will be set to width-10px, style-solid, color-green. Result of both the above will be the same.)
Colors are defined by name, hex or rgb proportions. A css/html color code may also be used. For color code help you can visit w3school,s colorpickerhere.
HTML
Editing-HTML Codes, HTML Tags make your Blog attractive, Set Borders and border
colors by Editing HTML, Set Margins and Padding by Editing HTML, Scales and
Measurements used in HTML Coding, How to Edit blogger HTML Document, blogger
html code, blogger html templates, blogger tutorial for beginners, blogger
custom css, blogger css codes, create border using css, div tag in html, css,
style in html, html tutorial for beginners, html code, blogger, web page using
html and css, border, inset border, outset border, html5 tutorial, html border,
html background color, inline css in html
Tags:
border in blogger
color
HTML Basics
HTML Editing
HTML Learning
HTMLEditing for Margins
Padding