CSS ini merupakan hal prinsipil dalam pembuatan website bagaimanapun kita tidak akan pernah dapat terlepas setidaknya dari HTML CSS.
Kita sudah bahas pada tema Mengenal CSS, apa itu CSS dan bagaimana menggunakannya.
Pada beberapa konten yang Maya upload, dalam belajar HTML dan CSS kita, Maya selalu menggunakan Inline CSS, kali ini kita akan coba belajar Internal CSS.
Jika masih bingung tentang apa itu inline CSS, Internal CSS dan External CSS, Kawan Maya dapat membaca terlebih dahulu obrolan kita disini, baru kembali kesini untuk melanjutkan.
Apa itu Internal CSS?
Internal CSS biasanya digunakan dalam satu file HTML, artinya jika kita membuat lebih dari 1 halaman, semua halaman HTML harus selalu menyertakan internal CSS tersebut.
Internal CSS biasanya diletakan di dalam element <head> dalam file HTML dengan menggunakan tag <style>
Perbedaannya, jika inline HTML hanya berfungsi untuk satu element saja, jika tidak kita beri perintah, maka hasilnya akan default atau berwarna hitam.
Contoh:
<h1 style="color: red">Ini heading h1 berwarna merah</h1> <h1 style="color: blue"> Ini Heading h1 berwarna biru</h1> <h1> Ini Heading h1 tanpa atribute style warna apapun</h1>
Hasil:
Ini heading h1 berwarna merah
Ini Heading h1 berwarna biru
Ini Heading h1 tanpa atribute style warna apapun
Sedangkan dalam internal CSS, maka jika kita menambahkan property CSS untuk tag <h1> artinya itu berfungsi untuk seluruh Heading H1 dalam halaman tersebut.
Baik kita mulai saja, begini cara menambahkan internal CSS dalam HTML.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Belajar internal CSS Bersama Maya</title>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>Ini heading pertama</h1>
<p>Ini adalah kontennya alias paragraf.</p>
<h1>Ini heading lain</h1>
<p>Ini adalah kontennya alias paragraf yang lain</p>
</body>
</html>
Hasil:
Ini heading pertama
Ini adalah kontennya alias paragraf.
Ini heading lain
Ini adalah kontennya alias paragraf yang lain
CSS Warna, Jenis Font dan Ukuran Font
Silahkan copy seluruh isi dalam contoh, lalu buat satu file menggunakan text editor yang Kawan Maya pilih untuk kemudian dilihat hasilnya.
Pada contoh diatas kita sudah mempelajari: Warna, jenis font dan ukuran font.
| font-family | Jenis font |
| color | Warna font |
| font-size | ukuran font |
Untuk ukuran font, maya sempat singgung dapat menggunakan pixel (px) atau persen (%). kita akan bahas tentang ukuran font pada konten berikutnya.
Dalam setiap properi CSS diawali dengan “{” dan wajib ditutup dengan “}”
CSS Border
Border adalah garis pembatas yang mengelilingi sebuah element, border memiliki nilai 3, yaitu ukuran, bentuk dan warna.
Dalam penulisannya, kita dapat menggunakan 2 cara, yaitu dengan cara singkat yang saya aplikasikan dalam tag <h1> kemudian di tag <p> saya menggunakan dengan properti yang lebih detail.
Kita lihat apakah hasilnya sama?
Contoh:
h1 {
border: 1px solid blue;
}
p {
border: 1px;
border-style: solid;
border-color: blue;
}
Hasil:
Ini heading h1
Ini Paragrafnya kawan maya
Ternyata hasilnya sama, kan? kita akan membahas tentang border lebih lengkap saat kita belajar CSS nanti
CSS Padding
Padding adalah sebuah properti dalam CSS yang mengatur batas jarak dalam.
Misalnya dalam atribut paragraf <p> berarti kita memberi memberi jarak paragraf dengan batas tepi kanan, kiri, atas dan bawah paragraf ke dalam, atau ke tulisan.
Contoh:
h1 {
border: 1px solid blue;
padding: 5px;
}
p {
border: 1px;
border-style: solid;
border-color: blue;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-top: 5px;
}
Hasil
Ini heading h1
Ini Paragrafnya kawan maya
Dalam penulisan padding juga Maya buat 2 cara, cara pertama langsung padding: 5px, artinya batas dalam kiri, kanan, atas dan bawah seluruhnya bernilai 5px.
Sedangkan pada paragraf, maya menjabarkan satu persatu, kanan (padding-right), kiri (padding-left), atas (padding-top) dan bawah (padding-bottom).
Kawan Maya dapat mengubah nilai untuk padding-left, atau padding-right sesuka hati lah, hehe.. bebas!.
CSS Margin
Berbeda dengan padding, margin adalah properti CSS yang mengatur jarak sisi terluar, baik atas, bawah, kiri dan kanan terhadap element luar, atau element lain.
Misalnya mengatur jarak antara paragraf dan heading, bisa juga mengatur jarak antar paragraf.
Margin kiri (margin-left), margin kanan (margin-right), margin atas ditulis dengan margin-top, dan terakhir margin bawah (margin-bottom).
Nilai margin kita tulis dengan angka 1 sampai tak terhingga, hehe. dengan satuan pixel (px).
Contoh:
h1 {
border: 1px solid blue;
padding: 5px;
margin-bottom: 50px;
}
p {
border: 1px;
border-style: solid;
border-color: blue;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-top: 5px;
margin-bottom: 10px;
}
Hasil:
Ini heading h1
Ini Paragrafnya kawan maya
Perhatikan jarak antara paragraf dan heading pada contoh padding, dengan jarak antara paragraf dan heading pada contoh margin.
Nah jauh kan bedanya, karena kita memberi properti margin-bottom dengan nilai 50px pada heading, artinya jarak bawah antara heading ke attribute berikutnya yaitu paragraf adalah selebar 50px.
Kesimpulan
| font-family | Jenis font |
| color | Warna font |
| font-size | ukuran font |
| border | Garis pembatas |
| padding | jarak ke dalam |
| margin | jarak ke luar |
Selamat mencoba, Kawan Maya!
