3 Langkah Memasukan Kode CSS ke Dalam Halaman HTML

3 Langkah Memasukan Kode CSS ke Dalam Halaman HTML

3 Langkah Memasukan Kode CSS ke Dalam Halaman HTML – Bertemu lagi bareng kita Koding Budi yang senantiasa membahas seputar pemrograman. Dan kali ini Koding Budi berkesempatan untuk membahas 3 Langkah Memasukan Kode CSS ke Dalam Halaman HTML.

Pada dasarnya, ada 3 langkah menginput kode CSS ke dalam HTML, yakni metode Inline Style, Internal Style Sheets, serta Eksternal Style Sheets.

Metode Inline Style

Metode Inline Style ialah langkah menginput kode CSS langsung ke dalam tag HTML dengan memakai atribut style, contoh pemakaian Metode Inline Style CSS ialah seperti berikut:

<!DOCTYPE html>
<html>
<head>
     <title>Contoh Inline Style CSS</title>
</head>
   <body>
      <h2 style="background-color:black; color:white" >
         Text ini akan bewarna putih dan background warna hitam
      </h2>
   </body>
</html>

Dalam kode diatas, saya menyisipkan atribut style pada tag <h2>, nilai dari atribut style ini adalah kode CSS yang ingin diterapkan.

Pemakaian tag CSS semacam ini meskipun praktis, tetapi tidak dianjurkan, sebab kode CSS langsung tergabung dengan HTML, serta tidak memenuhi tujuan dibuatnya CSS supaya desain terpisah dengan konten.

Metode Internal Style Sheets

Metode Internal Style Sheets, atau disebutkan Embedded Style Sheets dipakai untuk memisahkan kode CSS dari tag HTML namun dalam satu halaman HTML. Atribut style yang awalnya ada di tag, dikumpulkan pada pada sebuah tag <style>. Tag style ini harus berada pada bagian <head> dari halaman HTML. Contoh penggunaan motode internal style sheets CSS :

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Internal Style CSS</title>
    <style type="text/css">
        h2 {
        background-color:black;
        color:white;
        }
    </style>
</head>
<body>
    <h2>
        Text ini akan bewarna putih dan background warna hitam
    </h2>
</body>
</html>

Contoh metode internal style sheets di atas sudah jauh lebih baik dibanding inline style, sebab kita telah memisahkan CSS dari HTML. Semua kode CSS akan berada pada tag head dari HTML.

Tetapi kekurangan memakai internal style sheets, bila kita mempunyai beberapa halaman dengan style yang sama, maka kita harus membuat kode CSS pada masing-masing halaman tersebut . Ini bisa diatasi dengan memakai metode external style sheets.

Metode External Style Sheets

Kekurangan dari metode internal style sheets awalnya ialah bila ingin membuat beberapa halaman dengan penampilan yang sama, karena itu tiap halaman akan mempunyai kode CSS yang sama.

Cara Eksternal Style Sheets dipakai untuk ‘mengangkat’ kode CSS itu kedalam sebuah file tersendiri yang terpisah sepenuhnya dari halaman HTML. Setiap halaman yang membutuhkan kode CSS, tinggal ‘memanggil’ file CSS tersebut .

Masih menggunakan contoh yang sama juga dengan internal style sheets, tahap pertama kita akan pindahkan isi dari tag <style> ke sebuah halaman baru, dan savelah sebagai belajar.css

Isi dari file belajar.css :

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

Pastikan jika akhiran dari file itu ialah .css serta untuk keperluan contoh kali ini, savelah pada folder yang sama juga dengan halaman HTML kita.

Kembali kehalaman HTML, CSS menyiapkan 2 langkah untuk menginput Kode CSS itu ke halaman HTML, yang pertama ialah memakai @import

Contoh penggunaan @import CSS:

<!DOCTYPE html>
<html>
<head>
    <title>Contoh External Style CSS</title>
    <style type="text/css">
        @import url(belajar.css);
    </style>
</head>
<body>
    <h2>
        Text ini akan bewarna putih dan background warna hitam
    </h2>
</body>
</html>

Untuk metode @import external style sheets ini, kita menyisipkan @import url(belajar.css); pada tag <style>. Alamat pada bagian url bisa berupa alaman relatif (seperti: folderku/belajar.css) maupun absolut (seperti www.duniailkom.com/belajar.css).

Cara input kedua external style sheets, adalah menggunakan tag <link>. Berikut contohnya:

<!DOCTYPE html>
<html>
<head>
    <title>Contoh External Style CSS</title>
    <link rel="stylesheet" type="text/css" href="belajar.css">
</head>
<body>
    <h2>
        Text ini akan bewarna putih dan background warna hitam
    </h2>
</body>
</html>

Pada metode link external style sheets ini, kita menggunakan atribut href pada tag <link>, yang akan berisi alamat dari halaman CSS, dalam hal ini belajar.css

Dari ketiga jenis cara input CSS ke dalam halaman HTML, yang paling direkomendasikan adalah metode external style sheets, baik menggunakan @import maupun dengan tag <link>. Karena dengan menggunakan kode CSS yang dipisahkan, seluruh halaman web dapat menggunakan file CSS yang sama, dan jika kita ingin mengubah seluruh tampilan halaman website, kita hanya butuh mengubah 1 file CSS saja.

You May Also Like

About the Author: admin

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *