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

Ahbabul Musthofa

Ahbabul Musthofa adalah nama majelis yg diasuh oleh Alhabib Hasan bin Ismail Al-muhdor yang berada di daerah Jawatimur Probolinggo kraksaan Widoro. Ahbabul Musthofa berdiri kurang lebih d tahun 2006. Majelis Ahbabul Musthofa adalah tempat berkumpulnya manusia - manusia pecinta Al-Musthofa dari semua kalangan dan dari segala penjuru pelosok desa. Majelis ini mempunyai stasion radio yang berada pada frekuensi 107.3 fm. selain stasion Radio Ahbabul Musthofa juga mempunyai sumber air minum untuk umat sekitar kraksaan probolibggo. kita bisa mengambilnya secara gratis di sumber mata airnya langsung. Rasa airnya sungguh sungguh sangat enak, tidak kalah rasa dengaan air pasaran yang bermerk seperti aqua. Majelis ini juga sering mengadakan acara-acara positif yang menggiring para pemuda untuk ikut serta dalam acara tersebut, seperti berkeliling se kota kraksaan pada malam 1 Rojab dalam rangka berziaroh ke maqbaroh para orang-orang sholeh atau orang-orang pendahulu yang berjasa menyebarkan i...
Posting Komentar
Baca selengkapnya