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