penulisan css

Belajar CSS : 3 Cara Penulisan CSS Dalam HTML. Mana yang Terbaik ?

freepik.com

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.

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. Metode ini sudah pernah kita gunakan pada tutorial sebelumnya. Contohnya bisa dilihat di artikel dengan judul Belajar CSS : Apa itu CSS? Pengertian, Konsep, Struktur, dan Kode Program CSS.

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 ngefek, soalnya cara eksekusinya itu urut dari atas ke bawah.

Panduan Belajar CSS Dasar

belajar css

Panduan Belajar HTML Dasar

belajar html dasar

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 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>.

belajar css dasar
Modern responsive web design developing on all mobile and desktop devices. EPS 10 vector. freepik.com

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.

Daftar Isi

Panduan Sebelumnya : 

Apa itu CSS ? Pengertian, Konsep, Struktur, dan Kode Program CSS

Panduan Selanjutnya : 

12 Contoh CSS Selektor Yang Paling Sering Digunakan Dalam Membuat Sebuah Website

 

4 thoughts on “Belajar CSS : 3 Cara Penulisan CSS Dalam HTML. Mana yang Terbaik ?

  1. Terima kasih atas infonya. Simpulannya ada 3 penulisan cara css, bisa di definisikan (di letakaan) di atas (head) sebelum body di file yang sama, bisa di file lain (file css tersendiri), bisa juga langsung di tag pada body yang ingin di rubah.

Leave a Reply

Your email address will not be published. Required fields are marked *