Cara menggabungkan html dan css menjadi satu file dengan mudah

By INCREINDO 13 Aug, 2021

Cara menggabungkan html dan css menjadi satu file - Tutorial ini merupakan tutorial html yang bisa dikatakan salah satu tutorial html yang penting. karena jika kita tidak tahu bagaimana menghubungkan html dan css maka kita tidak akan tahu bagaimana mendesain halaman website yang kita buat seperti file html yang tidak ditautkan ke css dan tidak berfungsi sama sekali.

Selain html php juga sama, php yang akan kita gunakan dalam membuat website juga membutuhkan kode css yang bisa terhubung. Setelah anda selesai mempelajari tutorial html ini, saya merekomendasikan untuk belajar Pengenalan Dasar CSS dan Contohnya dan setelah itu bisa memulai membuat Program Pencarian Data dengan PHP7 dan MySQLi.

Cara menggabungkan html dan css menjadi satu file

Untuk Cara menggabungkan html dan css menjadi satu file dapat dilakukan dengan 3 cara yaitu inline style, embedded style, link style. nah, agar lebih jelasnya mari kita lihat contoh di bawah ini.

1. inline style

inline style adalah cara menghubungkan file css langsung ke elemen html.

Berikut contoh penulisannya.

<html>
     <head>
      <body style="background-color: #dfdfdf;">
      <h1 style="color: red; text-align: center;"> Ini contoh menggunakan inline style </h1>
      </body>
     </head>
</html>

view rawkode.html hosted with ❤ by GitHub

2. internal style

internal style hampir sama dengan inline style, yaitu cara menghubungkan file css. tepat di dalam sintaks html, tulisan ini berada tepat di antara tag pembuka <head> dan tag </head> penutup.

Berikut contoh penulisannya.

<html>
      <head>
           <style>
            body        {
            background-color:#DFDFDF;
           }
                                                               
            h1 {
            text-align:center;
            font-family:Century;
            font-size:16pt;
           }
                                                               
            p {
            text-align:left;
            font-family:Century;
            font-size:14pt;
           }

           </style>
      </head>

      <body>
       <h1> Contoh Penulisan syntax untuk Internal Style </h1>
       <h2>Contoh lain nya dari Point Website</h2>
      </body>
               
</html>

view rawkode.css hosted with ❤ by GitHub

Pada contoh di atas kita dapat melihat sintaks css tepat di antara tag pembuka <head> dan tag </head> penutup.

3. eksternal style

Sama seperti namanya, eksternal style adalah cara menghubungkan file css terpisah dengan html dan menghubungkannya menggunakan tautan (link). penulisan link tersebut tepat di antara pembukaan tag <head> dan penutup tag </head>.

Berikut contoh penulisan kode dari file css nya.

body {
     background-color:#DFDFDF;
     }
                               
h1  {
    text-align:center;
    font-family:Centuryl
    font-size:16pt;
    }
                               
h2  {
    text-align:left;
    font-family:Century;
    font-size:14pt;

    }

view rawkode.css hosted with ❤ by GitHub

Simpan file diatas dengan file name.css (nama terserah anda, yang penting extension .css)

Berikut ini adalah contoh penulisan untuk menghubungkan link di html.

<html>
      <head>
       <link href="file.css" rel="stylesheet" type="text/css">
      </head>
 <body>
  <h1> Contoh penulisan syntax untuk Eksternal Style </h1>
  <h2> Point Website </h2>
 </body>
</html>

view rawkode.html hosted with ❤ by GitHub

Untuk menggabungkan dua file, gunakan tag <link href = "nama file css yang Anda buat" rel = "stylesheet" type = "text / css">.

Sekian tutorial dasar css tentang cara menggabungkan html dan css menjadi satu file dan semoga bermanfaat bagi kita semua.

	<html>
	<head>
	<body style="background-color: #dfdfdf;">
	<h1 style="color: red; text-align: center;"> Ini contoh menggunakan inline style </h1>
	</body>
	</head>
	</html>

	<html>
	<head>
	<style>
	body {
	background-color:#DFDFDF;
	}

	h1 {
	text-align:center;
	font-family:Century;
	font-size:16pt;
	}

	p {
	text-align:left;
	font-family:Century;
	font-size:14pt;
	}

	</style>
	</head>

	<body>
	<h1> Contoh Penulisan syntax untuk Internal Style </h1>
	<h2>Contoh lain nya dari Point Website</h2>
	</body>

	</html>

	<html>
	<head>
	<link href="file.css" rel="stylesheet" type="text/css">
	</head>
	<body>
	<h1> Contoh penulisan syntax untuk Eksternal Style </h1>
	<h2> Point Website </h2>
	</body>
	</html>