Pada tutorial kali ini sangat penting dan wajib di ketahui bila anda ingin lebih mengetahui mengenai CSS. Untuk memasukan atau menggunakan Script CSS ke dalam HTML ada 3 cara yang dapat dilakukan. Yaitu bisa dengan cara Inline Style Sheet, internal style sheet dan juga bisa dengan menggunakan External Style Sheet.
Langkah 1
Untuk pertama-tama kita bahas terlebih dahulu mengenai cara Inline style sheet, Inline style sheet adalah CSS yang dibuat dalam sebuah tag HTML yang hanya berlaku untuk dokumen yang diapitnya saja. Biasanya teknik ini digunakan pada pemformatan khusus pada sebuah elemen HTML dan tidak digunakan untuk memformat seluruh elemen dalam dokumen web.
Untuk lebih jelasnya perhatikan Sript di bawah ini :
1
2
3
4
5
6
7
8
9
10
| <html><header><title>Belajar CSS</title></header><body><p style="color : red"> Teks ini berwarna merah </p><p style="color : Blue"> teks ini berwarna biru </P><p style="color : green"> teks ini berwarna hijau </p></body></html> |
Dapat terlihat komposisi Sript CSS di atas menggunakan style=”property : value”> menjadi style=”color : red”.
Untuk melihat hasilnya anda bisa copy script di atas ke dalam notepad, lalu save dengan format ( .HTML ). dapat terlihat terjadi perbedaan warna di setiap kalimatnya.
Langkah 2
Yang ke dua anda bisa menggunakan internal style sheet, dimana kita dapat menuliskan sript CSS di antara tag <head> dan </head>. Di mana bagian script html terpisah dengan scipt CSS. Bagian HTML terletak di bagian body sedangkan bagian CSS terletak di bagian Header. Penulisan CSS ini diawali dengan tag <style>dan diakhiri tag </style>.
Keunggulan dengan menggunakan cara ini kita tidak perlu menuliskan satu per satu sript HTML tapi cukup hanya dengan menuliskan Script CSS yang di butuhkan maka script CSS dapat digunakan di setiap tag HTML. Untuk lebih memahainya silahkan lihat contoh di bawah ini :
1
2
3
4
5
6
7
8
9
10
11
12
| <head><title> Belajar tutorial CSS</title><style>h3 {font-family : calibri;color : red;font-style : italic}</style></head><Body><h3>kalimat ini memiliki font jenis calibri, warna merah dan juga di cetak miring</h3></body></html> |
Dari contoh di atas dapat dilihat bahwa semua yang berada di dalam tag h3 akan memiliki apa yang telah di tuliskan pada bagian CSS di header tadi, yaitu akan memiliki font calibri, berwarna merah dan juga di cetak miring.
Langkah 3
Yang ketiga adalah dengan menggunakan external style sheet atau bisa juga di sebut Linked CSS. External style sheet adalah salah satu cara untuk memasukan menggunakan Script CSS dimana, sript html dipisahkan dengan sript CSS, lalu di hubungkan dengan link. Untuk lebih jelasnya lagi silahkan ikuti petunjuk di bawah ini :
1. Buka notepad, notepad yang satu ini di gunakan untuk menuliskan sript HTML.
Lalu copy paste sript HTML berikut :
Lalu copy paste sript HTML berikut :
1
2
3
4
5
6
7
8
| <head><title> Belajar tutorial CSS</title><link rel="stylesheet" href="Tulis nama file notepad Css yang telah di save" type="text/css"> </head><Body><h3>kalimat ini memiliki font jenis calibri, warna merah dan juga di cetak miring</h3></body></html> |
Setelah itu save notepad
2. Buka notepad, notepad ini digunakan untuk menuliskan sript CSS.
lalu copy paste cript CSS berikut:
1
2
3
| h3 {font-family : calibri;color : red;font-style : italic} |
Lalu save file notepad tersebut di folder yang sama dengan file notepad CSS (format (.css). Tulisan yang berwarna biru di atas mewajibkan anda untuk menuliskan nama file notepad HTML yang telah anda simpan tadi..
semoga bermanfaat selamat mencoba… ^_^