CSS3 Column Property in Urdu & Hindi Video Tutorials free

CSS3 should be the first priority for web designers to learn in order to get in touch with the fancy website layouts. I’ve previously sharedcomplete CSS tutorials with you and also I shared some drop down menus in CSS3. However, now this is time for taking some steps to learn the latest properties included in CSS. So we can learn as many properties as we want, there is no limit for this. In today’s video tutorial, you’ll learn how to use the column property in CSS. Here is a video tutorial in which you can easily learn this thing in Urdu language and also in Hindi.

Let’s start watching the video first and then I’ll explain it further.

So having watched the video you’ve come to know about this new property in CSS, however, columns are mostly used in newspapers and books. so you may have seen them in books or magazines. But here in websites we used to create columns in HTML div tags, but now you don’t need that old traditional practice, you can now create columns by just using CSS property. Here is the syntax of using this property in web pages.

<style type=”text/css”>

column-count:3;

-webkit-column-count:3;

-moz-column-count:3;

</style>

the above one is the simple syntax of using columns in a web page or separating the content into columns in CSS. However, you can also add more attributes of column property itself, observe below examples:

<style type=”text/css”>

column-count:3;

-webkit-column-count:3;

-moz-column-count:3;

column-rule:5px solid green;

-webkit-column-rule:5px solid green;

-moz-column-rule:5px solid green;

column-gap:5px;

-webkit-column-gap:5px;

-moz-column-gap:5px;

</style>

In the above example we used the rule for the column which adds a border between columns, you can increase the column values from 3 to any value you want for example 2, 5, 8 , 10 etc. And the column-gap property is for creating the gap between two columns or the specified columns. And keep in mind that the -webkit- extra attribute is used for displaying the property in chrome browser and the -moz- is for Mozila firefox, because this property is not supported directly by all major browsers, so you nee do add the attributes for displaying it by your choice.

Share your thoughts in comment section about this great property and also share this post with all of your friends.