Categories
CSS

Belajar CSS Bagian 5 : Menggunakan Border

Dalam tutorial kali ini kita akan membahas tentang bagaimana menggunakan border di CSS, pada tutorial sebelumnya kita membahas tentang penggunaan padding, property border digunakan untuk memberikan garis pinggir pada elemen, setidaknya ada tiga property yang harus anda set, yaitu color, style dan width

{
Border-color : black;
Border-style : solid;
Border width : 5px;
}

Namun anda jug adapat menggunakan CSS shorthand sehingga menjadi seperti berikut ini

Border : 5px solid black;

Cobalah kode berikut ini

<!DOCTYPE html>
<html>
<head>
<style>
div {

    Border-color : black;
    Border-style : solid;
    Border width : 5px;
    background-color: lightblue;

}
</style>
</head>
<body>
<h2>Penggunaan Border</h2>
<div>Ini Menggunakan Border.</div>
</body>
</html>

 

sama halnya dengan padding, penambahan property border juga akan merubah ukuran dari box, jadi seperti yang saya jelaskan sebelumnya, ketika anda ingin membuat ukuran  lebar box tetap 100px maka anda harus menghitung ulang width dari box tersebut

Kali ini perhatikan bahwa kita memberikan border pada seluruh sisi .box, artinya jika kita tentukan ukuran border sebesar 5px, maka 10px (untuk width, karena 5px untuk left, dan 5px untuk right) akan ditambahkan pada ukuran .box tersebut. Sehingga ukuran .box berubah kembali menjadi 110px.

Untuk itu kita kurangi width dari .box tersebut menjadi 70px sehingga : 70px (width) + 20px (padding) + 10px (border) = 100px.

Semoga tutorialnya bermanfaat yah, sampai bertemu di tutorial selanjutnya semoga tutorial ini dapat berguna

Categories
CSS

Belajar CSS Bagian 4 : Membuat Padding

Dalam tutorial sebelumnya kita membahas tentang membuat margin  di tutorial kali ini kita membahas tentang padding, hampir sama seperti margin,

Pengertian Padding

padding di gunakan untuk memberi jarak akan tetapi padding memberi jarak di dalam objek yang kita beri nilai padding. padding biasanya digunakan untuk memberi jarak antara box dengan object lainya

contohnya dalam tutorial sebelumya kita bisa lihat jarak antara text dan box saling berdekatan.tidak ada jarak sama sekali, merapat ke sisi box tersebut. Untuk itu property paddinglah yang akan memberikan jarak antara konten elemen dengan elemen tersebut.

Sebagai contoh coba perhatikan code dibawah ini :

<!DOCTYPE html>
<html>
<head>
<style>
div {
    border: 1px solid black;
    padding-top: 15%;
    padding-bottom: 8%;
    padding-right: 30%;
    padding-left: 80px;
    background-color: lightblue;
}
</style>
</head>
<body>

<h2>Penggunaan Padding - Individual Sides</h2>

<div>dalam elemen div ini setiap properti padding di beri nilai sebagai berikut top padding of 100px, right padding of 150px, bottom padding of 100px, dan left padding of 80px.</div>

</body>
</html>

Terlihat bahwa ada jarak antara text dengan sisi box, tidak seperti di tutorial sebelumnya dalam penggunaan margin tidak ada jarak antara text dengan sisi box.

Perlu diperhatikan juga, bahwa ketika kita menambahkan padding, ukuran .box juga akan berubah. Misalnya kita menentukan ukuran lebar dari div sebesar 100px. Ketika kita menambahkan padding-left sebesar 20px, maka total lebar dari div tersebut menjadi 120px.

Jadi jika anda ingin ukuran .box tetap 100px, kita harus menghitung ulang width dari box tersebut. Misalnya kita ubah menjadi 80px. Dengan begitu, 80px + 20px menjadi 100px.

untuk penulisan padding sama seperti margin terdapat dua penulisan dan untuk propertipun seperti berikut :

CSS memiliki properti untuk menentukan padding untuk setiap sisi elemen:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

Semua properti padding dapat memiliki nilai-nilai berikut:

  • length – menentukan padding dalam px, pt, cm, dll.
  • % – menentukan padding dalam% dari lebar elemen yang mengandung
  • mewarisi – menentukan bahwa padding harus diwarisi dari elemen induk

Catatan: Nilai negatif tidak diizinkan.

begitulah penggunaan padding di css, untuk tutorial selanjutnya kita akan membahas penggunaan padding di css, salam coder.

Categories
CSS

Belajar CSS Bagian 3 : Membuat Margin

Dalam tutorial kali ini kita membahas tentang box model dalam css, salah satunya yaitu margin. yaitu lapisan terakhir dalam sebuah konsep Box model CSS

Pengertian Margin di CSS

Margin juga merupakan spasi atau ruang kosong di dalam Box Model. Bedanya, margin berada di luar konten yang kita gunakan, margin di gunakan untuk membatasi antar element. bisa dilihat gambar di bawah ini posisi margin berada di bagian paling luar Model box.

Properti margin dalam CSS untuk setiap sisi elemen:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

Semua properti margin dapat memiliki nilai-nilai berikut:

  • auto – browser menghitung margin
  • length – menentukan margin dalam px, pt, cm, dll.
  • % – menentukan margin dalam% dari lebar elemen yang mengandung
  • mewarisi – menetapkan bahwa margin harus diwarisi dari elemen induk

dalam penulisan margin di css ada 2 cara yang berbeda yaitu :

Margin – Individual Sides

Margin – Individual Sides dengan menuliskan jumlah setiap properti margin, mulai dari top, bottom, right, dan left contohnya seperti berikut ini :

<html>
<head>
<style>
div {
    border: 1px solid black;
    margin-top: 100px;
    margin-bottom: 100px;
    margin-right: 150px;
    margin-left: 80px;
    background-color: lightblue;
}
</style>
</head>
<body>

<h2>Penggunaan Margin - Individual Sides</h2>

<div>dalam elemen div ini setiap properti margin di beri nilai sebagai berikut top margin of 100px, right margin of 150px, bottom margin of 100px, dan left margin of 80px.</div>

</body>
</html>

Untuk melihat perbedaan ketika kita memberikan margin atau tidak, anda dapat menghapus property margin-bottom dan perhatikan perbedaannya.

selain menggunakan px untuk menentukan nilai dari setiap properti css, anda juga bisa menggunakan % (persen) untuk menentukan setiap propertinya seperti contoh di bawah ini :

div {
    margin-top: 15%;
    margin-bottom: 150px;
    margin-right: 150px;
    margin-left: 10%;
}

Terlihat perbedaannya dalam penggunaan %(persen) , jarak akan otomatis berubah mengikuti berapa besar halaman dari webnya, untuk melihat perbedaannya anda bisa memperkecil browser atau inspect elemen.

Margin – Shorthand Property

Untuk mempersingkat kode, dimungkinkan untuk menentukan semua properti margin dalam satu properti.

ka marginproperti memiliki empat nilai:

  • margin: 25px 50px 75px 100px;
    • margin atas adalah 25px
    • margin kanan adalah 50px
    • margin bawah adalah 75px
    • margin kiri adalah 100px
div {
    margin: 25px 50px 75px 100px;
}

bisa dilihat di code diatas penggunaan Shorthand Property akan mempersingkat codingan yang kita buat.

begitulah pengguaan margin dalam css, di tutorial selanjutnya kita akan bertemu dalam tutorial penggunaan padding di css. salam coder.

Categories
CSS

Belajar CSS Bagian 2 : Cara Penulisan CSS

Setelah di tutorial sebelumnya kita belajar tentang apa itu css, di tutorial kali ini kita akan belajar mengenai bagaimana cara penulisan CSS, mengapa kita belajar ini karena ada 3 Cara dasar dalam Penulisan CSS di HTML, Metode Inline Style, Metode Internal Style Sheets, Metode External Style Sheet.

Metode Inline Style

Metode inline style adalah menyisipkan css secara langsung di tag HTML dengann menggunakan atribut style, kita lihat contoh di bawah ini :

<html>
<head>
     <title>Contoh Inline Style CSS</title>
</head>
<body>
<h2 style="background-color:black; color:white" >
Text ini akan bewarna putih dan background warna hitam
</h2>
</body>
</html>

Metode Internal Style Sheets

Metode Internal Style Sheet atau metode dimana kita menyimpan css didalam satu file dengan HTML nya dengan menggunakan tag <style></style> yang sebelumnya kita, langsung aja kita lihat contohnya :

<html>
<head>
    <title>Contoh Inline Style CSS</title>
    <style type="text/css">
        h2 {
        background-color:black;
        color:white;
        }
    </style>
</head>
<body>
    <h2>
        Text ini akan bewarna putih dan background warna hitam
    </h2>
</body>
</html>

Metode External Style Sheets

Metode External Style Sheets adalah menyimpan css di dalam file baru layaknya seperti html, jadi kalau kita membuat html .html ektensi filenya dan kalau css .css ektensi filenya, jadi jika kita buat file.html dan buat juga file.css kita lihat contohnya di bawah ini :

<html>
<head>
    <title>Contoh Inline Style CSS</title>
    <link rel="stylesheet" type="text/css" href="belajar.css">
</head>
<body>
    <h2>
        Text ini akan bewarna putih dan background warna hitam
    </h2>
</body>
</html>

Metode External Style Sheets digunakan untuk ‘mengangkat’ kode CSS tersebut kedalam sebuah file tersendiri yang terpisah sepenuhnya dari halaman HTML. Setiap halaman yang membutuhkan kode CSS, tinggal ‘memanggil’ file CSS tersebut.

Itulah tiga cara dasar dalam penulisan sebuah css, yang saya sarankan anda menggunakan cara ketiga karena file html dan css di pisah agar mudah dalam mengubahnya. itu adalah tutorial cara penulisan css, semoga bermanfaat sampai jumpa di lain tutorial, jangan lupa share, salam coder.

Categories
CSS

Belajar CSS Bagian 1 : Pengertian CSS

Pernahkah anda melihat sebuah Website dengan tampilan yang indah, tahukah anda itu dibuat dengan apa ? semua itu di buat dengan CSSCSS memperindah suatu tampilan dalam sebuah website. nah di artikel ini kita akan bahas apa itu CSS.

Pengertian CSS

CSS adalah kependekan dari Cascading Style Sheet. CSS merupakan salah satu kode pemrograman yang bertujuan untuk menghias dan mengatur gaya tampilan/layout halaman web supaya lebih elegan dan menarik.CSS adalah sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996.

Untuk pengertian bebasnya, CSS adalah kumpulan kode program yang digunakan untuk mendesain atau mempercantik tampilan halaman HTML. Dengan CSS kita bisa mengubah desain dari text, warna, gambar dan latar belakang dari (hampir) semua kode tag HTML.

dalam penulisan css berbeda dengan penulisan HTML, lihat gambar dibawah ini

CSS di gunakan Karena makin Kompleknya dalam Pemograman web, seperti web yang sekarang anda lihat tampilannya akan menarik karena di buat menggunakan CSS seperti tulisan berwarna background berwarna itu semua menggunakan CSS, Lihat script di bawah ini :

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”EEjMKK” default_tab=”html,result” user=”warungcodecom”]See the Pen <a href=’https://codepen.io/warungcodecom/pen/EEjMKK/’>EEjMKK</a> by Galang Airlangga (<a href=’https://codepen.io/warungcodecom’>@warungcodecom</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

dia atas kita bisa lihat perbedaannya,  tulisannya ada yang menjadi warna putih dan background jadi warna abu,

itu semua karena script ini

<style type="text/css">
.warna {
color: white;
}
  body{
    background-color:grey;
  }
</style>

Tag span saya tambahkan dengan atribut atribut class=”warna”. Atribut class berguna untuk memasukkan kode CSS pada tag <style> di bagian head. Jika kita ingin merubah seluruh warna menjadi biru, maka tinggal mengubah isi dari CSS color: whitemenjadi color:blue, dan seluruh tag yang memiliki class=”warna” akan otomatis berubah menjadi biru.

Jadi dengan adanya css akan semakin cantik sebuah tampilan website anda, anda harus bersabar dalam belajar css karena banyak yang akan anda pelajari.  salam coder sampai jumpa di lain tutorial.