Friday, May 27, 2016

CSS : Cara menggabungkan HTML dengan CSS

Cara menggabungkan HTML dengan CSS

Sebenarnya ada tiga macam cara untuk menggabungkan antara file HTML dengan file CSS.
Berikut ini ketiga cara untuk menggabungkan file HTML dengan CSS :

1.Inline Style

Inline Style adalah cara penulisan file CSS secara langsung kedalam Tag HTML, berikut ini contoh penulisan Inline Style:

<html>
<head>
<title>Penggabungan File HTML dan CSS</title>
</head>
<body>
<p>
<h2 style=”color:#FFCC00″>Contoh untuk Inline Style
</p>
</h2>
</body>
</html>


2.Embedded Style

Embedded Style merupakan cara penulisan CSS kedalam file HTML per halaman ( Page ) dan penulisan file CSS sebelum ….</head>.
Berikut ini contoh penulisannya :

<html>
<head>
<title>Penggabungan File HTML dan CSS</title>
<style type=”text/css”>
h2{
color:#FFCC00;
background:#CC0000;
}
</style>
</head>
<body>
<p>
<h2>Contoh untuk Embedded Style
</p>
</h2>
</body>
</html>



3.Link Style

Untuk penulisan Link Style merupakan penulisan secara terpisah antara file HTML dan file CSS dan kita tinggal memasang link saja, dan pemasangan Link anda bisa taruh di antara <head>…</head>.

Untuk cara Link Style ini yang banyak dipakai oleh para Web Design atau programmer karena cara Link Style adalah cukup satu kali penulisan file CSS yang nantinya dipakai oleh seluruh halaman Website.

Biasanya para Web Design menamai file Link Style CSS dengan nam style.css.
Berikut ini contoh filenya:

h2{
color: #FFCC00;
background: #CC0000;
}

Simpan file stye.css didalam directori yang sama dengan file html yang akan kita buat dan buat folder css masukan file dalam folder css tersebut agar terkesan rapih.


buat file htmlnya dengan listing berikut :

<html>
<head>
<title>Penggabungan File HTML dan CSS</title>
<link href=”css/style.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<p>
<h2>Contoh untuk Link Style
</p>
</h2>
</body>
</html>



Catatan :
  • Untuk menyisipkan Link ke file style.css penempatannya harus diantara <head>….</head>.
  • Anda bisa membuat lebih file css lebih dari satu sesuai dengan kebutuhan.





Selanjutnya anda bisa mempelajari Property Pada CSS.




Reviewer: FajarYusuf.Com
ItemReviewed: CSS : Cara menggabungkan HTML dengan CSS

Seseorang yang ingin membagi pengalaman dan ilmu yang berguna untuk para pembaca FajarYusuf.Com :)

TENTANG SITUS

SITUS INI ADALAH SITUS PEMBELAJARAN PEMROGRAMAN DAN JUGA PEMAHAMAN TERHADAP TEKNOLOGI KOMPUTER. KALIAN BISA MENGIKUTI PEMBELAJARAN PEMROGRAMAN DENGAN BERTAHAP PADA MATERI YANG SUDAH SAYA SEDIAKAN, JIKA ADA MATERI YANG MEMBINGUNGKAN SILAKAN LAKUKAN KOMENTAR PADA MATERI YANG ANDA TANYAKAN ATAU KALIAN BISA MENGHUBUNGI SAYA DIHALAMAN KONTAK.