Tips Dan Trik Seputar Bisnis Online dan Internet Marketing

3 Langkah jitu menggabungkan file HTML dan CSS

CSSBanyak dari kita yang masih belum mengerti akan penggabungan antara file HTML dan File CSS supaya jika kita mengedit file CSS bisa langsung merubah tampilan file HTML, untuk itu akan saya bahas dalam tulisan saya kali ini.

Sebenarnya ada 3 macam cara untuk penggabungan , dan itu nanti bisa anda pakai semua tergantung kebutuhan anda.

Dalam membuat penggabungan antara File HTML dan File CSS ada 3 cara yaitu :

 

1.       Inline Style

2.       Embedded Style

3.       Link Style

Apa itu Inline Style, Embedded Style, Link Style ikuti terus tulisan saya berikut ini.

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>

Keterangannya : tulisan ‘ Style ‘ itu merupakan perintah CSS untuk tulisan di H2 supaya warna font di rubah menjadi warna #FFCC00 ( Orange )

2.Embedded Style

Embedded Style merupakan cara penulisan CSS kedalam file HTML per halaman ( Page )

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>

 

Seperti anda lihat contoh penulisan diatas untuk Embedded Style penulisan CSS di antara <head>…</head> disini tulisan CSS langsung di eksekusi oleh browser dan untuk type seperti ini cocok untuk website yang halamannya tidak banyak misalnya untuk company profil dll.

 

Untuk yang lebih komplek cocoknya menggunakan Link Style yang akan kita bahas di bawah ini.

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>.

Berikut ini contoh penulisannya.

File HTML : ( anda simpan dengan nama index.html )

<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>

Anda buat folder baru dengan nama css dan anda simpan code dibawah ini dan  anda simpan ke dalam folder tersebut dengan nama  style.css  )

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

 

 

Anda bisa melihat hasilnya dengan membuka file index.html pada browser anda dengan menklik 2 kali.

Anda masih bisa membuat file html dengan memberi nama yang lain dan letakkan di antara <head>…</head> anda beri linkini:

<link href=”css/style.css” rel=”stylesheet” type=”text/css” />

Dan anda bisa merubah tampilan seluruh halaman hanya dengan mengedit file style.css maka seluruh file juga ikut berubah mengikuti apa yang anda rubah.

Cara ini lebih cocok dan sering digunakan oleh para Web Design karena kemudahannya.

Dengan menggunakan CSS anda diberi kemudahan untuk mendesign web yang mempunyai banyak keungulan lebih jika anda mendesign dengan menggunakan HTML saja.

Nah…! Anda tinggal pilih cara mana yang paling cocok menurut cara anda.

Silahkan berkomentar.

 

 

Keterangannya : tulisan ‘ Style ‘ itu merupakan perintah CSS untuk tulisan di H2 supaya warna font di rubah menjadi warna #FFCC00 ( Orange )

1.Embedded Style

Embedded Style merupakan cara penulisan CSS kedalam file HTML per halaman ( Page )

Berikut ini contoh penulisannya :


Berlangganan Artikel ?

Silahkan masukkan Email anda sekarang

Kiriman oleh : Google FeedBurner

 

4 Comments
  1. Oke Pak Rudy

    saya jadi ngerti nih…hehehe

    Thanks,
    asanoer

  2. saya sudah mencoba tapi tetap tidak ada perubahan pada htmlnya..
    knp ya??

    • Hasilnya nampak di browser, coba dulu jalankan browsernya, kalau nggak nampak, berarti ada yang salah dengan kodenya..diperiksa lagi, biasanya koma, titik juga pengaruh banyak.

  3. Kak kalo buat jadi domainkita.com/blog itu gimana caranya ya kak? gabungin blog lain ke dalam domain kita gitu

Leave a Reply



*