Cara yang mudah untuk menempatkan style CSS adalah pada sesi <head> di sebuah halaman web. Dengan cara ini, anda dapat membuat perubahan dan secara langsung melihat preview hasilnya melalui browser. Dengan demikian, anda dapat melihat perubahan pengaturan dengan cepat. Beberapa HTML editor secara otomatis dapat meletakkan tag style CSS pada Head. Namun, jika HTML editor anda tidak memiliki fasilitas tersebut, anda dapat menyisipkan seperti pada contoh berikut ini :
<head>
/*letakkan tag di bawah ini di dalam head*/
<style type="text/css">
<!---
Definisi CSS Anda
Definisi CSS Anda
--->
</style>
</head>
Tag <!----> berarti perintah untuk menyembunyikan atau mengabaikan style CSS bagi browser yang tidak memiliki kemampuan untuk menampilkan CSS. Jika anda ingin meletakkan komentar atau keterangan informasi pada sesi Style tersebut maka masukkan keterangan anda di antara tag*/.....*/. Hal ini dmaksudkan agar bagian tersebut tidak dianggap sebagai bagian dari pengaturan atau bagian yang harus ditampilkan pada browser.
Anda dapat menerapkan style CSS hampir pada seluruh tag paragraf <p> maka definisikan tag CSS nya di antara tag HTML, seperti tag <h1>, <h2>, <h3>, <h4>, <p>, <ul>, <li>, <address>, <p>, atau <body>.
Sebagai contoh, untuk menerapkan style bagi seluruh tag paragraf <p> maka definisikan tag CSS nya di antara tag <style>....</style>. Misalnya, jika anda ingin membuat seluruh paragraf tampil menggunakan font verdana maka tag CSS nya sebagai berikut :
P{
font-family: verdana, arial, helvetica, sans-serif;
Selanjutnya, anda juga dapat menentukan ukuran font. Tambhakan tag seperti berikut (dipakai ukuran pixel) :
font-weight: 12 px;
Untuk mendefinisikan property font paragraf, tambahkan font-weight dan font-style. Tambahkan tag sebagai berikut :
font-weight: 400;
font-style: normal;
Sebagai catatan, jangan lupa tmbahkan tag penutup }. Secara keseluruhan, langkah pengaturan paragraf di atas dapat dilihat seperti berikut :
p{
font-family: verdana, arial, helvetica, sans-serif;
font-size: 12px;
font-weight: 400;
font-style: normal;
}
Anda juga dapat menerapkan cara di atas pada tag lain, misalnya pada Heading :
h2 {
font: small-caps bold 16px/20px helvetica, arial, sans-seerif;
color: #ff0033
}
Tempatkan seluruh definisi CSS seperti yang dicontohkan di atas secara berurut pada bagian tag <style>...</style>. Misalnya, anda menyusun seluruh tag definisi CSS berdasarkan urutan abjad tag. Hal ini akan memudahkan anda dalam melakukan pengubahan tertentu di masa mendatang.
<head>
/*letakkan tag di bawah ini di dalam head*/
<style type="text/css">
<!---
Definisi CSS Anda
Definisi CSS Anda
--->
</style>
</head>
Tag <!----> berarti perintah untuk menyembunyikan atau mengabaikan style CSS bagi browser yang tidak memiliki kemampuan untuk menampilkan CSS. Jika anda ingin meletakkan komentar atau keterangan informasi pada sesi Style tersebut maka masukkan keterangan anda di antara tag*/.....*/. Hal ini dmaksudkan agar bagian tersebut tidak dianggap sebagai bagian dari pengaturan atau bagian yang harus ditampilkan pada browser.
Anda dapat menerapkan style CSS hampir pada seluruh tag paragraf <p> maka definisikan tag CSS nya di antara tag HTML, seperti tag <h1>, <h2>, <h3>, <h4>, <p>, <ul>, <li>, <address>, <p>, atau <body>.
Sebagai contoh, untuk menerapkan style bagi seluruh tag paragraf <p> maka definisikan tag CSS nya di antara tag <style>....</style>. Misalnya, jika anda ingin membuat seluruh paragraf tampil menggunakan font verdana maka tag CSS nya sebagai berikut :
P{
font-family: verdana, arial, helvetica, sans-serif;
Selanjutnya, anda juga dapat menentukan ukuran font. Tambhakan tag seperti berikut (dipakai ukuran pixel) :
font-weight: 12 px;
Untuk mendefinisikan property font paragraf, tambahkan font-weight dan font-style. Tambahkan tag sebagai berikut :
font-weight: 400;
font-style: normal;
Sebagai catatan, jangan lupa tmbahkan tag penutup }. Secara keseluruhan, langkah pengaturan paragraf di atas dapat dilihat seperti berikut :
p{
font-family: verdana, arial, helvetica, sans-serif;
font-size: 12px;
font-weight: 400;
font-style: normal;
}
Anda juga dapat menerapkan cara di atas pada tag lain, misalnya pada Heading :
h2 {
font: small-caps bold 16px/20px helvetica, arial, sans-seerif;
color: #ff0033
}
Tempatkan seluruh definisi CSS seperti yang dicontohkan di atas secara berurut pada bagian tag <style>...</style>. Misalnya, anda menyusun seluruh tag definisi CSS berdasarkan urutan abjad tag. Hal ini akan memudahkan anda dalam melakukan pengubahan tertentu di masa mendatang.
Post a Comment