Cara Menghubungkan HTML dan CSS dengan Mudah dan Lengkap

Dalam membuat sebuah website diperlukannya tampilan yang bagus agar memberikan user experience yang baik pula, pengunjung website dapat merasa nyaman ketika berada di situs yang kita miliki. Untuk itu para programmer web sudah seharusnya membuat user interface yang baik pula, oleh karena itu tidaklah cukup hanya membuat HTML nya saja, karena HTML memiliki keterbatasan yang dapat diperlengkap dengan adanya CSS ini.


Pengguna CSS pada pemrograman web membuat tampilan website bisa lebih kekinian sesuai dengan selera pemilik website dan pengalaman penggunanya, untuk itu perlu lah seorang programmer menghubungkan file HTML yang telah dibuat dengan file CSS agar keduanya dapat saling berhubungan, untuk itu berikut saya tuliskan cara menggabungkannya.

Cara Menghubungkan HTML dan CSS

1. Buatlah file html menggunakan teks editor, terserah menggunakan teks editor apa saja, disini saya menggunakan visual studio code, dan simpan dengan nama.html (contoh : dashboard.html)
2. Buat juga file css menggunakan teks editor, dan simpan dengan nama.css (contoh : style.css)
3. Satukan file html dan css dalam satu folder.
4. Didalam folder yang telah dibuat tadi, buat folder baru dengan nama css, dan copy file css kedalam folder tersebut.


5. Buatlah codingan sederhana pada html dan simpan. Contoh sebagai berikut.


6. Jalankan file html yang telah disimpan tadi, maka akan terlihat hasilnya seperti ini.


Selanjutnya kita akan mengubah tulisan "Ini adalah cara menghubungkan HTML dengan CSS" menggunakan CSS, tapi harus menghubungkannya terlebih dahulu.

7. Buatlah link pada di dalan tag <head> pada HTML


href="css/style.css" merupakan folder tempat penyimpnan file css.

8. Tambahkan class pada h2, agar dapat dengan mudah di berikan stylenya pada css.
<h2 class="menghubungkan-ke-css">Ini adalah cara menghubungkan HTML dengan CSS</h2>


9. Dan buat style pada css seperti berikut.


10. Jangan lupa simpan keduanya.
11. Jalankan file html, maka hasilnya akan terlihat seperi ini.

Menghubungkan menggunakan div

1. Buatlah tag div dengan class nya ke dalam html seperti berikut ini.

<div class="hub-ke-css">
                <p>
                    Ini adalah cara menghubungkan HTML dengan CSS menggunakan div
                </p>
</div>


2. Berikan style nya pada css.

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


Maka output yang dihasilkan untuk keduanya adalah seperti berikut ini.


Dan itulah Cara Menghubungkan HTML dan CSS semoga bermanfaat. Apabila ada yang ingin ditanyakan, dapat menuliskannya di kolom komentar. Terima Kasih!
RELATED POSTS

Berlangganan update artikel terbaru via email:

0 Response to "Cara Menghubungkan HTML dan CSS dengan Mudah dan Lengkap"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel