gexte.com – Pada artikel ini kami akan membahas Cara menggabungkan html dan css menjadi satu file, ini sangat penting buat kamu yang sedang belajar mendesain halaman website.
Bukan cuma HTML yang membutuhkan kode css yang bisa terhubung dalam membuat website tetapi PHP juga sama membutuhkannya, jadi pastikan kamu sudah membaca dasa-dasar CSS terlebih dahulu sebelum kamu melanjutkan membaca dan mempelajari tutorial ini – Setelah itu kamu bisa memulai membuat program Pencarian Data dengan PHP7 dan MySQLi.
Cara menggabungkan html dan css menjadi satu file
Ada 3 cara yang bisa kamu gunakan untuk menggabungkan html dan css menjadi satu file, yaitu inline style, embedded style, link style.
Supaya lebih jelas sekarang kita lanjut saja ke tutorialnya
1. inline style
Jika kamu ingin menghubungkan langsung code CSS ke elemen HTML kamu bisa menggukanakan cara inline style ini
Contoh penulisannya begini:
<html>
<head>
<body style="background-color: #dfdfdf;">
<h1 style="color: red; text-align: center;"> Ini contoh menggunakan inline style </h1>
</body>
</head>
</html>
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 </head> penutup.
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>
Pada contoh di atas kamu dapat melihat sintaks css tepat berada di antara tag pembuka <head> dan </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;
}
Silahkan kamu simpan file diatas dengan file nama style.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>
Nah untuk menghubungkan 2 file di atas kamu bisa menggunakan tag di bawah ini:
<link href = "style.css" rel = "stylesheet" type = "text / css">
Nah bagaimana apakah kamu sudah paham dengan tutorial di atas? Sekian tutorial tentang cara menggabungkan html dan css menjadi satu file, jika ada pertanyaan silahkan tanyakan di kolom komentar ya.
