CSS Inline adalah atribut style yang digunakan untuk memberikan properti CSS kepada suatu tag di dalam dokumen HTML. Hampir semua tag atau elemen HTML bisa disisipkan atribut style. Atribut style bisa digunakan untuk banyak hal dan didefinisikan dalam bentuk CSS properti. CSS akan dibahas lebih detil pada tutorial selanjutnya. Tutorial ini hanya membahas CSS sebagai atribut suatu tag.

Tutorial sebelumnya : Atribut HTML

Format atribut style adalah sebagai berikut:

Tagname adalah nama tag atau nama elemen HTML. Property adalah properti css yang akan kita definisikan, sedangkan value adalah nilai dari properti tersebut.

Berikut beberapa properti yang banyak dipakai pada tag.

Warna Latar Belakang

Properti background-color digunakan untuk mengubah warna latar belakang tag.

This is a heading
This is a paragraph.

 

Contoh di atas adalah cara mengubah warna latar belakang halaman HTML secara keseluruhan karena atribut style dengan properti background-color diletakkan pada tag body.

CSS adalah sebuah bahasa pemrograman yang wajib kamu ketahui ketika belajar membuat website. CSS sendiri mempunyai tiga metode penulisan kode yang berbeda, yaitu Inline CSS, Internal CSS, dan External CSS. 

Tanpa CSS,  tampilan website tidak akan menarik. Kamu harus melakukan usaha lebih untuk melakukan perubahan elemen tampilan website. 

Nah, setiap metode kepenulisan kode CSS memiliki kelebihan dan kekurangannya masing-masing. Begitu juga manfaatnya berbeda-beda pula. 

Pada artikel kali ini, IDwebhost akan berbagi dengan kamu semua, Sahabat IDwebhost tentang perbedaan penulisan kode CSS. Terutama kelebihan, kekurangan, dan manfaat dari masing-masing metode. Begitu juga contoh penempatan setiap kode CSS. 

Jadi, simak artikel ini sampai selesai, ya! 

Apa Itu CSS? 

Sebelum mulai membahas tentang perbedaan inline CSS, internal CSS, dan external CSS, kamu harus tahu dulu apa itu CSS. CSS adalah singkatan dari cascading style sheets. Yaitu sebuah bahasa yang digunakan untuk menentukan tampilan format halaman website. 

Dengan CSS, kamu bisa mengatur banyak hal terkait tampilan website. Mulai dari mengatur jenis font, warna tulisan, dan background halaman. 

CSS digunakan bersama dengan bahasa markup lain, seperti HTML dan XML untuk membangun sebuah website yang bagus serta menarik. 

Bukan hanya itu, CSS juga berguna untuk mengatasi limitasi HTML dalam mengatur tampilan halaman website. 

Ada beberapa contoh keterbatasan HTML. Misalnya, jika hanya menggunakan HTML saat membangun sebuah website dengan beberapa halaman, kamu harus menuliskan tag untuk sebuah elemen HTML di semua halaman web tersebut. 

Dengan CSS, kamu cukup sekali menulis kode untuk sebuah elemen HTML, yang dapat diterapkan di semua halaman. Jika nanti akan melakukan pengubahan, kamu cukup melakukannya pada kode yang sudah kamu tulis tadi. Sangat praktis untuk digunakan. 

Apa Fungsi CSS? 

Kita tahu, secara umum, CSS memiliki fungsi untuk mengatur tampilan halaman website berbasis HTML. Namun demikian, CSS masih memiliki fungsi lainnya lho. 

Apa saja? 

Berikut fungsi CSS yang harus kamu tahu: 

1. Mempercepat loading halaman website 

Fungsi pertama CSS adalah meningkatkan kecepatan halaman website. Karena kamu bisa menuliskan satu rangkaian kode untuk beberapa halaman website sekaligus, sehingga meminimalkan jumlah kode. 

Dengan demikian, beban pada saat proses loading akan jadi lebih kecil. 

2. Memudahkan pengelolaan kode

Dengan CSS, kamu tak perlu merubah kode yang ada di setiap halaman jika ingin mengganti tampilan website. 

Cukup dengan mengedit kode CSS, sebuah perubahan bisa diterapkan di semua halaman website. 

Untuk mengatahui cara mengelola kode, kamu bisa mulai dengan belajar bahasa pemrograman, lho! 

3. Memiliki tampilan yang variatif 

HTML memang dapat digunakan untuk mengatur tampilan website. Namun terbatas. Sedangkan CSS menawarkan lebih banyak pilihan tampilan. Sehingga kamu bebas untuk membuat tampilan interface website. 

Contohnya, kamu bisa menggunakan CSS untuk membuat tombol Call to Action. Tombol Call to Action biasa ditemui di halaman landing page. 

4. Tampilan website responsif di semua perangkat

Tampilan website yang responsif di semua perangkat adalah hal yang bagus. Dan CSS memungkinkan hal ini terjadi. 

CSS mempunyai banyak properti untuk mengatur tampilan konten sesuai dengan kebutuhan layar. Penggunaan max-width misalnya. Properti ini dapat mengubah ukuran elemen HTML sesuai ukuran layar yang digunakan untuk menampilkan tampilan website. 

Jenis-Jenis CSS yang harus kamu tahu: 

CSS dibagi menjadi tiga kategori, berdasaran penempatan kodenya. Yaitu Inline CSS, Internal CSS, dan External CSS. 

Atribut apakah yang digunakan untuk mendefinisikan inline CSS?

Atribut HTML manakah yang digunakan untuk mendefinisikan inline style sheet?