Bagaimana cara menghubungkan file css pada html?

Question

Pada HTML keinginan untuk membuat gaya atau design yang menarik pada halaman website tentu kita tidak bisa melupakan teman HTML yang satu ini yaitu CSS, CSS adalah kependekan dari Cascading Style Sheet. CSS merupakan kumpulan kode-kode yang bertujuan untuk menghias dan mengatur gaya tampilan/layout halaman web supaya lebih elegan dan menarik.

Table of Contents Show

Jika kita ingin menyatukan HTML dengan CSS dalam satu file tag apa yang harus digunakan?
Bagaimana cara menulis script CSS di HTML jelaskan?
Apakah sebuah file CSS bisa digunakan untuk banyak halaman HTML yang berbeda?

Nah pada aturan penulisan CSS pada HTML ada 3 Cara Yaitu CSS Inline, CSS Internal dan CSS Eksternal, berikut pembahasannya :

CSS Inline adalah gaya penulisan terletak pada HTML yang diterapkan langsung pada baris / tag HTML yang bersangkutan.

contoh penulisan :

<img src="images/gambar.jpg" style="width: 100px;">

Dalam penulisan diatas cukup tambahkan style="" dan nilai/value style nya pada masing-masing tag HTML, style itu akan berpengaruh hanya untuk tag itu saja.

CSS Internal hampir sama dengan CSS Inline merupakan cara menghubungkan file CSS Tepat di didalam file HTML, Penulisannya tepat diantara pembuka tag <head> dan penutup tag </head> dan mempunyai tag tamabahan yaitu <style>.

contoh penulisan :

 <html>
	<head>
		<title>CSS Internal</title>
		<style>
			body{
				background-color:#DFDFDF;
			}
			h2{
				text-align:center;
				font-size:20px;
				color:red;
			}
			p{
				text-align:left;
				font-size:13px;
			}
		</style>
	</head>
	<body>
		<h2>Contoh Penulisan CSS Internal </h2>
		<p>Halo berikut ini isi pagaraf</p>
	</body>      
</html>

Pada contoh diatas dapat kita liat Kode CSS berada tepat di antara tag pembukan <head> dan tag penutup </head>, dan mempunyai tambahan tag yaitu <style>..</style>.

CSS Eksternal adalah file CSS yang disimpan di file berbeda, dalam penggunaannya perlu memanggil file CSS tersebut di dalam tag <head>.

contoh penulisan :

 <html>
	<head>
		<title>CSS Eksternal</title>
		<link href="style.css" type="text/css" rel="stylesheet">
	</head>
	<body>
		<h2>Contoh Penulisan CSS Eksternal </h2>
		<p>Halo berikut ini isi pagaraf</p>
	</body>      
</html>

Pada code tersebut artinya kita memanggil file CSS (disini nama file nya style.css), dengan cara seperti ini maka setiap perubahan pada CSS akan berdampak pada file HTML yang bersangkutan.

Berikut tutorial kali ini semoga bermanfaat sampai jumpa di tutorial berikutnya.. salam hangat

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.

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.

Jika kita ingin menyatukan HTML dengan CSS dalam satu file tag apa yang harus digunakan?

Untuk Cara menggabungkan html dan css menjadi satu file dapat dilakukan dengan 3 cara yaitu inline style, embedded style, link style.

Bagaimana cara menulis script CSS di HTML jelaskan?

Untuk menuliskan kode CSS dalam HTML, Anda dapat melakukannya dengan 3 cara yaitu inline, internal dan eksternal..

Inline – menuliskan perintah CSS langsung pada elemen HTML..

Internal – menuliskan perintah CSS di bagian <head> HTML..

Eksternal – menuliskan perintah CSS pada file yang berbeda (eksternal).

Apakah sebuah file CSS bisa digunakan untuk banyak halaman HTML yang berbeda?

Selain itu, dokumen desain CSS yang sudah kamu buat bisa digunakan untuk banyak dokumen HTML yang berbeda. Ini akan menghemat waktu, karena kamu tak perlu menulis kode CSS satu per satu di dokumen HTML yang ada.

kode html Bootstrap 5 Tutorial HTML