Tag apa yang digunakan untuk mendeklarasikan css secara internal di html?
Estimasi Waktu Baca: 4 menit Show
Artikel ini merupakan artikel #02 dari seri Tutorial CSS Dasar untuk Pemula. Pada artikel kali ini kita akan bahas mengenai 3 cara penulisan kode CSS atau style sheet untuk dokumen HTML. Jika kalian sekiranya sudah paham tentang topik materi di bawah ini, mungkin bisa lanjut ke materi berikutnya Struktur dan Sintaks Dasar CSS. Table of Contents
PemanasanPada materi sebelumnya kita sudah menyinggung sedikit mengenai cara penulisan css untuk dokumen HTML, namun pembahasannya hanya seputar nama dan definisinya saja. Sekarang, kita coba bahas lebih dalam masing-masing cara tersebut. 3 Cara Penulisan Kode CSSTerdapat 3 cara penulisan CSS antara lain:
*Catatan: beberapa sumber lain menyebutnya sebagai Inline style sheet, Internal style sheet, dan Eksternal style sheet. Sama saja. Masing-masing cara akan dijabarkan di bawah ini. Penulisan CSS Secara InlineInline CSS adalah cara mengatur gaya (style) dengan menulisnya secara langsung di dalam tag HTML dengan menggunakan atribut style. Hello World!Hasil Keluaran Secara Inline CSSCara ini sangat tidak direkomendasikan, karena membuat dokumen HTML terlihat buruk, karena harus menyisipkan kode CSS secara langsung dalam elemen HTML. Penulisan CSS Secara InternalInternal CSS merupakan cara menentukan style dengan menulis kode CSS di dalam tag dengan menggunakan tag Hasil Keluaran Secara Internal CSSCara ini masih bersifat boleh meskipun bukan rekomendasi. Penulisan CSS Secara EksternalEksternal CSS, merupakan cara penulisan gaya dengan memisahkan antara dokumen HTML dengan lembar gaya (style sheet), yang mana kode CSS ini nantinya akan tersimpan pada file berekstensi .css. Kode HTML Halo DuniaKode CSS h2{ background-color: black; color: pink; } Hasil Keluaran Secara Eksternal CSSDari ketiga cara tersebut, cara penulisan CSS secara ekternal lah yang paling direkomendasikan. Karena kita tidak menyisipkan kode secara langsung pada dokumen HTML. Selanjutnya akan mulai kita bahas bagaimana cara menghubungkannya secara eksternal. Menghubungkan File CSS dengan File HTMLUntuk menghubungkan CSS dengan dokumen HTML secara eksternal, kita perlu sebuah tag bernama dengan atribut href yang nilainya berupa url atau lokasi dari file CSS yang akan kita panggil atau hubungkan. Tag merupakan tag yang berdiri sendiri tanpa ada penutup. Tag ini nantinya dideklarasikan dalam tag .Dalam tag ada yang namanya atribut rel. Atribut ini penting dan wajib kita definisikan karena menyatakan hubungan antara dokumen terkait dan dokumen yang akan kita hubungkan. Lanjut, sekarang kita punya file HTML dan file CSS dalam satu folder. Lantas bagaimana cara kita menggabungkan atau menghubungkan keduanya? src/ ├── index.html └── style.cssSolusinya adalah kita tinggal tulis saja nama dari file CSS terkait. Hal ini karena lokasi dari file HTML dan file CSS berada dalam satu tempat . Bagaimana bila lokasi file HTML dan file CSS berbeda? Oke kita akan bahas di bawah. Menghubungkan File CSS dan File HTML yang Berbeda FolderContoh sebelumnya menunjukkan bahwa antara file HTML dan file CSS berada pada satu tempat atau tingkatan. src/ ├── index.html └── style.cssLantas sekarang bagaimana menghubungkan antara keduanya, bila file HTML dan file CSS berbeda tempat? Contoh kasus file CSS berada dalam folder assets/. src/ ├── assets/ │ └── style.css └── index.htmlSolusinya adalah kita juga harus mendefinisikan nama foldernya diikuti dengan tanda garis miring atau slash (/) untuk masuk ke dalam folder terkait. Meskipun di dalam folder masih ada folder lagi. src/ ├── assets/ │ └── css/ │ └── style.css └── index.htmlPenerapan kode. Nah sekarang ganti kasus lagi, bagaimana jika file CSS-nya yang berada di luar? sedangkan file HTML berada di dalam suatu folder? src/ ├── pages/ │ └── index.html └── style.cssSolusinya adalah kita gunakan tanda titik-titik (..) dengan diikuti garis miring atau slash. Hal ini mengisyaratkan bahwa kita keluar dari folder terkait. Artinya, file index.html akan memanggil file style.css dengan cara keluar dari folder pages/ terlebih dahulu, Bagaimana jika file HTML nya berada di dalam folder lagi? src/ ├── pages/ │ └── home/ │ └── index.html └── style.cssMaka kita definisikan lagi titik-titiknya sesuai jumlah folder yang menyimpan file HTML. Bagaimana jika keduanya berada dalam folder terpisah? src/ ├── assets/ │ └── style.css └── pages/ └── index.htmlSolusinya Titik-titiknya kita definisikan satu kali karena file HTML hanya memerlukan keluar dari folder pages/ yang kemudian diikuti masuk ke dalam folder assets/ untuk memanggil file CSS. Menghubungkan File CSS Secara OnlineSelain secara offline, kita juga dapat menghubungkan atau mengintegerasikan lembar gaya secara online. Caranya cukup mudah kita tinggal isikan atribut href dalam tag dengan url dari file CSS terkait. Tapi perlu diperhatikan cara ini pastinya membutuhkan koneksi internet, jika tidak ada koneksi internet maka dapat dipastikan style tidak akan dimuat. Dengan kata lain, kita nantinya akan gagal untuk terhubung ke file CSS tersebut. Menghubungkan Lebih dari Satu File CSSKita juga dapat menghubungkan lebih dari satu file CSS dengan cara mendefinisikan tiap tag . Untuk urutannya tak usah kita permasalahkan, kita bisa bolak balik, entah ingin mendeklarasikan file style.css terlebih dahulu atau file bootstrap.min.css terlebih dahulu. PendinginanPada kesempatan kali ini kita sudah belajar mengenai tiga cara penulisan style sheet dan cara menghubungkan file CSS dengan File HTML secara eksternal baik offline maupun online Lalu apa selanjutnya? Selanjutnya kita akan mempelajari tentang Struktur dan Sintaks Dasar CSS. Referensi[1] Types of CSS (Cascading Style Sheet) - GeeksforGeeks [2] How CSS is structured - MDN Menempatkan style CSS dalam dokumen yang dibuat dalam bahasa HTML dapat dilakukan dalam beberapa cara dan tingkatan yang berbeda sesuai dengan keinginan. Cara penempatan dalam HTML adalah dengan menggunakan beberapa cara, diantaranya menggunakan Inline Style, Internal Style, External Style, dan juga teknik Importing dengan Internal Style.a. Inline Style CSS yang dibuat dalam sebuah tag HTML yang hanya berlaku untuk dokumen yang diapitnya saja. Biasanya teknik ini digunakan pada pemformatan khusus pada sebuah elemen HTML dan tidak digunakan untuk memformat seluruh dokumen web. Contohnya adalah sebagai berikut :
size:20px;background-color:yellow’>Penerapan Inline Style
Dalam script di atas dapat diketahui bahwa style tersebut memiliki nama style arial yang memiliki nilai atau value untuk style tersebut. Dari script di atas dapat dilihat tampilan dalam browser seperti pada Gambar berikut ini. b. Internal Style Pada teknik ini style diletakkan pada tengah tag antara tag dan . Aturan-aturan dalam style ini diatur sedemikian rupa untuk digunakan pada suatu tempat maupun untuk keseluruhan situs. Perhatikan contoh berikut :
body {background-color:lightgrey;} h2 {color:blue;} p {color:green;}
Ini adalah Style Paragrap yang sudah diubah
Maksud dari script di atas adalah
mengatur style pada elemen body dengan warna latar belakang abu-abu muda, dengan warna hijau. Hasil script di atas dalam browser dapat dilihat di bawah ini. c. Imported Style Dengan teknik ini sebuah style tidak disimpan pada halaman tersebut. Namun untuk menghubungkannya dengan halaman web yang dibuat, demgam menggunakan import yang terdapat pada style CSS. Perhatikan contoh berikut :
@import url(http://www.namasitus.com/global.css);
Dari script di atas, dokumen HTML akan mengambil atau meng-import style CSS untuk dalam dokumen tersebut. Dimana pada contoh di atas dokumen akan mengimpor file style dengan nama global yang berekstensi .css pada alamat url http://www.namasitus.com dengan menggunakan perintah berikut : @import url(http://www.namasitus.com/global.css); d. Eksternal Style Dengan menggunakan teknik ini, dapat memanggil CSS style pada file CSS yang diinginkan menggunakan perintah “Link rel” yang berfungsi untuk menghubungkan ke dalam sebuah CSS style eksternal dengan nama yang telah ditentukan. Perhatikan contoh berikut :
Pada contoh di atas menghubungkan sebuah dokumen HTML dengan sebuah eksternal style dengan nama default.css yang telah dibuat sedemikian rupa sehingga style tersebut dihubungkan untuk memformat tampilan dalam dokumen HTML tersebut. Dalam mengimpor file CSS, dapat langsung mengimpor beberapa file CSS sekaligus dalam sebuah dokumen agar memperkaya tampilan dokumen. Perhatikan contoh berikut :
Atau dapat menggunakan perintah :
@import url(default1.css); @import url(default2.css); @import url(default3.css);
Tag apa untuk menambahkan CSS di internal?Internal CSS merupakan cara menambahkan CSS dengan menggunakan tag |