Cara Memasukkan Kode CSS ke Halaman HTML

belajar HTML dan CSS untuk pemula

Bila dalam tutorial CSS sebelumnya kita sudah mempelajari Pengertian CSS, pada tutorial saat ini kita akan mengulas cara memasukkan kode CSS ke halaman HTML.

Sebagaimana sudah dipelajari di waktu pembahasan tentang HTML (di artikel tutorial belajar HTML), HTML pada hakikatnya  ialah kumpulan dari tag-tag yang disusun sehingga mempunyai bagian-bagian tertentu, seperti paragraf, daftar, tabel dan lain-lain. CSS dipakai untuk merancang tag-tag HTML ini.

Secara umum, terdapat 3 cara memasukkan kode CSS ke dalam HTML, yaitu metode Inline Style, Internal Style Sheets, dan External Style Sheets.

Metode Inline Style

Metode Inline Style ialah cara memasukkan kode CSS langsung ke dalam tag HTML dengan memakai atribut style, contoh pemakaian Metode Inline Style CSS yaitu sebagai 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 merupakan kode CSS yang mau diterapkan.

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

Metode Internal Style Sheets

Metode Internal Style Sheets, atau disebut juga Embedded Style Sheets dipakai untuk memisahkan kode CSS dari tag HTML tetapi tetap dalam satu halaman HTML. Atribut style yang tadinya berada di dalam tag, dikumpulkan pada dalam sebuah tag <style>. Tag style ini harus berada di bagian <head> dari halaman HTML.

Contoh pemakaian motode internal style sheets CSS:

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Inline Style CSS</title>
    <style type="text/css">
        h2 
    </style>
</head>
<body>
    <h2>
        Text ini akan bewarna putih dan background warna hitam
    </h2>
</body>
</html>

Contoh metode internal style sheets diatas telah jauh lebih bagus ketimbang inline style, sebab kita telah memisahkan CSS dari HTML. Semua kode CSS akan berada di tag head dari HTML.

Tetapi kekurangan memakai  internal style sheets, bila kita mempunyai beberapa halaman dengan style yang sama, maka kita perlu membuat kode CSS pada setiap halaman itu. Hal ini bisa diatasi dengan memakai metode external style sheets.

Metode External Style Sheets

Kekurangan dari metode internal style sheets sebelumnya ialah bila mau membuat beberapa halaman dengan tampilan yang sama, maka setiap halaman akan mempunyai kode CSS yang sama.

Metode External Style Sheets dipakai untuk ‘mengangkat’ kode CSS itu kedalam sebuah file tersendiri yang terpisah sepenuhnya dari halaman HTML. Setiap halaman yang memerlukan kode CSS, tinggal ‘memanggil’ file CSS itu.

Masih memakai contoh yang sama dengan internal style sheets, langkah awal kita akan pindahkan isi dari tag <style> ke sebuah halaman baru, dan savelah sebagai belajar.css

Isi dari file belajar.css :

h2

Pastikanlah bahwa akhiran dari file itu ialah .css dan untuk kebutuhan contoh saat ini, savelah pada folder yang sama dengan halaman HTML kita.

Kembali kehalaman HTML, CSS menyediakan 2 cara untuk memasukkan Kode CSS itu ke halaman HTML, yang pertama ialah memakai @import

Contoh pemakaian @import CSS:

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Inline 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 di bagian url dapat berupa alaman relatif (seperti: folderku/belajar.css) ataupun absolut (seperti www.infanthree.com/belajar.css).

Cara input kedua external style sheets, ialah memakai tag <link>. Berikut misalnya:

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Inline 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 memakai 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 amat direkomendasikan ialah metode external style sheets, baik memakai @import ataupun dengan tag <link>. Sebab dengan memakai kode CSS yang dipisahkan, semua halaman web bisa memakai file CSS yang sama, dan bila kita mau merubah seluruh tampilan halaman website, kita cuma butuh merubah 1 file CSS saja.

Untuk mempermudah penulisan, dalam penulisan tutorial belajar CSS di infanthree, saya akan memakai metode internal style sheets, yaitu menaruh kode CSS di bagian head dari halaman. Hal ini semata-mata cuma untuk mempermudah menulis contoh. Untuk membuat website live, sangat direkomendasikan memakai external style sheets dengan metode @import atau link.

Dalam tutorial CSS berikutnya, kita akan mengulas secara lebih spesifik cara penulisan kode CSS dengan mempelajari Pengertian Selector, Property dan Value pada CSS.


Butuh Web Developer Makassar atau Jasa SEO di Makassar yang bergaransi? Jangan ragu dengan infanthree.com. Kami juga penyedia Jasa Pembuatan Aplikasi Android di Makassar yang terkemuka. Selain itu ada layanan SEM, SMM, Internet Marketing Agency Makassar dan Social Media, Pembuatan Logo, Konten, Video, Maskot dan Instalasi jaringan ataupun mikrotik, hingga pelatihan komputer dan internet marketing.

Tinggalkan Balasan

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