Tutorial HTML Part 16 : Cara Menghubungkan File HTML dengan CSS

09 November 2019 15:10 Fauzan (Codekop) 1,241x

Tidak Ada Tags

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.

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;
			}
			h1{
				text-align:center;
				font-size:20px;
				color:red;
			}
			p{
				text-align:left;
				font-size:13px;
			}
		</style>
	</head>
	<body>
		<h1>Contoh Penulisan CSS Internal </h1>
		<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>
		<h1>Contoh Penulisan CSS Eksternal </h1>
		<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