Sebelumnya kita sudah belajar tentang apa yang disebut dengan CSS. Sedikit review kembali, CSS adalah script markah yang dipakai agar sebuah halaman web dapat terlihat ciamik. Halaman web akan menjadi buruk rupa apabila tidak dibarengi dengan CSS. Nah, ada berbagai cara penulisan CSS di dalam HTML. Apa saja?
3 Cara Penulisan CSS di Dalam HTML
Pada artikel sebelumnya juga kita sudah mencoba untuk membuat sebuah script CSS secara sederhana yang fungsinya untuk mengganti font yang mana secara default adalah Times menjadi Aharoni.
Tapi Anda tahu tidak? Ternyata ada 3 cara atau metode yang bisa dipakai untuk menuliskan script CSS ini. Cus kita simak bareng-bareng.
Internal Method
Yang pertama ada internal method, yakni script css dijadikan satu dengan script html, dan untuk formatnya tetap *.html.
Cara ini bisa gunakan ketika ingin mengubah design-nya secara spesifik dan tidak ingin perubahan ini terjadi pada halaman yang lain. Pada internal method, script CSS diletakkan di antara kode <style></style> dan berada diatas kode </head> agar perubahannya bisa memberikan efek, karena cara eksekusinya itu urut dari atas ke bawah.
Tetapi apabila Anda menggunakan metode ini pada seluruh halaman HTML, tentu Anda akan kesulitan saat ingin memberi CSS secara general, yang akan berefek pada seluruh selector di semua halaman HTML. Nah, untuk mengatasinya, gunakan internal method hanya pada CSS selector yang spesifik saja, pada halaman tertentu. Kalau banyak yang sama dengan halaman lain, dibuat general aja.
Contoh penulisan CSS untuk internal method adalah kurang lebih sebagai berikut:
<html>
<head>
<title>Internal CSS</title>
<style>
h1
{
color: red;
}
</style>
</head>
<body>
<h1>Ini Adalah Tulisan Merah - Makinrajin</h1>
</body>
</html>External Method
Setelah internal, ada eksternal. Metode eksternal ini dilakukan dengan memisahkan antara script CSS dan HTML. Agar CSS-nya ngefek di HTML, dihubungkan dengan menggunakan tag <link>. Contohnya seperti berikut :
<link href=”style.css” rel=”stylesheet” type="text/css">Selain itu, juga ada cara lain untuk memanggil file CSS, yaitu dengan menggunakan @import. Untuk penulisannya bisa dilihat di bawah ini :
@import "style.css";Sangat simple kan ? Semua script CSS yang awalnya ada di antara <style></style>, dipindah ke sebuah file yang bernama style.css tanpa adanya <style>.
Metode ini cukup banyak yang memakainya. Kebanyakan orang menganggap, cara ini cukup memudahkan dalam proses pengembangan. Selain mudah dicari, script HTML-nya juga enak dilihat karena tidak ada banyak baris kode. Biasanya, metode ini dipakai pada saat mengkode CSS yang pada setiap halaman itu sama wujudnya.
Inline Method
Seperti yang sudah kita pelajari di atas, ada internal ada eksternal. External method dipakai untuk css yang diterapkan secara umum, dan Internal method dipakai untuk css yang selector-nya spesifik. Namun terkadang, meskipun sudah memakai internal css, tetap saja tidak ada pengaruhnya. Entah kalau gini saya juga bingung.
Walau gitu, kalau Anda ingin mengubahnya (spesifik) dan tidak berpengaruh apapun, Anda bisa memakai metode yang terakhir, yakni Inline Method.
Sesuai namanya, CSS dengan metode ini ditulis sejajar dengan div-nya (selector-nya). Sintaks-sintaks CSS yang sebelumnya ada di antara <style> dipindah ke dalam atribut style yang disisipkan pada div yang akan diberi css khusus. Cara ngetiknya seperti ini.
<div class=”contoh” style=”background-color: red;”>Halo dunia</div>Cara ini sebaiknya tidak terlalu sering Anda gunakan. Kalau tetap ngeyel pakai metode ini, script Anda bakalan sulit buat dibaca orang lain. Dan hal ini akan menghambat proses pengembangan jika Anda memiliki partner untuk mengembangkan bersama.
Jadi kesimpulannya adalah menggunakan metode atau cara external adalah penulisan CSS terbaik, karena akan lebih mudah dibaca, terutama jika Anda bekerja secara tim dalam membuat sebuah website.
Tentunya partner Anda akan lebih mudah membaca kode CSS yang telah Anda buat jika Anda memisahkannya dengan HTML.
I’m an experienced SEO Specialist who can grow a website through organic channel. I’m also passionate about digital marketing and web development