May 062015
 

Last Updated: June 18, 2016

KompoZer Padding Tutorial shows you how to add padding to your website. This tutorial also shows you how to add a HTML paragraph tag to align the text.

Latest News: I have added another link to the menu below.

In this lesson you will learn how to add padding and set up a <p> </p> HTML tag. When you write online you normally assign the <p> </p> tag to paragraphs and you align the text in between.

KompoZer Padding Tutorial Steps

Step 1 ) The following image Css Stylesheets -> Box tab shows you to set up the Padding’s options.

  • Width = changed to 680px (This value had to be adjusted because of the following 5px padding.)
  • padding-right: 5px;
  • padding-left: 5px;

kompozer-padding-mainbody

Step 1-1 )  The following image shows you the Style rule for #mainbody id.

kompozer-padding-mainbody-css-general

Step 2 ) Click on the CSS Editor icon to create a <p> paragraph rule. The following image CSS Stylesheets shows you what you need to select to create a paragraph rule.

In this example I selected style applied to all elements of type. In the drop down menu I selected p (Paragraph) type.

kompozer-mainbody-paragraph-rule

Step 3 ) The following image CSS Stylesheet -> General shows you the new P element added with the CSS code. This element works in the same manner as an id.

What this means is as follow, from now on when ever you add a paragraph to your website it will be formatted according to the following CSS style.

P css style code:

p{
text-align: left;
}

kompozer-padding-mainbody-p-style

Step 4 ) The following image illustrates the 5px padding added to the div tag. You can see the 5px gap between the border and the words.

Note: You can add this padding to all the other div tags by following the same instructions as above.

kompozer-padding-mainbody-5px

Step 5 ) The following image shows you the final results with padding and paragraphs aligned to the left. Notice how I added some dummy text for you to view the results. The template is starting to take shape.

kompozer-padding-mainbody-layout

Click on the following URL Right Sidebar Style to continue.

Go Back To KompoZer Tutorial List:

Manuel Ballesta RuizManuel Ballesta Ruiz is a web developer, Blogger and WordPress Enthusiast.

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(required)

(required)

The following GDPR rules must be read and accepted:
This form collects your name, email and content so that we can keep track of the comments placed on the website. For more info check our privacy policy where you will get more info on where, how and why we store your data.