Membuat tampilan website yang bagus dapat memberikan pengalaman pengguna yang baik, sehingga Anda perlu menghubungkan HTML dan CSS. Keterkaitan keduanya sangat erat, karena HTML merupakan bahasa markup (dasar situs), sedangkan CSS adalah style untuk memperbaiki halaman. Maka dalam dunia pemrograman web, keduanya harus jalan beriringan.
Menghubungkan HTML dengan CSS dapat Anda lakukan dengan dua cara yaitu menuliskan secara langsung di HTML, atau membuatnya terpisah. Umumnya programmer membuat secara terpisah agar terlihat lebih rapi, dan mempermudah dalam memperbaiki kode CSS. Dan pada kesempatan ini yang kita bahas adalah cara menghubungkan CSS yang terpisah.
Cara Menghubungkan HTML dan CSS
Sebelum memulai ada beberapa persiapan yang perlu Anda persiapkan, yaitu text editor dan browser. Anda dapat menggunakan text editor favorit Anda, namun pada kesempatan ini saya menggunakan Visual Studio Code dengan OS Kali Linux. Dan jika sudah mempersiapkan yang dibutuhkan, berikut langkah-langkahnya.
- Buatlah file html menggunakan text editor, kemudian simpan dengan ekstensi file .html. Sebagai contoh dashboard.html.
- Buat juga file CSS, kemudian simpan dengan ekstensi .css. Contoh style.css.
- Kemudian simpan kedua file dalam folder yang sama.
- Selanjutnya dalam folder yang sama, buat folder dengan nama CSS. Dan pindahkan file CSS ke folder tersebut.
- Buatlah coding sederhana pada HTML dan Simpan.
- Jalankan file HTML yang telah Anda simpan tadi, maka akan terlihat hasilnya seperti berikut.
- Membuat link di dalam tag <head> pada HTML. href=”css/style.css” merupakan alamat folder penyimpanan file CSS.
- Selanjutnya kita akan mencoba CSS dengan mengubah warna pada tag H2. Caranya kembali ke file CSS, kemudian buat style pada CSS seperti berikut.
- Kemudian simpan kedua file. Dan jalankan file HTML, maka akan terlihat hasilnya seperti ini.
Menggunakan div
- Buatlah tag div di dalam Body HTML seperti ini. Dan jangan lupa membuat nama class nya.
<div class=”hub-ke-css”>
<p>
Ini adalah cara menghubungkan HTML dengan CSS menggunakan div
</p>
</div>
- Berikan style pada CSS seperti berikut.
.hub-ke-css{
background: yellow;
}
- Maka hasilnya akan terlihat seperti ini. Terdapat perbedaan style dari yang pertama dengan yang kedua.
Penutup
Dengan cara ini Anda dapat dengan mudah mengubah style pada HTML menggunakan CSS. Dan selain itu ada juga dapat mengubah gaya tulisan pada HTML tanpa menggunakan CSS. Dan sekian dulu dari saya, apabila ada yang ingin Anda tanyakan dapat menuliskan pada kolom komentar. Terima kasih.
This comment has been removed by the author.
Pingback: Cara Mengubah Warna Teks pada HTML tanpa CSS - Komputer Natic