CSS | Penggunaan CSS

Cascading Style Sheet adalah suatu pemrograman yang biasa digunakan oleh Front End web developer untuk mempercantik website yang mereka buat. CSS Sendiri bisa dibilang tidak terlalu sulit untuk digunakan, kita bisa mengaplikasikan CSS ke dalam Website yang akan kita buat melalui 3 metode, diantaranya adalah Inline, Internal, Dan External.

Penggunaan CSS Inline sangatlah efektif apabila kita hanya ingin menambahkan style pada 1 elemen, Contoh penggunaan CSS Inline adalah sebagai berikut;

<p style="color:red;">Inline CSS</p>

Berikutnya, Penggunaan CSS Internal juga membutuhkan waktu yang lebih sedikit apabila dibandingkan dengan penggunaan CSS secara External (External CSS), karena kita tidak perlu ngoding 2 file, Kita hanya ngoding CSS Didalam file HTML Yang telah kita buat sebelumnya. contoh penggunaan CSS Internal adalah sebagai berikut;

<!DOCTYPE html>
<html>
  <head>
    <title>CSS Internal</title>
    <!--CSS-->
    <style>
      .CSS {
        color: red;
        background-color: black;
      }
    </style>
    <!--Akhir CSS-->
  </head>
  <body>
    <h1 class="CSS">Internal CSS</h1>
  </body>
</html>

Berikutnya, Penggunaan CSS Secara External (External CSS). kelebihan menggunakan metode External CSS Adalah, file HTML Yang telah kita buat memiliki ukuran yang lebih kecil dibandingkan dengan penggunaan CSS Secara Inline maupun Internal. Disini, kita menggunakan CSS External yang mana harus menghubungkan file style.css dengan file HTML Yang telah kita buat sebelumnya. perlu diingat, letak kita menyimpan file CSS dan HTML harus berada di 1 folder yang sama. berikut adalah contohnya;

Baca Juga  Cross Site Scripting (XSS) & Cara Patch Bug Tersebut

Isi dari file HTML yang telah kita buat sebelumnya

<!DOCTYPE html>
<html>
<head>
    <title>CSS External</title>
    <!--Tag penyambung file html dengan file CSS-->
    <link rel="stylesheet" type="text/css" href="style.css">
    <!--Akhir Tag Penyambung-->
</head>
<body>
    <h2>External CSS</h2>
</body>
</html>

Isi dari file style.css

h2 {
  background-color:black;
  color:white;
  }

Lalu kita simpan semua file kedalam 1 folder yang sama, lalu jalankan.

Terimakasih , kurang lebihnya saya mohon maaf.

Baca Juga  Cara Memperbaiki Bug Clickjacking Pada Website

Related Post

Leave a Reply

Your email address will not be published.