Basic-CSS POST CSS

Basic CSS - Cara Menggunakan CSS

Cara Menggunakan CSS

Materi sebelumnya kita masih banyak bahas tentang teori, padi kali ini kita akan mencobakan lansung untuk menghubungkan CSS dengan HTML. Ada banyak cara untuk menghubungkan CSS dengan HTML. Pembahasan tersebut akan kita bahas sekarang juga.

Penggunaan CSS

CSS dapat di kita gunakan dengan berbagai cara. Ada 3 cara yang umum digunakan oleh para developer untuk mendesain halaman website mereka, yaitu :

  • External CSS
  • Internal CSS
  • Inline CSS

Mari kita bahas satu persatu cara penggunaan CSS.

External CSS

Menggunakan Eksternal CSS kita dapat mengubah tampilan seluruh halaman Website dengan hanya merubah satu file saja. Akan tetapi setiap halaman HTML harus mereferensikan atau menghubungkan file CSS dengan tag <link>. Mungkin teman-teman disini masih bingung bagaimana cara untuk menghubungkannya.

Sekarang mari kita buat sebuah file HTML dengan nama index.html. Lalu buatlah struktur HTML biasa seperti berikut :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Selamat datang</h1>
</body>
</html>

Pada contoh di atas, saya membuat sebuah struktur HTML biasa, dengan menambahkan beberapa tag baru seperti tag <link>. Tag tersebut berfungsi untuk menghubungkan file CSS dengan mendefenisikan attribut href dan nama file CSS nya. Tag <link> di simpan di dalam tag <head>.

Di dalam tag <body> saya menulis tag <h1> yang nanti akan di rubah stylenya menggunakan CSS eksternal.

Sekarang mari kita buat file CSS dengan nama style.css. Perhatikan, nama file harus sama dengan nama yang di maskukkan di attribut href pada tag <link>

h1{
    color: red;
}

Maka hasilnya pada browser seperti gambar berikut :

example-eksternal-css

Internal CSS

Selanjutnya kita akan melakukan perubah menggunakan CSS dengan Internal CSS, teman-teman mungkin sudah tau nih internal CSS seperti apa. Yap betul, internal CSS merupakan kebalikan dari eksternal CSS. Yaitu kita melakukan perubahan tag HTML dengan menuliskan script CSS di dalam file HTML. akan tetapi cara ini tidak direkomendasikan. Karena style css yang telah kita buat tidak dapat kita gunakan di file HTML lainnya, kecuali teman-teman menyalin script tersebut. Lantas bagaimana cara membuatnya, yuk kita buat scriptnya. sekarang coba kita buat sebuah file HTML dengan nama internal-css.html. Lalu buatlah script seperti berikut.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<style>
    h1{
        color: red;
    }
</style>
<body>
    <h1>Selamat datang</h1>
</body>
</html>

Maka hasilnya pasti sama dengan gambar yang sebelumnya kita buat menggunakan eksternal CSS, jika tidak, silahkan periksa kembali script yang teman-teman buat.

Inline CSS

Inline CSS yaitu menambahkan style CSS di dalam barisan tag HTML, mungkin penjelasannya sedikit membingungkan kalau tidak di praktekan ya. Sekarang coba perhatikan script berikut:

<h1 style="color:red;">selamat datang</h1>

Kita dapat membuat script CSS di dalam tag HTML seperti script di atas. Tapi teman-teman harus menambahkan attrubut style pada tag HTML tersebut. Dengan begitu kita dapat menambahkan property CSS di dalamnya.

Kesimpulan

Dari 3 cara menggunakan CSS pada HTML yang lebih efektif digunakan yaitu dengan cara pertama, yaitu dengan memisahkan file HTML dengan file CSS. Kode yang kamu buat akan menjadi lebih rapi dan mudah di pahami oleh programmer lain.