Sabtu, 22 Desember 2012

Cara Menggabungkan HTML dengan CSS

Sebenarnya ada tiga macam cara untuk menggabungkan antara file HTML dengan file CSS.
Berikut ini tiga 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 </h2>
  </p>
  </body>
  </html>

2. Embedded Style

Embedded style merupakan cara penulisan CSS kedalam file HTML perhalaman (page) dan penulisan file CSS sebelum .... tag </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 </h2>
  </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 diantara <head>... </head>.
Untuk cara link style ini yang banyak digunakan 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 Designer menamai file Link Style CSS dengan nama style.css
Berikut ini contoh file nya:
  <html>
  <head>
  <title> Penggabungan File HTML dan CSS </title>
  <link href="style.css" rel="stylesheet" type="text/css">
  </head>
  <body>
  <p>
  <h2> Contoh untuk link style </h2>
  </p>
  </body>
  </html>
File CSS biasanya disimpan dengan ekstensi .css atau dengan nama style.css.
  h2 {
  color : #FFCC00;
  background : #CC0000;
  }
Catatan :
  • Untuk menyimpan link ke file style.css penempatannya harus diantara <head>... </head>
  • Anda bisa membuat file.css lebih dari satu sesuai dengan kebutuhan

Tidak ada komentar:

Poskan Komentar