Bagaimana cara menempatkan CSS secara internal?

Jika dalam tutorial CSS sebelumnya kita telah mempelajari Pengertian CSS, pada tutorial kali ini kita akan membahas cara menginput kode CSS ke halaman HTML.

Table of Contents Show

Metode Inline Style
Metode Internal Style Sheets
Metode External Style Sheets
Dimana letak menempatkan CSS internal eksternal yang benar?
Pada bagian HTML manakah external style sheet diletakkan?
Apa yang dimaksud dengan external CSS?
Pada tag HTML manakah kita meletakkan kode program CSS di dalamnya?
Bagaimana Cara Menambahkan CSS ke dalam dokumen HTML?
Dimana CSS dibuat pada internal CSS?
Tag apa untuk menambahkan CSS di internal?
Tag HTML apakah yang digunakan untuk mendefinisikan internal style sheet?
Bagaimana cara menambahkan CSS pada dokumen HTML?

Table of Contents Show

Metode Inline Style
Metode Internal Style Sheets
Metode External Style Sheets
Dimana letak menempatkan CSS internal eksternal yang benar?
Pada bagian HTML manakah external style sheet diletakkan?
Apa yang dimaksud dengan external CSS?
Pada tag HTML manakah kita meletakkan kode program CSS di dalamnya?
Bagaimana Cara Menambahkan CSS ke dalam dokumen HTML?

Sebagaimana telah dipelajari pada saat pembahasan tentang HTML (pada artikel tutorial belajar HTML), HTML pada dasarnya adalah kumpulan dari tag-tag yang disusun sehingga memiliki bagian-bagian tertentu, seperti paragraf, list, tabel dan sebagainya. CSS digunakan untuk mendesain tag-tag HTML ini.

Secara garis besar, terdapat 3 cara menginput kode CSS ke dalam HTML, yaitu metode Inline Style, Internal Style Sheets, dan External Style Sheets.

Metode Inline Style

Metode Inline Style adalah cara menginput kode CSS langsung ke dalam tag HTML dengan menggunakan atribut style, contoh penggunaan Metode Inline Style CSS adalah 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 adalah kode CSS yang ingin diterapkan.

Penggunaan tag CSS seperti ini walaupun praktis, namun tidak disarankan, karena kode CSS langsung tergabung dengan HTML, dan tidak memenuhi tujuan dibuatnya CSS agar desain terpisah dengan konten.

Metode Internal Style Sheets

Metode Internal Style Sheets, atau disebut juga Embedded Style Sheets digunakan untuk memisahkan kode CSS dari tag HTML namun tetap dalam satu halaman HTML. Atribut style yang sebelumnya berada di dalam 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 diatas sudah jauh lebih baik daripada inline style, karena kita sudah memisahkan CSS dari HTML. Seluruh kode CSS akan berada pada tag head dari HTML.

Namun kekurangan menggunakan internal style sheets, jika kita memiliki beberapa halaman dengan style yang sama, maka kita harus membuat kode CSS pada masing-masing halaman tersebut. Hal ini dapat diatasi dengan menggunakan metode external style sheets.

Metode External Style Sheets

Kekurangan dari metode internal style sheets sebelumnya adalah jika ingin membuat beberapa halaman dengan tampilan yang sama, maka setiap halaman akan memiliki kode CSS yang sama.

Metode External Style Sheets digunakan untuk ‘mengangkat’ kode CSS tersebut 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 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 bahwa akhiran dari file tersebut adalah .css dan untuk keperluan contoh kali ini, savelah pada folder yang sama dengan halaman HTML kita.

Kembali kehalaman HTML, CSS menyediakan 2 cara untuk menginput Kode CSS tersebut ke halaman HTML, yang pertama adalah menggunakan @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.

Untuk memudahkan penulisan, dalam penulisan tutorial belajar CSS di duniailkom, saya akan menggunakan metode internal style sheets, yaitu meletakkan kode CSS pada bagian head dari halaman. Hal ini semata-mata hanya untuk memudahkan menulis contoh. Untuk membuat website live, sangat direkomendasikan menggunakan external style sheets dengan cara @import atau link.

Dalam tutorial CSS selanjutnya, kita akan membahas secara lebih detail cara penulisan kode CSS dengan mempelajari Pengertian Selector, Property dan Value pada CSS.

eBook CSS Uncover Duniailkom

Jika anda ingin belajar cara mendesain web, CSS wajib dikuasai. Duniailkom telah menyusun eBook CSS Uncover yang membahas CSS dengan lebih detail dan lebih lengkap, mulai dari dasar hingga fitur terbaru CSS3 seperti animasi dan web responsive. Penjelasan lebih lanjut bisa ke: eBook CSS Uncover Duniailkom.

Dimana letak menempatkan CSS internal eksternal yang benar?

Internal CSS –> ditulis di dalam tag <style> ; Inline CSS –> ditulis di atribut elemen HTML; External CSS –> ditulis di file CSS terpisah dengan HTML.

Pada bagian HTML manakah external style sheet diletakkan?

File external CSS umumnya diletakkan setelah bagian <head> di halaman. Metodi ini dinilai lebih mudah dan sederhana daripada menambahkan kode CSS di setiap elemen HTML yang diatur tampilannya. Berikut adalah manfaat external CSS: Ukuran halaman jadi lebih kecil dan struktur HTML menjadi lebih rapi.

Apa yang dimaksud dengan external CSS?

Jenis CSS yang kedua adalah External CSS. External CSS adalah kode CSS yang penulisannya dipisah dengan file HTML. Jadi file CSS ditulis pada file sendiri dengan ekstensi .css. File External CSS biasa dituliskan pada bagian <head>, jadi setiap halaman website dilakukan pemanggilan file .css.

Pada tag HTML manakah kita meletakkan kode program CSS di dalamnya?

Internal CSS digunakan untuk memberi style yang hanya berlaku pada satu laman web. Style yang diberikan diapit oleh tag <style> </style> dan diletakkan di bagian elemen head atau tag <head> dari laman web. Anda dapat menggunakan internal CSS bila pemberian style dimaksudkan hanya untuk satu laman web saja dan tidak ...

Bagaimana Cara Menambahkan CSS ke dalam dokumen HTML?

Ada tiga cara untuk menambahkan CSS ke dalam dokumen HTML: Inline – menggunakan atribut style dalam elemen HTML. Internal – menggunakan elemen <style> di dalam elemen <head> Eksternal – menggunakan elemen <link> di dalam elemen <head>

Dimana CSS dibuat pada internal CSS?

2. Internal CSS Internal CSS dituliskan di bagian header file HTML. Fungsinya untuk menentukan tampilan sebuah halaman. Internal CSS sangat membantu ketika Anda ingin membuat halaman website yang tampilannya berbeda dari halaman lain.

Tag apa untuk menambahkan CSS di internal?

Internal CSS adalah kode CSS yang ditulis di dalam tag <style> dan kode HTML dituliskan di bagian atas (header) file HTML. Internal CSS dapat digunakan untuk membuat tampilan pada satu halaman website dan tidak digunakan pada halaman website yang lain.