পৃষ্ঠাসমূহ

Search Your Article

CS

 

Welcome to GoogleDG – your one-stop destination for free learning resources, guides, and digital tools.

At GoogleDG, we believe that knowledge should be accessible to everyone. Our mission is to provide readers with valuable ebooks, tutorials, and tech-related content that makes learning easier, faster, and more enjoyable.

What We Offer:

  • 📘 Free & Helpful Ebooks – covering education, technology, self-development, and more.

  • 💻 Step-by-Step Tutorials – practical guides on digital tools, apps, and software.

  • 🌐 Tech Updates & Tips – simplified information to keep you informed in the fast-changing digital world.

  • 🎯 Learning Support – resources designed to support students, professionals, and lifelong learners.

    ✔ Latest world News 

     

Our Vision

To create a digital knowledge hub where anyone, from beginners to advanced learners, can find trustworthy resources and grow their skills.

Why Choose Us?

✔ Simple explanations of complex topics
✔ 100% free access to resources
✔ Regularly updated content
✔ A community that values knowledge sharing

We are continuously working to expand our content library and provide readers with the most useful and relevant digital learning materials.

📩 If you’d like to connect, share feedback, or suggest topics, feel free to reach us through the Contact page.

Pageviews

Wednesday, February 15, 2017

CSS3 - Multi columns

CSS3 supported multi columns to arrange the text as news paper structure.
Some of most common used multi columns properties as shown below −
Values Description
column-count Used to count the number of columns that element should be divided
column-fill Used to decide, how to fill the columns
column-gap Used to decide the gap between the columns
column-rule Used to specifies the number of rules
rule-color Used to specifies the column rule color
rule-style Used to specifies the style rule for column
rule-width Used to specifies the width
column-span Used to specifies the span between columns

Example

Below example shows the arrangement of text as new paper structure.
<html>
   <head>
   
      <style>
         .multi {
            /* Column count property */
            -webkit-column-count: 4;
            -moz-column-count: 4;
            column-count: 4;
            
            /* Column gap property */
            -webkit-column-gap: 40px; 
            -moz-column-gap: 40px; 
            column-gap: 40px;
            
            /* Column style property */
            -webkit-column-rule-style: solid; 
            -moz-column-rule-style: solid; 
            column-rule-style: solid;
         }
      </style>
      
   </head>
   <body>
   
      <div class="multi">
      Tutorials Point originated from the idea that there exists a class of readers who respond 
      better to online content and prefer to learn new skills at their own pace from the comforts 
      of their drawing rooms. The journey commenced with a single tutorial on HTML in 2006 and 
      elated by the response it generated, we worked our way to adding fresh tutorials to our 
      repository which now proudly flaunts a wealth of tutorials and allied articles on topics
      ranging from programming languages to web designing to academics and much more.
      </div>
      
   </body>
</html>
It will produce the following result −
For suppose, if user wants to make text as new paper without line, we can do this by removing style syntax as shown below
.multi {
   /* Column count property */
   -webkit-column-count: 4;
   -moz-column-count: 4;
   column-count: 4;
   
   /* Column gap property */
   -webkit-column-gap: 40px; 
   -moz-column-gap: 40px; 
   column-gap: 40px;
}
It will produce the following result −
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)