Halo semua, semoga anda dalam keadaan terbaik dan tetap semangat belajar CSS! Kali ini kita akan sama-sama belajar Dasar Penggunaan CSS. Jika Anda ingin membuat halaman web Anda terlihat lebih menarik dan unik, maka Anda perlu belajar cara penggunaan CSS! Dalam tutorial ini, kita akan membahas dasar-dasar penggunaan CSS, termasuk pemilihan elemen (selector) dan properti untuk mengubah tampilan, serta tiga cara berbeda untuk menerapkan CSS yaotu Inline CSS, Internal CSS, dan Eksternal CSS.
1. Selector dan Properti dalam CSS
Sebelum kita masuk ke teknik-teknik spesifik, mari kita bicarakan tentang selector dan properti dalam CSS. Selector adalah cara kita memberi tahu CSS elemen mana yang ingin kita beri gaya atau style. Properti adalah instruksi yang kita berikan kepada CSS tentang apa yang harus diubah pada elemen tersebut. Misalnya, jika Anda ingin mengubah warna teks atau ukuran font, Anda akan menggunakan properti CSS.
2. Inline CSS dan Cara Penggunaannya
Inline CSS adalah cara paling sederhana untuk menerapkan gaya pada elemen langsung dalam HTML. Misalnya, jika Anda ingin mengubah warna teks pada satu paragraf, Anda bisa melakukannya dengan menambahkan atribut style langsung ke elemen tersebut. Berikut adalah contoh penggunaan Inline CSS:
1 | <p style="color: blue; font-size: 18px;">Ini adalah teks berwarna biru dengan font 18px.</p> |
3. Internal CSS dan Cara Penggunaannya
Internal CSS memungkinkan Anda untuk menulis gaya di dalam tag <style> yang ada di dalam bagian <head> halaman HTML. Ini memungkinkan Anda mengatur gaya untuk beberapa elemen dalam halaman yang sama. Berikut adalah contoh penggunaan Internal CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!-- awalan kode html--> <head> <style> p { color: green; font-size: 16px; } </style> </head> <body> <p>Ini adalah teks berwarna hijau dengan font 16px.</p> </body> <!-- lanjutan kode html --> |
4. Eksternal CSS dan Cara Penggunaannya
Eksternal CSS adalah cara paling efisien dan disarankan untuk menerapkan gaya pada halaman-halaman yang berbeda. Anda membuat file terpisah dengan ekstensi .css yang berisi semua gaya Anda. Lalu, Anda menghubungkan file CSS tersebut dengan halaman HTML menggunakan tag <link>. Berikut adalah contoh penggunaan Eksternal CSS:
Buat file “style.css” dan buat kode CSS berikut:
1 2 3 4 5 | /* style.css */ p { color: purple; font-size: 20px; } |
Kemudian, dalam halaman HTML Anda dapat memanggil file CSS eksternal anda seperti contoh berikut:
1 2 3 4 5 6 7 8 | <!-- awalan kode html --> <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <p>Ini adalah teks berwarna ungu dengan font 20px.</p> </body> <!-- lanjutan kode html --> |
Dalam tutorial ini, kita telah mempelajari dasar-dasar penggunaan CSS. Selector dan properti membantu Anda mengendalikan tampilan halaman web. Inline CSS cocok untuk perubahan cepat pada elemen tunggal, sedangkan Internal CSS memungkinkan Anda mengatur gaya untuk beberapa elemen dalam halaman yang sama. Eksternal CSS adalah cara terbaik untuk menerapkan gaya pada banyak halaman, memisahkan gaya dari struktur HTML.
Ketiga cara (inline, internal dan external) dapat digunakan bersamaan seperti pada contoh berikut ini:
Isi file style.css:
1 2 3 4 5 | /* style.css */ .teks-merah { color: red; font-weight: bold; } |
Isi file latihan_css_001.html:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html> <html> <head> <title>Contoh Gabungan 3 Cara Penggunaan CSS</title> <link rel="stylesheet" type="text/css" href="style.css"> <style> p{ font-size: 16pt; } </style> </head> <body> <h1 style="color: blue;">Ini judul dengan teks biru (Inline CSS)</h1> <p>Ini adalah teks dengan font ukuran 16pt (Internal CSS)</p> <p class="teks-merah">Ini adalah teks berwarna merah (Eksternal CSS)</p> </body> </html> |
Hasilnya jika dijalankan di Browser akan terlihat seperti gambar berikut ini:
Dengan pemahaman ini, Anda dapat mulai merancang halaman web Anda dengan tampilan yang menarik dan unik. CSS memberi Anda alat untuk mengubah warna, font, dan banyak lagi, sehingga Anda bisa menunjukkan kreativitas Anda pada website anda. Semoga tutorial ini membantu Anda dalam memahami Dasar Penggunaan CSS!
Untuk mendapatkan daftar Tutorial CSS dari Dasar, silahkan mengunjungi Index Tutorial CSS dari Dasar: Belajar CSS Dari Dasar.