What Are CSS Style Border, Padding and Margin When Editing Blogger Template?

Hi bloggy readers,
It seems interesting to learn how CSS style (IDs, classes, properties, and values) can actually work like a magic if we know how to use it properly in the field of HTML programming. And as a serious blogger, we must have the ability to understand how to work with CSS codes. Even though your blog topic is about cooking, fishing, or anything outside blogging or web designing, it's a must for you to be familiar with CSS and HTML language. So now, let's learn how to be familiar with CSS code in the simple way, so in the future it may come in handy for your blogging experience.

CSS languages are considerably wide and big if it refer to the uses of IDs, classes, properties and values to control every element in your blog layout. That's why in this post, i want to narrow down the topic about CSS codes and just focusing on the main topics about:

• Border
• Margin
• Padding

Before we go further to the main topic about border, padding, margin now let's start this article to the basic part of CSS, the meaning of CSS itself.

What Exactly is CSS and the history behind it?

CSS which stands for Cascading Style Sheets, can be defined as a pack of commands (IDs, classes, properties and values) written in mark up language, which is created to differ one element from another elements (fonts, layout, etc) in particular styles.

Used to be, when static websites are popularly utilized to create web pages around internet, the use of CSS hasn't been utilized yet on those websites. As a time passed, and the world of internet is becoming bigger and bigger over the time, many website owners begin to realize the importance of using CSS to control every page on their websites with one simple command, the CSS itself, without being bothered to create the style for every page on their websites, which can be exhausting to do.

And there comes a blog, which i can describe as the revolutionized version of website. Now by adding only one CSS style for your blog, every page of your blog, from the homepage and article pages, can be easily controlled using the CSS.

How to Create CSS for ID or class?

For example, if i want to make a pack of commands or CSS that will control the appearance of post title, say, i would name it as post-title. So the anchor or class of the CSS should be written like this:
And then, i want to set the particular styles for my post title. The following properties (e.g., color, font-weight, background, etc) are the pack of commands which i want to add to the post-title. So, that's what we call as a CSS's class. Now in order to make that CSS class above works and appears directly to the HTML-based web page, we must firstly wrap up the new element, by using the div class codes, both opening and closing tags.

For example, now look at the div class tag to make the CSS class above (post-title) appear in our blog:As you can see in that code above, the "Element" has been wrapped up by using the 2 line div class codes in order to apply the CSS class in the web page.

What are Border, Padding and Margin in CSS style?

Okay, now proceed to the next part of this tutorial, i will explain to you about what is padding, border and margin in CSS programming?.

Border

Border is a part of CSS language that can be used to make a line border around the corner of the element/column. Now look at the picture below regarding the types of border that can be applied to the CSS command.
By adding the property and value, padding:10px (for example) inside the CSS command area, you will create a 10 pixel space inside the element. By adding the property left besides the padding property, for example: padding-left:10px, you will create a space only on the left area inside the element.

Margin

Margin is the part of CSS language property that can be used to create a space outside the element. Unlike padding, margin will allow us to make a space outside the element, not inside the element. See the example through the picture below! As you can see in that picture above, margin will create an extra space in order to separate on element to the other element, in this case, to separate the Recent Post widget from colliding with the Recent Post widget. By adding the property margin:10px inside the CSS area, i will create a 10 pixel space outside the element.

Similar with the padding command, by adding the specific property left besides the margin property, for example, margin-left:10px, i am about to create a 10 pixel space only on the left side of element.

Okay, that's little about CSS tutorial that i can share to you right now. Next time, i will digg more about CSS for you. Thanks for reading this article. If you feel this article helps you understand what CSS really is, feel free to share this article to your friends or family around the Twitter land or Facebook pages.