Belajar CSS

Cara Memasukan Kode CSS Ke Dalam HTML

Cara Memasukan Kode CSS Ke Dalam HTML
Written by pintasku

Blog Pintasku kali ini akan membahas seputar Belajar Dasar CSS, sebelumnya saya pernah membuat postingan tentang Apa itu CSS ? sekarang saya akan menjelaskan Cara Memasukan CSS kedalam HTML.

Sebelumnya juga saya pernah membuat Tutorial Belajar HTML, pada tahap pembelajaran HTML kita mengetahui bawha HTML itu adalah sekumpulan tag tag dimana tag itu nantinya akan akan disusun sebagaimana fungsi dari tag tersebut. Untuk sekarang kita akan mempelajari CSS, dimana css itu berfungsi untuk menghias atau mempercantik tag tag didalam HTML.

Cara Memasukan Kode CSS Ke Dalam HTML

Untuk memasukan sebuah kode CSS kedalam HTML itu pada umumnya ada 3 cara, yaitu :
  1. Inline CSS
  2. Internal CSS
  3. External CSS

1. Inline CSS

Inline CSS adalah Penulisan dengan cara menuliskan CSS kedalam kode HTML atau Tag yang dimaksud dengan menggunakan atribut style. Untuk lebih jelasnya saya pernah menjelaskannya pada artikel saya tentang Mengenal Atribut Style Di HTML

2. Internal CSS

Internal CSS adalah penulisan yang berada didalam dokumen HTML dan dalam menggunakan gaya penulisan Internal biasanya CSS itu selalu menggunakan Tag <style> dan pada umumnya tag <style> di letakan pada bagian Tag <head>.

Berikut ini adalah contoh Penggunaan Internal CSS di dalam HTML.

Menggunakan metode penulisan CSS secara internal itu lebih baik daripada menggunakan metode penulisan secara inline, karena kita memisahkan bagian antara CSS dengan HTML jadi itu akan lebih mempermudah dalam pengeditan, tetapi metode ini juga memiliki kekurangan.

Kekurangan dari metode ini adalah karena kita menyimpan kode CSS tersebut di dalam dokumen HTML dan jika kita membuat dokumen HTML yang berbeda tetapi menggunakan tag yang sama, kita harus menulis ulang setiap kode CSS yang ada.

3. Eksternal CSS

Metode Eksternal, Metode ini menggunakan cara diluar dokumen HTML jadi kita tidak perlu menuliskan kode CSS di dalam dokumen tersebut kita hanya perlu menuliskan kode CSSnya diluar filenya itu berekstensi .css misalnya : pintasku.css nahh untuk menerapkannya pada HTML kita hanya perlu memanggilnya. Bahkan dengan Metode Penulisan Eksternal itu bisa membuat Loading Halaman atau page kita lebih mudah dan juga Para Web Desainer Professional lebih menyukai Metode penulisan Eksternal karena lebih Efesien dan lebih mudah dalam mengeditnya.

Supaya bisa mengerti kita akan ke praktiknya saja. Masih menggunakan kode HTML seperti pada contoh inlternal CSS tetapi kita harus memindahkan isi dari tag <style> pada sebuah dokumen baru lalu simpan dengan ekstensi .css , saya di sini menyimpan dengan nama eksternal.css

Berikut ini adalah kode dari file eksternal.css

Jangan lupa untuk selalu menyimpannya dengan ekstensi .css dan simpan pada 1 folder dengan dokumen HTML.

Sekarang kita akan memanggil kode CSS dari file eksternal.css supaya bisa berjalan di dokumen HTML. Pada umumnya ada 2 cara pemanggilan kode CSS itu, yaitu :

1. Menggunakan @import

Untuk metode @import pemanggilannya itu cukup gampang, tetapi metode ini masih menggunakan Tag <style> jadi @import itu berada di dalam tag <style>.

Berikut ini adalah contoh penggunaan metode@import.

2. Menggunakan Tag <link>

Nahh sedangkan untuk metode tag <link> kita menggunakan atribut href yang nantinya akan berisi alamat dari file css. Contoh penggunaan tag link dalam eksternal CSS.

Nahh dari ketiga metode ini menurut saya pribadi lebih mudah menggunakan metode eksternal, karena kita memisahkan file HTML dan file CSS jadi lebih mudah dan efesien dalam pengeditan.

Sekian Tutorial tentang Cara Input CSS ke HTML semoga tutorial ini bisa bermanfaat dan membantu sobat. Terimakasih.

Tentang Penulis

pintasku

Pintasku was established since 2015. Starting from a personal blog and now turned into a group of web developers. Pintasku provides web development, hosting, and domain register services