Blog Pintasku: Cara Memasukan Kode CSS Ke Dalam HTML

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.

Nahh 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 Input CSS Ke Dalam HTML

Untuk memasukan sebuah kode CSS kedalam HTML itu pada umumnya ada 3 cara, yaitu :

Inline CSS
Internal CSS
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.

<!DOCTYPE html>
<html>
<head>
<title>Belajar CSS</title>
<style>
body {background:blue;} 
h1 {color:yellow} 
p {color:white;} 
</style> 
</head> 
<body>
<h1>Penggunaan Internal CSS</h1> 
<p>Tulisan pada Judul akan berwarna kuning sedangkan tulisan ini berwarna putih</p> 
</body>
</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

body {
   background:blue;
} 
h1 {
    color:yellow
} 
p {
    color:white;
}

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

Nahh 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 :

Menggunakan @import

@import

@import.

<!DOCTYPE html>
<html>
<head>
<title>Belajar CSS</title>
<style type="text/css">
        @import url(eksternal.css);
    </style>
</head> 
<body>
<h1>Penggunaan eksternal CSS</h1> 
<p>Tulisan pada Judul akan berwarna kuning sedangkan tulisan ini berwarna putih</p> 
</body>
</html>

Menggunakan Tag <link>

<!DOCTYPE html>
<html>
<head>
<title>Belajar CSS</title>
<link rel="stylesheet" type="text/css" href="eksternal.css">
</head> 
<body>
<h1>Penggunaan eksternal CSS</h1> 
<p>Tulisan pada Judul akan berwarna kuning sedangkan tulisan ini berwarna putih</p> 
</body>
</html>

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.

Cara Memasukan Kode CSS Ke Dalam HTML

Cara Input CSS Ke Dalam HTML

1. Inline CSS

2. Internal CSS

3. Eksternal CSS

2 comments:

Mengenai Saya