Langsung ke konten utama

belajar CSS dasar bersama part 4 : mengenal dan mencoba tentang Properti Border pada CSS

  


di css kita juga bisa membuat garis yaitu dengan properti border. dan kali ini kita akan mencoba untuk mengenal apa itu border di css,dan fungsinya border di css itu apa dan bagaimana pemakaian border dalam css itu.namun sebelumnya izinkan diri ini untuk mengucapkan
Salam sobat semua
Alhamdulillah pada hari ini saya sangat bersyukur yang tiada henti-hentinya karena masih di beri kesempatan untuk menulis dan berbagi dengan kalian.
mari sebelum kita mencoba sesuatu yang akan kita coba kali ini kita ucapkan Bismillah dulu supaya apa yang kita coba menjadi bermanfaat bagi semua terutama khususnya
buat diri kita sendiri Aamiiin.

untuk kali ini kita akan mencoba properti yang namanya border, dari nama saja kita sudah bisa menerka untuk apa fungsi dari properti yang satu ini, apalagi yang sudah 
paham dan mengerti bahasa inggris maka tidak akan asing lagi dengan nama tersebut. properti border ini berfungsi sebagai pembuat garis pada HTML dan CSS.

agar lebih paham dan jelas kita langsung mencobanya saja kawan, dan sekarang langsung saja buka notepad++ nya kawan dan buat lah dua tab baru, biar semua sama dan mudah
nama untuk file nya kita samakan kecuali bagi kalian sudah paham untuk nama filenya terserah kalian, untuk file yang satu simpan
atau save lah dengan nama filecss_5.html dan yang satu lagi save atau simpan pada folder style dengan nama style.css, jika folder style nya belum ada maka buatlah
terlebih dahulu folder baru dengan nama style.

1. setelah itu ketik atau copy paste kode berikut pada filecss_5.html
<html>
<head>
<title>My Web</title>
<link href="style/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="main">
<p>Ini adala isi dari main content yang akan saya buat sebagai website pertama saya</p>
<p>dan ini adalah pembelajaran saya untuk melangkah dan membuat website prtama saya</p>
</div>
</body>
</html>

kemudian ketik atau copy paste kode berikut pada file style.css

#main{

border-width:1px;

border-style:solid;

border-color:blue;

}

kemudian save jika langkah kita benar dan tepat maka akan dihasilkan output seperti berikut



 untuk penjelasan kode diatas seperti berikut kawan

- border-width itu untuk mengatur ketebalan garis, dan untuk nilainya bisa kita pakai satuan em, persen atau pixel(px). tapi versi saya nih, jika nilai itu statik

atau nilainya tetap tidak membutuhkan perubahan maka saya lebih suka dengan satuan pixel kawan. sehingga jika kita naikkan nilai pada border-width maka garis yang

akan dihasilkan akan semakin tebal. sekarang kita coba kode css nya kita rubah seperti berikut 

#main{

border-width:12px;

border-style:solid;

border-color:blue;

}

maka dari kode css diatas akan menghasilkan output seperti berikut


- border-style untuk mengatur gaya jenis garis yang akan mau ditampilkan ada beberapa jenis gaya tersebut. yang saya tahu dan sering saya pakai adalah solid (lurus),

dotted (titik-titik), dan dashed (putus-putus). agar lebih cepat memahami kita coba sekarang ketik atau copy paste kode berikut

#main{
border-width:12px;
border-style:dotted;
border-color:blue;
}

sehingga dari kode diatas akan menghsilkan seperti ini





 kemudian sekarang kita coba ketik atau copy paste kode berikut

#main{
border-width:12px;
border-style:dashed;
border-color:blue;
}

 



- border color adalah untuk mengatur warna garis yang akan kita buat pada css. seperti contoh kode berikut

#main{

border-width:12px;

border-style:solid;

border-color:#17eb62;

}

dari kode diatas akan menghasilkan output seperti berikut, dan bagi kalian yang masih belum paham tentang kode warna hex bisa kalian cek disini kawan

 



 2. disamping itu kita bisa juga menambahin left (kiri), right (kanan), top (atas), bottom (bawah). seperti kode berikut

#main{
border-width:12px;
border-left-style:solid;
border-right-style:dashed;
border-bottom-style:dotted;
border-color:#17eb62;
}

maka dari kode diatas bisa di lihat hasilnya seperti berikut



 dan sekarang kita coba kode seperti berikut

#main{
border-width:12px;
border-left-style:solid;
border-right-style:dashed;
border-bottom-style:dotted;
border-left-color:#17eb62;
border-right-color:#1799eb;
}

dan hasilnya bisa kalian lihat seperti berikut ini.



 dan seperti itulah tentang border menurut sepengathuan saya. dan untuk kali ini cukup sekian dulu tentang css nya. kita lanjut di next tutorial Insya Allah.


Salam sobat semua


#css #border #property #html #free #share #gratis #berbagi #web #websites #website

 

 

Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

belajar CSS dasar bersama part 3 : Cara mengetahui dan menetapkan nilai hex warna pada CSS atau HTML dengan offline beserta kelebihannya

   warna di css merupakan bagian terpenting, karena warna akan mempercantik sebuah tampilan website yang nanti akan kita buat, namun kita harus tahu bagaimana cara membuat atau memberi nilai atau value hex warna di css sehingga tampilan HTML kita akan cantik dan menarik, tapi sebelum kita memulai izinkan saya untuk mengucapkan Salam sobat semua Alhamdulillah atas segala sesuatu nikmat yang telah Allah berikan kepada diri ini, dan salah satu nya nikmat masih di beri kesempatan untuk bisa menulis dan berbagi dengan kalian. dalam kesempatan kali ini sesuai janji saya pada tulisan sebelumnya bahwa kita akan mencoba bagaimana caranya mendapat nilai hex warna pada CSS atau html secara offline. dan untuk kali ini kita akan memakai aplikasi pembantu yaitu adobe photoshop. dan ini sudah saya lakukan bertahun-tahun dalam pembuatan websites ataupun blog. bagi yang belum punya adobe photoshop di perangkatnya silahkan kalian  baca tutorial sebelumnya tentang adobe photshop disini. kalau bagi yang s
Posting Komentar
Baca selengkapnya

Install Notepad ++

Install Notepad ++ Salam semuanya sobat Pada kesempatan kali ini saya ingin menyimpan tata cara instal notepad ++ dan filenya. Agar tidak usah mencari di blog lain hehehehe. Fungsi notepad ++ ini sangatlah banyak dan sering saya gunakan untuk keperluan sehari-hari seperti koding php, html, perl dan lain-lain. Bagi saya tools kecil ini sangat bermanfaat. Dan siapa tahu juga bermanfaat buat kalian semua pembaca. Oke langsung saja download aplikasi notepad ++ nya disini Kemudian ekstrak filenya dan klik file exe installernya dua kali, sehingga akan tampil serperti pada gambar, dan kemudian pilih english saja dan klik ok. Kemudian klik next seperti pada gambar  Kemudian klik i agree Dan kemudian klik next saja kalo ingin letak folder installer atau pemasangannya di defaultkan oleh kita.  Kalau ingin dipindah, tinggal klik browse saja dan kemudian pilih letak foldernya  Kemudian ada beberapa pilihan atau opsi. Ikuti seperti gambar ya hehehehe: D  Dan yang terkahir selesai dan di tahap ini
Posting Komentar
Baca selengkapnya