√ 2 Cara Menghubungkan HTML dan CSS Termudah

Halo semuanya pada artikel alafgani.web.id, Kali ini kita akan membahas Belajar HTML: 2 Cara Menghubungkan HTML dan CSS Termudah. Mari kita simak penjelasanya:

Ketika Anda merancang dan mengembangkan halaman web, penting untuk memisahkan struktur konten (HTML) dan tampilan (CSS). Sehingga Anda dapat menciptakan tampilan yang menarik dan terstruktur.

Table of Contents

Apa itu CSS?

Menurut Wikipedia Cascading Style Sheet (CSS) merupakan aturan untuk mengatur beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemrograman.

Kegunaan pada CSS ini, CSS memungkinkan Anda mengontrol tampilan dan gaya elemen-elemen HTML. Dengan menggunakan CSS, Anda dapat mengubah ukuran, warna, font, layout, dan banyak aspek lainnya dari elemen-elemen tersebut dalam artian CSS sangat penting sekali bagi seorang web desainer untuk menguasai CSS.

Namun, untuk menerapkan CSS ke file HTML, kita perlu menghubungkan kedua file tersebut.

Hubungan antara HTML dan CSS ini. HTML (Hypertext Markup Language) digunakan untuk membangun struktur dan menyusun konten di halaman web. Namun, tanpa gaya yang tepat, tampilan halaman web dapat terlihat monoton dan tidak menarik. Di sinilah CSS (Cascading Style Sheets) digunakan dalam Website.

Menghubungkan HTML dan CSS

Untuk cara Menghubungkan HTML dan CSS ada 2 Versi yaitu, Memanggil Secara External danInternal. Keunikan CSS memiliki Extensi .css atau Style.

CSS External

Langkah-langkah untuk cara menghubungkan file HTML dan CSS adalah sebagai berikut:

Pertama, buatlah file HTML baru dengan ekstensi “.html“. Misalnya, “index.html“. File ini akan berfungsi sebagai kerangka utama dari halaman web Anda.
Selanjutnya, buatlah file CSS baru dengan ekstensi “.css“. Misalnya, “style.css“. File ini akan berisi kode CSS yang akan mengontrol tampilan elemen-elemen HTML.
Buka file “index.html” menggunakan editor teks atau lingkungan pengembangan web yang Anda sukai.
Di dalam tag <head> file “index.html“, tambahkan elemen <link>. Elemen ini akan menghubungkan file CSS dengan file HTML. Gunakan atribut rel dengan nilai “stylesheet” dan atribut href dengan nilai path relatif ke file CSS Anda. Contohnya sebagai berikut:

Pastikan HTML dan CSS Anda berada di dalam satu folder Agar CSS nya terkoneksi dengan HTML Anda.
Sekarang, buka file “style.css“.
Di dalam file “style.css“, Anda dapat menulis kode CSS untuk mengubah tampilan elemen-elemen HTML di halaman web. Misalnya, jika Anda ingin mengubah warna latar belakang body menjadi hijau, Anda dapat menulis kode berikut:

Simpan perubahan yang Anda buat pada file CSS.
Selanjutnya buka index.html dan kita akan melihat hasilnya menjadi seperti ini.
Selamat Anda sudah bisa Cara Menghubungkan HTML dan CSS Anda!

CSS Internal

CSS Internal tidak jauh beda dengan external. Mari kita lihat Perintah Menghubungkan CSS Internal :

<!DOCTYPE html>
<html>
<head>
<style>

body {
background-color: green;
}
</style>
</head>
<body>
<!– Isi konten HTML di sini –>
</body>
</html>

Dalam CSS Internal, Perintah kode css dipanggil dalam satu file HTML. jadi tidak perlu kita membuat style.css.

Ada kekurangan pada pemanggilan css ini dalam segi kerapihan penulisan Kode. Tapi tidak masalah jika kita sedang belajar dan tidak ingin ribet membuat file style.css

Tapi saya sarankan, jika Anda sudah biasa menggunakan CSS sebaiknya. Gunakan CSS External ya!

Penutup

Setelah kita mengetahuai Cara Menghubungkan file HTML dan CSS. Anda dapat mengatur dan memberikan gaya pada website anda agar tampilan lebih menarik. Demikian tutorial ini, semoga bermanfaat. Terimakasih sudah berkunjung!