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)