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

Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

Youtube Viewer,Auto Comment,Auto Like

This is about viewer Youtube from link web or redirect web,auto comment,auto like without risk banned maybe. not about earning youtube. Method this bot about IP using auto dial or reset connection on dial up. IP will be change if IP ISP your country dynamic like on my country. or auto dial vpn (virtual private network) support application browser : - Mozilla Firefox 35 under version - chrome all version for other application browser maybe i will update so stay on my channel :D about cookies,auto clear cookies every value auto load new browser Feature : 1. Youtube Viewer using link or using redirect. you can using your web or other web 2. auto comment 3. auto like Get my bot on https://ggldrs.com/bZ5V support tools https://dl.bintray.com/florentbr/generic/SeleniumWrapperSetup-1.0.23.0.exe this bot need activation and every 30 days. you can get activation from me.the activation redeemed for $ 7, but you can try at your home with 2 viewer,then a...
2 komentar
Baca selengkapnya

Javascript dasar : mengenal dan membuat javascript awal pertama kali

   pemrograman javascript bagiku sangatlah menakutkan karena bahasa javascript menurutku sangatlah banyak sekali yang harus diketahui, tapi dalam tulisan ini akan membahas yang pokok saja dan setidaknya kita bisa membaca file atau pemrograman javascript. seperti biasa sebelum memulai izinkan diri ini untuk mengucpkan Salam sobat semua Alhamdulillahi robbil 'alamiin atas segala nikmat yang sudah Allah beri gratis kepada diri ini sehingga diri ini bisa menulis dan berbagi dalam tulisan ini apa-apa  yang saya tahu dan apa yang saya bisa. Sholawat serta salamku akan tetap terpanjatkan untuk baginda Sayyidina Muhammad ibni Abdillah S.A.W. bbeserta kepada keluarga dan para sahabatnya. sebelum kita mulai mengenal apa itu javascript dan sebelum kita memulai mencoba membuat javascript awal pertama kali mari kita bersama-sama untuk membaca basmalah agar segala urusan dan percobaan kita di beri kemudahan, pemahaman dan kelancaran. Bismillahir rohmaanir rohiim, javascript kalau menur...
Posting Komentar
Baca selengkapnya