Cara Menggunakan Fungsi Columns pada CSS

Kegunaan kolom yaitu membagi teks menjadi beberapa kolom dan kita dapat menentukan lebar perkolomnya. Seperti yang kita sering kita lihat di beraneka majalah atau koran, ada beberapa artikel yang sering sekali dibagi untuk kolomnya, nah begitupun di pada sebuah laman, kita dapat menggunakan kegunaan columns ini di laman kita. ayo kita praktekan bagaimana cara Menggunakan Fungsi Colomn pada CSS,





jadi kasusnya kita akan membagi beberapa paragraf  menjadi beberapa kolom. Paragraf pertama-tama kita akan untuk menjadi 12 kolom, paragraf kedua menjadi 10 kolom, paragraf ketiga 5 kolom dan paragraf ke empat 2 kolom.



Pertama-tama buka text editor kalian dan ketikan kode HTML berikut dan beri nama dengan nama file index.html.



index.html



<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=UTF-8>
<title> Kegunaan Colomn di CSS </title>
</head>
<link rel=stylesheet href=style.css>
<body>
<div class=colomn>
<h2>Membagi Kolom menjadi 12</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis, eveniet. Aliquid dolorum, voluptates facere consequuntur odit optio neque, ipsa? Facere delectus earum, necessitatibus magni consequuntur consectetur perferendis eaque, sed veniam.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, libero, amet. Consectetur asperiores repellendus, quas debitis illum dolorum, ipsum soluta laudantium consequuntur nemo doloremque est? Aut rerum dolore impedit numquam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam aperiam error accusantium repellat voluptate quaerat tempora quae explicabo tempore, incidunt vitae natus ipsa, eaque quis optio ipsum quidem dolores at!
</p>
</div>
<div class=colomn1>
<h2>Membagi Kolom menjadi 10</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis, eveniet. Aliquid dolorum, voluptates facere consequuntur odit optio neque, ipsa? Facere delectus earum, necessitatibus magni consequuntur consectetur perferendis eaque, sed veniam.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, libero, amet. Consectetur asperiores repellendus, quas debitis illum dolorum, ipsum soluta laudantium consequuntur nemo doloremque est? Aut rerum dolore impedit numquam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam aperiam error accusantium repellat voluptate quaerat tempora quae explicabo tempore, incidunt vitae natus ipsa, eaque quis optio ipsum quidem dolores at! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ut consequuntur nam quibusdam eos laudantium rerum facilis deleniti consectetur vero unde, mollitia quisquam accusamus pariatur atque molestias suscipit tempora, vitae.
</p>
</div>
<div class=colomn2>
<h2>Membagi Kolom menjadi 5</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis, eveniet. Aliquid dolorum, voluptates facere consequuntur odit optio neque, ipsa? Facere delectus earum, necessitatibus magni consequuntur consectetur perferendis eaque, sed veniam.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, libero, amet. Consectetur asperiores repellendus, quas debitis illum dolorum, ipsum soluta laudantium consequuntur nemo doloremque est? Aut rerum dolore impedit numquam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam aperiam error accusantium repellat voluptate quaerat tempora quae explicabo tempore, incidunt vitae natus ipsa, eaque quis optio ipsum quidem dolores at! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto reprehenderit porro, sint dolore, rem quisquam ea incidunt ut nihil tenetur soluta magnam accusantium aliquam tempore laudantium illum totam. Quibusdam, amet.
</p>
</div>
<div class=colomn3>
<h2>Membagi Kolom menjadi 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis, eveniet. Aliquid dolorum, voluptates facere consequuntur odit optio neque, ipsa? Facere delectus earum, necessitatibus magni consequuntur consectetur perferendis eaque, sed veniam.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, libero, amet. Consectetur asperiores repellendus, quas debitis illum dolorum, ipsum soluta laudantium consequuntur nemo doloremque est? Aut rerum dolore impedit numquam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam aperiam error accusantium repellat voluptate quaerat tempora quae explicabo tempore, incidunt vitae natus ipsa, eaque quis optio ipsum quidem dolores at!
</p>
</div>
</body>
</html>


bikin file css nya dan beri nama dengan nama style.css



style.css



 



body{
font-family: arial;
}
.colomn p{
columns: 100px 12;
width: 100%;
margin: auto;
}
.colomn1 p{
columns: 100px 10;
width: 100%;
margin: auto;
}
.colomn2 p{
columns: 100px 5;
width: 100%;
margin: auto;
}
.colomn3 p{
columns: 100px 2;
width: 100%;
margin: auto;
}
h2{
text-align: center;

}


berikut hasilnya.



Fungsi



demikian panduan Cara Menggunakan Fungsi Colomn pada CSS semoga bermanfaat yah.. 😀



 



 




Sumber https://kursuswebsite.org

Popular posts from this blog

Perbedaan Antara Keyup dan Keydown Pada jQuery

Even di javascript adalah sebuah suatu yang terjadi di element tertentu, maksudnya yaitu suatu respon atau aksi yang di lakukan oleh user dimana kegiatan tersebut akan memicu jalannya script javascript yang terdapat di blog tersebut. Di javascript terdapat banyak event namun di pembahasan kali ini kita akan membahas mengenai Perbedaan Antara Keyup dan Keydown Di jQuery, Keyup adalah sebuah event yang akan di jalankan ketika tombol dilepaskan di di keyboard, dan sedangkan Keydown adalah sebuah event ketika tombol ditekan di keyboard.
Read more

Membuat Table Warna Berselang dengan PHP

Image
Selamat datang di blog Source Code Aplikasi, masih dengan File yang kemarin, tapi sekarang ini kita akan menggunakan Framework Bootstrap dan Membangun Table Warna Berselang dengan PHP, jadi jangan lupa yang kemarin praktekin dulu yah teman teman link nya yang ini . oka seketika saja kita praktekan.
Read more