Cara Menghubungkan HTML dan CSS dengan Mudah

Cara Menghubungkan HTML dan CSS

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.

Menghubungkan HTML dan CSS

  • Buatlah coding sederhana pada HTML dan Simpan.

Code HTML

  • Jalankan file HTML yang telah Anda simpan tadi, maka akan terlihat hasilnya seperti berikut.

Tampilan HTML

  • Membuat link di dalam tag <head> pada HTML. href=”css/style.css” merupakan alamat folder penyimpanan file CSS.

Hubungkan HTML dan CSS pada Tag HTML

  • Selanjutnya kita akan mencoba CSS dengan mengubah warna pada tag H2. Caranya kembali ke file CSS, kemudian buat style pada CSS seperti berikut.

Style CSS

  • Kemudian simpan kedua file. Dan jalankan file HTML, maka akan terlihat hasilnya seperti ini.

Hasil CSS dan HTML

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>

Style CSS dengan DIv

  • Berikan style pada CSS seperti berikut.

.hub-ke-css{
background: yellow;
}

Menghubungkan HTML dan CSS - Style DIV

  • Maka hasilnya akan terlihat seperti ini. Terdapat perbedaan style dari yang pertama dengan yang kedua.

Hasil Menghubungkan HTML dan CSS

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.

2 Komentar

  1. Pingback: Cara Mengubah Warna Teks pada HTML tanpa CSS - Komputer Natic

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *