HTML5 and CSS3 Fundamentals – Block Spacing

How to Use Block Spacing in HTML

Introduction

In this class, we will learn how to use page layouts. After this class, you will know how to set your web page layout and why it’s essential in web development. So, let’s dive in and start learning the basics of HTML page layouts.

The content on your webpage may be of different topics and subjects. This requires you to use multiple columns so that each content is distinct from each other. A good web developer should know how to differentiate different sections of a web page. It makes your website to be usable. Remember, users would like to visit a website that has content which is well arranged.

That’s why knowing how to arrange web pages using HTML layouts becomes necessary for any website developer—who would like to create a usable website. So, do you now understand why it’s imperative that you learn how to use HTML layouts? Fantastic. How do we do page layouts in HTML? Let’s dig in and find out.

Using the <DIV> Elements

The <DIV> HTML tag is a basic layout tool that specifies the division or a section of an HTML page. It’s basically used to group related content together. Once these content has been grouped together, we can go ahead and assign different formatting for each content using CSS.

For instance, the HTML code below shows creates two sections or blocks of text that will be placed in 2 different paragraphs.

<DIV ID=”block1”>

<P>

Welcome to Stone River eLearning.

</P>

<DIV ID=”block2”>

</DIV>

<P>

Stone River eLearning is an Online Platform that avails you any course at your doorstep

</P>

</DIV>

In the above example, we have used the <DIV> element to create 2 blocks of text that are written in 2 different paragraphs. Inside each block of text (In this case the paragraph, we can apply different formatting features such as headings and spacing).

With this background information about the <DIV> tag, let’s dig in and find out how CSS can help you format your blocks of text.

How to use <DIV> and CSS tags to format an HTML Page Layout

CSS can help you specify the height and width of each block of text. In the earlier example, we learnt how to use the <DIV> tag to group related content together.  Suppose you’d like to specify the width and height of each paragraph, here’s is how you can achieve this in CSS.

<STYLE>

DIV {

Width: 40px;

Height: 40px;

}

</STYLE>

In the above example, each block of text or paragraph in our case will have a width of 20 pixels (Of course, you can specify the measurements in centimeters, inches or you can use percentages to indicate the height and width of each section of your content, just the same way you do with the font sizes).

Now, suppose you’d like each paragraph or block to have a different width and height, how can you achieve this? Well, it’s pretty simple. You’ll use the id property of the <DIV> tag to specify each width and height for the different sections of your content. In our case we used “block1” and “block2”.

Here’s how you can specify the different width and height for your content:

<STYLE>

DIV {

Width: 40px;

Height: 40px;

}

#block1 {

Width: 30px;

Height: 45px;

Background-color: red;

}

#block2 {

Width: 50px;

Height: 30px;

Background-color: green;

</STYLE>

In the above example, we have set our first block of text to have a width of 40 pixels and height of 40 pixels. Notice that we have also set its background color to red. For the second block of text, the width is 50 pixels and the height is 30 pixels. Its background color is green.

You can also specify the different margins and paddings for each section of content that has been defined using the <DIV> tag. Of utmost importance to make a distinction between margins and padding as used in CSS.

Well, a margin is usually the space that’s outside of or a space that’s between the elements in your web page while padding is the space that’s around or inside the elements from the text to the border of your web page.

To specify different margins and paddings for your web page, here’s how you will write the code in CSS:

DIV {

Width: 40px;

Height: 40px;

}

#block1 {

Margin: 20px;

Padding: 15px;

Background-color: red;

}

#block2 {

Margin: 15px;

Padding: 15px;

Background-color: green;

</STYLE>

GET YOUR FREE PYTHON EBOOK!