Artikel ini akan menjawab pertanyaan yang kamu lihat pada judul diatas. Sebelumnya, apakah kamu sudah tahu apa itu CSS? Atau kamu belum tahu juga apa itu HTML? HTML atau HyperText Markup Languange adalah bahasa dasar yang digunakan untuk mengatur penampilan informasi pada sebuah halaman web. CSS atau Cascading Style Sheets merupakan pendamping HTML, yaitu aturan-aturan untuk mengendalikan komponen-komponen HTML dalam sebuah web agar terstruktur dan seragam (source: wikipedia). CSS sebenarnya bukanlah jenis bahasa, karena fungsinya hanya menetapkan aturan-aturan untuk komponen-komponen HTML.
Lalu sebenarnya, apakah sulit menemukan CSS di dalam dokumen HTML? Bersembunyi dimanakah kode itu?
Sebenarnya, kita bukan mau bermain “cari dan sembunyi” dengan CSS. Tapi, pada artikel ini akan dijelaskan 3 posisi CSS yang mungkin diletakan pada dokumen HTML, atau bisa disebut “Metode Menggunakan CSS”. Mari simak informasi berikut:
1. Di Dalam Tag HTML (Inline HTML Tag)
Tulisan berwarna biru yang ada dalam attribute “style” merupakan CSS. Pada poin ini, CSS diletakan di dalam tag HTML melalui attribute “style”. CSS pada contoh diatas akan mengatur elemen div agar berukuran panjang 100 pixel dan tinggi 100 pixel juga, dan background berwarna biru. Namun, hanya SATU div yang diatur. Elemen div lain yang ingin diatur sama dengan elemen div diatas harus ditulis ulang aturannya.
Inline CSS to HTML Tag PERTAMA
Inline CSS to HTML Tag KEDUA
Inline CSS to HTML TAG KETIGA
Pada contoh diatas, saya tambahkan beberapa aturan CSS pada elemen div, dan saya buat 2 elemen div tambahan yang aturannya sama. Untungnya hanya tiga, bagaimana jika ada 10 elemen div yang aturannya sama? Mungkin awalnya bisa copy paste, tapi ketika sudah terbentuk 10 elemen div, kemudian kamu ingin mengganti warna background dari kesepuluh elemen itu, tentu tidak efektif.
Oleh karena itu, gunakan cara pada poin pertama ini untuk mengatur elemen yang tidak banyak jumlah elemen yang aturannya sama. Kamu bisa mengukur sendiri cara yang akan kamu gunakan.
2. Ditanamkan di Dalam Dokumen HTML (Embedded CSS)
#Note: Supaya kamu dapat memahami kode di bawah ada baiknya kamu mengetahui apa itu ID dan CLASS.
<html>
<head>
<style>
body {background: #eee;}
#wrapper {
margin: 10px auto;
padding: 10px;
width: 1000px;
height: 500px;
background: yellow;
}
.smallbox {
padding: 5px;
width: 80%;
height: 90%;
border: 2px solid #f00;
}
</style>
</head>
<body>
font-size: 7px; color: #f00;“>BOX 1
</div>
</div>
</div>
font-size: 7px; color: #0f0;“>BOX 2
</div>
</div>
</div>
font-size: 7px; color: #00f;“>BOX 3
</div>
</div>
</div>
</body>
</html>
Nah, kutipan kode diatas cukup panjang. Tidak rumit sebenarnya, hanya bertingkat-tingkat saja. Kutipan kode HTML diatas merupakan contoh yang disebut “embedded CSS“. Pada poin kedua ini, CSS diapit oleh tag <stlye></style> yang berada diantara tag <head></head>. Begitulah cara kedua untuk menempatkan CSS.
Cara ini lebih efektif untuk menangani banyak elemen yang aturan CSS-nya sama. Sekarang, untuk mengganti width dari setiap elemen div ber-class “smallbox” misalnya, kamu tinggal menggati width yang mengatur aturan class “smallbox” yang berada di tag <head>, tidak perlu lagi memberi aturan pada masing-masing div.
3. CSS Terhubung (Linked CSS)
index.html
<html>
<head>
<title>Linked CSS</title>
<link rel=”stylesheet” href=”style.css” type=”text/css”>
</head>
<body>
font-size: 7px; color: #f00;“>BOX 1
</div>
</div>
</div>
font-size: 7px; color: #0f0;“>BOX 2
</div>
</div>
</div>
font-size: 7px; color: #00f;“>BOX 3
</div>
</div>
</div>
</body>
</html>
style.css
#wrapper {
margin: 10px auto;
padding: 10px;
width: 1000px;
height: 500px;
background: yellow;
}
.smallbox {
padding: 5px;
width: 80%;
height: 90%;
border: 2px solid #f00;
}
Metode ini intinya, CSS ditempatkan di file terpisah dengan file HTML. Pada contoh diatas, hampir tidak ada yang diubah, hanya ditambahkan:
<link rel=”stylesheet” href=”style.css” type=”text/css”>
pada tag <head>. File CSS “style.css” disertakan pada attribute “href“.
Apa untungnya dari metode ini?
Coba kita lihat apa untungnya dari metode kedua. Untungnya adalah mengefektifkan penggunaan aturan CSS pada elemen-elemen yang aturannya sama dalam satu halaman web.
Nah, keuntungan metode ketiga ini adalah mengefektifkan penggunaan aturan CSS pada elemen-elemen yang aturannya sama dalam beberapa halaman web.
Jadi, satu file “style.css” bisa digunakan untuk beberapa halaman web.
Sekian….
Begitulah sobat, ketiga metode menempatkan CSS dalam HTML. Ketiga cara itu memiliki keuntungan masing-masing, sekarang tergantung cara kamu memanfaatkannya supaya efektif.
~ Semangat!
ICT SMAN 5 Bekasi Blog! 