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

Install Perl

  Salam Sobat Semua ALhamdulillah Sholawat serta salam tetap tercurah kepada sang panutan sayyidina Muhammad S.A.W. untuk kesempatan kali ini saya ingin berbagi tentang Applikasi perl dan Instalasi nya. mungkin kebanyakan orang applikasi perl ini tidak begitu penting apalagi di kalangan designer. tapi lain kata dengan kalangan yang suka melakukan aktifitas hacking,cracking,carding dan programming. mereka akan sangat membutuhkan applikasi ini karena memang ada beberapa tool atau alat yang terbuat dari bahasa perl. dan Insya Allah nanti saya akan berbagi juga dasar dasar perl oke :D heheheh. ok langsung saja.  - Download applikasi instalasi perl di https://adsafelink.com/4vKs7DHTY7 - ekstrak dari winrar nya 1. klik dua kali applikasi instalasi perl yang sudah di download dan setalah muncul jendela seperti di gambar maka klik next 2. Pilih option i accept dan kemudian klik next seperti tampak pada gambar 3. di bagian jendela ini untuk settingannya kita pakai yang standard saja ti...
Posting Komentar
Baca selengkapnya

Belajar HTML bersama part 2(mengenai Tag Heading)

  Alhamdulillah segala puji bagi Rabb semesta alam yang masih di beri kesempatan bisa bertemu lagi di tulisan atau video ini. pada kesempatan kemaren kita sudah mencoba membuat file html. dan sekarang ayo kita mencoba yang lebih dalam mengenai HTML. di dalam file kemaren atau bacaan atau video kemaren ada beberapa isi body yang kita tahu. yaitu <h1> dan <p>. untuk kesempatan kali ini saya mencoba memberitahukan arti h1 itu dulu, dan next bacaan atau video kita lanjutkan yang lain. untuk h1 kalau dalam teori disebut heading yang fungsinya membuat tulisan di dalam body itu berukuran menurut ukuran sesuai sistem. h1 ini terdiri sampai h6. jadi kita nanti kita akan coba h1 sampai h6. sekarang kita coba buka notepad lagi dan tulis atau copy paste tulisan berikut <html> <head> <title>Website Pertama</title> </head> <body> </body> </html> kemudian diantara tag body kita tulis atau copy paste tag h1 kemudian di sav...
Posting Komentar
Baca selengkapnya