Sebuah website bisa terdiri dari berpuluh-puluh bahkan beratus-ratus halaman. Jika setiap Kita mengubah halaman website tersebut Kita harus mengubah formatnya satu per satu, maka akan sangat merepotkan.
Namun, jika Kita menggunakan CSS (Cascading Style Sheets) maka hal di atas bukan lagi sebuah masalah karena dengan CSS Kita bisa menyimpan format menggunakannya kapan pun dan di mana pun Kita inginkan.
Dengan Cascading Style Sheets (CSS), Anda bisa membuat efek-efek tertentu untuk konten web Anda. Misalnya saja Anda ingin supaya bagian header dari tabel di web Anda selalu ber-font Verdana, ukuran 16 dan berwarna hitam. Maka Anda definisikan style tersebut untuk tag <th>. Contoh lain misalnya Anda ingin teks pada konten web Anda bertipe Verdana dan ukuran 12, maka definisikan style tersebut pada tag <p>.
Ada 4 cara memasang kode CSS ke dalam kode HTML / halaman web, yaitu:
- Inline style sheets : Memasukkan kode CSS langsung pada tag HTML.
- Internal style sheets : Memasang kode CSS ke dalam bagian tag <head>.
- Me-link ke external CSS.
- Import CSS file.
1. Inline Style Sheets
Cara ini adalah dengan menuliskan langsung script CSS ke dalam tag HTML yang diinginkan. Cara ini sebaiknya hanya digunakan jika Anda ingin memformat suatu elemen satu kali saja.
Contoh:
<html>
<head>
</head>
<body>
<p style="color: red">
Ini contoh paragraf berwarna merah
</p>
</body>
</html>Kode di atas akan memformat paragraf (<p>) berwarna merah. Penulisan CSS dengan cara ini dimulai dengan kata style: lalu diikuti dengan syntax property: value
 |
| Hasil |
2. Internal Style Sheets
Selain cara yang pertama, Anda juga bisa menempelkan kode CSS di antara tag <head> dan </head>. Cara ini disebut dengan internal style sheets. Artinya, style sheets-nya berada pada file HTML yang bersangkutan namun diletakkan khusus pada suatu tempat yaitu antara tag <head> dan <head>.
Penulisan CSS dengan cara ini diawali dengan tag <style> dan ditutup dengan tag </style>.
Contoh:
<html>
<head>
<style>
p {
color: red;
font-family: verdana;
}
</style>
</head>
<body>
<p>
Ini contoh paragraf berwarna merah
</p>
<p>
Ini juga
</p>
</body>
</html> |
| Hasil |
Dalam contoh di atas, semua elemen <p> (paragraf) dalam
halaman HTML tersebut akan diformat menggunakan font Verdana dan
berwarna merah. Tentunya ini akan lebih simpel dibandingkan dengan cara yang
pertama. Kita tidak perlu memformat tag <p> satu per satu.
Cukup hanya mendefinisikan satu kali saja.
3. External Style Sheets
Kode CSS external ditulis dalam satu file terpisah yang disimpan dengan ekstensi .css. Anda kemudian harus memanggil file CSS tersebut pada semua halaman web yang memerlukannya. Dengan cara ini, Anda hanya perlu memiliki satu set kode CSS yang digunakan untuk semua halaman web Anda.
Contoh:
Langkah pertama, Anda membuat satu file dengan ekstensi .css, contohnya saja Anda beri nama style.css. Tuliskan kode berikut ke dalam file tersebut.
p {
font-family: arial;
font-size: small;
}
h1 {color: red;}Langkah kedua, Anda harus memanggil file style.css pada semua halaman web yang membutuhkannya. Caranya dengan memasukkan kode berikut ini di antara tag <head> dan </head>.
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<h1>Heading 1</h1>
<p>
Ini paragraf
</p>
</body>
</html> |
| Hasil |
Cara di atas hanya akan bekerja jika file HTML dan CSS berada dalam folder yang sama. Jika file CSS berada di dalam folder yang setingkat lebih tinggi daripada file HTML maka pemanggilannya pun harus mengikutsertakan nama folder tersebut.
Contohnya, file CSS berada di folder dengan nama
css yang satu tingkat lebih tinggi, maka
href="style.css" diganti dengan href="css/style.css". Saya
harap Anda dapat memahaminya :)
4. Import CSS
Anda juga bisa meng-import CSS ke dalam suatu file CSS yang lain dengan menggunakan tag import. Hal ini sama artinya dengan menggabungkan beberapa file CSS ke dalam satu file.
Contoh:
Simpan kode ini ke dalam file style2.css.
h2 {color: blue;}Kemudian edit file style.css yang sebelumnya telah dibuat. Tambahkan tag import yang meng-import file style2.css.
@import url("style2.css");
p {
font-family: arial;
font-size: small;
}
h1 {color: red;}Selanjutnya memanggil file style.css ke dalam HTML. Seperti contoh berikut berikut.
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>
Ini paragraf
</p>
</body>
</html> |
| Hasil |
Perlu diperhatikan bahwa penggunaan link memiliki performa yang lebih cepat dibandingkan dengan import. Karena pada link, load kode CSS dilakukan secara paralel (bersamaan). Sedangkan pada import, load kode CSS dilakukan secara serial (berurutan).
Itulah 4 cara memasang kode CSS ke HTML.
Baik, itu saja artikel 4 Cara Memasang Kode CSS ke HTML yang Saya buat kali ini. Semoga bermanfaat.
Posting Komentar untuk "4 Cara Memasang Kode CSS ke HTML"