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:

I have been working in IT since 1999 and I enjoy the challenges it brings me. I love developing websites with WordPress. I spend a lot of time helping out in wordpress.org forums. I have been writing tutorials since 2011. Now I am learning how to manage my own VPS "Virtual Private Server.

 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)

We use cookies in order to give you the best possible experience on our website. By continuing to use this site, you agree to our use of cookies.
Accept
Reject
Privacy Policy