CSS atau bisa yang disebut Cascading Style Sheet merupakan salah satu bahasa pemrograman web yang digunakan untuk mendesign tampilan halaman HTML seperti memberi warna, mengatur letak posisi suatu elemen, dll. Lalu bagaimana cara memasukkan CSS pada HTML ?? yup terdapat berbagai cara, tepatnya 3 metode yang dapat kalian lakukan untuk memasukkan CSS pada HTML. Setiap metode memiliki tingkat prioritas yang berbeda-beda yang akan kita bahas pada artikel ini. Sekilas 3 cara memasukkan CSS pada HTML yaitu secara:
Apa itu tingkat prioritas ?? tingkat prioritas adalah penggunaan salah satu kode oleh mesin jika terdapat 2 kode CSS atau lebih yang sama. Jadi jika kalian memiliki 2 kode atau lebih yang sama, salah satunya akan digunakan dan sisanya akan diabaikan oleh mesin pembaca. Seperti yang disebutkan di atas, tingkat prioritas pembacaan kode CSS oleh mesin tergantung pada metode mana yang kalian gunakan. Berikut 3 Cara Memasukkan CSS pada HTML:
Menggunakan Link (External)
Memasukkan CSS menggunakan link external dilakukan dengan cara membuat file dengan format ".css" yang berisi baris kode CSS. Kemudian menguploadnya ke web server kalian dan mengkoneksikan file tersebut dengan menggunakan tag pada bagian
head di halaman yang kalian inginkan. Contoh:
<head>
<link rel="stylesheet" href="http://ift.tt/2da3sIS" >
</head>
Biasanya metode ini dilakukan oleh website yang sudah mempunyai layanan hosting. Metode ini pada blogger tidak dapat dilakukan karena pada blogger kita tidak bisa mengupload file css nya ke root directory web. Kalian tetap bisa menggunakan link css external pada blogger tetapi dengan link di luar website blogger tersebut.
Tingkat prioritas dengan menggunakan link external itu rendah.
Menggunakan Tag style di Bagian Head (Internal)
Adapun cara lain untuk memasukkan css pada HTML yaitu dengan menggunakan tag
style pada bagian
head di halaman yang kalian inginkan. Contoh:
<head>
<style>
body {
max-width: 70%;
margin: auto;
padding: 10px;
}
h2 {
font-size: 1.8em;
color: forestgreen;
}
</style>
</head>
Metode ini bisa dilakukan pada blogger dan biasanya tag
style..
/style pada blogger terdapat sebelum tag
/head. Cara memasukan CSS dengan menggunakan tag
style ini mempuyai prioritas yang tinggi.
Memasukkan Atribut Style Pada Elemen HTML (Inline)
Tidak berbeda jauh dengan cara yang kedua, kita tetap menggunakan style tetapi sebagai atribut suatu elemen. Kita langsung mengetikan kode pada elemen yang ingin di design. Penempatan kode tersebut bisa dimana saja bergantung pada elemen yang ingin di design. Contoh mimin ingin mengubah ukuran dan warna h2 pada suatu halaman maka:
<body>
<h2 style="font-size: 1.8em; color: forestgreen;" >Blog kita </h2>
</body>
Cara dengan menggunakan atribut style pada elemen HTML memiliki tingkat prioritas yang sangat tinggi.
Itulah beberapa cara yang dapat kalian lakukan untuk memasukkan css pada halaman HTML. Jadi tingkat prioritas paling tinggi itu adalah pada metode inline. Jika kalian mempunyai salah satu kode CSS yang sama pada 3 metode di atas, maka kode yang akan digunakan adalah kode yang terdapat pada metode inline. Berikut tabel prioritas pada setiap metode.
| External |
Internal |
Inline |
| Rendah |
Tinggi |
Sangat Tinggi |
Rekomendasi Penggunaan Metode
Adapun rekomendasi dari mimin yaitu dengan menggunakan metode link External. Selain banyak di gunakan oleh banyak web developer, cara ini juga praktis dalam mendesign langsung banyak halaman tanpa harus mendesignya satu-satu tiap halaman. Dengan menggunakan metode link External, maka situs web kalian akan lebih cepat karena web browser hanya butuh 1x untuk me-load file cssnya yang kemudian akan di simpan pada memori cache.