Cara Menggunakan CSS Di HTML | Kita Ngoding CSS #04

Menggunakan CSS.- Untuk Tutorial CSS yang ke-4 ini admin ingin membahas tentang Cara Memasukkan Kode CSS Pada HTML.

Setelah belajar apa itu CSS, Struktur CSS, Selector Pada CSS dan sekarang waktunya kita belajar bagaimana menginplementasikan kode CSS tersebut kedalam Kode HTML.

Menempatkan Kode CSS yang benar pada suatu kode HTML adalah suatu keharusan yang mesti diketahui oleh seorang pengembang web.

Karena apabila seorang developer suatu website menempatkan kode css tidak pada tempatnya maka bukan hanya menghasilkan tampilan website yang berantakan, penempatan css yang keliru juga dapat menghasilkan error pada HTML.

Sudah terbayang bagaiman pentingnya materi kita hari ini?

Jika sudah, maka mari belajar dengan mode serius. 😀

Cara Menggunakan CSS Di HTML | Kita Ngoding CSS #04 |

Cara Menggunakan CSS pada HTML

Terdapat 3 cara dalam menyisipkan CSS pada HTML yaitu :

Inline CSS : Menempatkan kode CSS secara langsung di satu element HTML, sehingga hanya akan berpengaruh terhadap satu element tersebut.
Internal CSS : Menempatkan kode CSS pada bagian tag head, cara ini dapat digunakan oleh element-element yang ada pada satu halaman.
External CSS : Menempatkan kode CSS pada pada suatu file yang ber-extensi “.css” sehingga kita perlu memanggil file tersebut untuk dapat menerapkannya ke dalam halaman html kita.

Sebenarnya ini telah kita bahas pada pertemuan sebelumnya. Hanya saja untuk pertemuan kali ini, kita akan belajar langsung dengan kode html yang telah disiapkan.

Baca Juga : Pengertian CSS dan Fungsinya

Contoh Inline CSS pada HTML

<!DOCTYPE html>
<html>
<head>
  <title>Menggunakan CSS Di HTML</title>
</head>
<body>
  <h1 style="color:blue;text-align:center;">Contoh Menggunakan CSS Inline pada tag h1</h1>
  <p style="color:red;">Contoh Menggunakan CSS Inline tag paragraf</p>
</body>
</html>

Contoh Internal CSS Pada HTML

<!DOCTYPE html>
<html>
<head>
  <title>Menggunakan CSS Di HTML</title>
<!-- Contoh CSS Internal -->
<style> 
  h1, h2, p {
    text-align: center;
    color: red;
  }
</style>
<!-- Contoh CSS Internal -->
</head>
<body>
  <h1>Contoh Menggunakan CSS Inline pada tag h1</h1>
  <p>Contoh Menggunakan CSS Inline tag paragraf</p>
</body>
</html>

Contoh External CSS Pada HTML

Sementara, Untuk External CSS kita hanya perlu melakukan pemanggilan terhadap file.css dari luar sebelum digunakan dengan kode seperti dibawah ini.

<head>
    <link rel="stylesheet"  type="text/css"  href=fileCSSAnda.css">
</head>

Selanjutnya tinggal mengikuti aturan CSS dari kode yang ada didalam fileCSSAnda.css dan perhatikan selector yang digunakan.

Baca Juga : Selector Pada CSS

Supaya sahabat makin mahir dalam menerapkan css pada html, jangan lupa untuk terus berlatih. Karena dalam belajar bahasa pemrograman, yang dibutuhkan adalah ketekunan dalam berlatih sytax dan jangan takut error, sebab error adalah suatu hal yang lumrah terjadi dalam dunia koding.

Artikel Lainnya :

Pengertian CSS dan Fungsinya | Kita Ngoding CSS #01 |

Syntax CSS | Kita Ngoding CSS #02 |

Selector Pada CSS | Kita Ngoding CSS #03 |

Cara Menggunakan CSS Di HTML | Kita Ngoding CSS #04 |

Membuat Komentar Di CSS | Kita Ngoding CSS #05 |

Code Warna Dalam CSS | Kita Ngoding CSS #06 |

Kode Background CSS | Kita Ngoding CSS #07 |

Cara Membuat Border Di CSS | Kita Ngoding CSS #08 |

Magin Dan Padding Pada CSS | Kita Ngoding CSS #09 |

CSS Height Dan Width | Kita Ngoding CSS #10 |

Box Model CSS | Kita Ngoding CSS #11 |