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 nama style.css.
Berikut ini contoh filenya:

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

                               File CSS biasanya disimpan dengan ekstitensi .css atau dengan nama style.css

h2{
color: #FFCC00;
background: #CC0000;
}
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.

Komponen Property yang digunakan 


Berikut ini adalah komponen property yang digunakan pada CSS :

Property Text Style


Property Text Style bisa anda gunakan untuk membuat gaya tulisan anda pada web. Adapun komponen Text Style atau yang berhubungan dengan model atau gaya tulisan/font dari CSS adalah sebagai berikut ini : 
1.       color
Property ini mengontrol warna dari text penulisannya 
Selektor {color:#000000}
Value bisa warna Hexadesimal bisa hanya tulisan misalnya untuk kuning   menggunakan Yellow.
2.       font-weight
Property ini mengontrol tebal dari text penulisannya
Selektor { font-weight:100}
Value bisa anda tulis dengan angka mulai dari seratus dan dilanjutkan dengan kelipatannya atau bisa anda tulis dengan kata ‘Bold’ atau yang lain.
3.       font-family
Property ini untuk mengatur font yang anda pakai
Selektor{font-family:Arial, Helvetica, sans-serif}
Untuk jenis font sebaiknya menggunakan standard bawaan Windows,jika ingin terbaca oleh seluruh user. 
4.       font-size
Property ini untuk mengatur ukuran font yang akan dipakai
Selektor{ font-size:12px}
Untuk ukuran font anda bisa menggunakan ukuran… px,…em atau small,medium,large dll.
5.       font-variant
Property ini untuk mengatur font yang akan muncul apakah menggunakan huruf kecil atau small caps
Selektor{ font-variant:small-caps} atau anda bisa menggunakan normal.
6.       font-style
Property ini untuk mengatur style font yang akan digunakan pada text 
Selektor{ font-style:italic} pilihan value lain normal, oblique
7.       text-decoration
Property ini untuk mengatur style font lanjutan dari font style.
Selektor{text-decoration:underline} atau value lain : line through, none, blink, overline
8.       text-transform
Property ini untuk mengatur capital font
Selektor{ text-transform:lowercase}  value lain: uppercase, capitalize