CSS, atau Cascading Style Sheets, adalah apa yang digunakan dalam desain situs web modern untuk menerapkan tampilan visual ke suatu halaman. Sementara HTML menciptakan struktur halaman dan Javascript dapat menangani perilaku, tampilan dan nuansa situs web adalah domain dari CSS. Ketika datang ke gaya ini, mereka paling sering diterapkan menggunakan style sheet eksternal, tetapi Anda juga bisa menerapkan style CSS ke satu elemen spesifik dengan menggunakan apa yang dikenal sebagai "inline styles."
Gaya sebaris adalah gaya CSS yang diterapkan langsung di HTML laman. Ada keuntungan dan kerugian dari pendekatan ini. Pertama, mari kita lihat bagaimana gaya-gaya ini ditulis.
Cara Menulis Gaya Inline
Untuk membuat gaya CSS sebaris, Anda mulai dengan menulis properti gaya Anda mirip dengan bagaimana Anda akan di style sheet, tetapi perlu semua satu baris. Pisahkan beberapa properti dengan titik koma seperti yang Anda lakukan dalam style sheet.
latar belakang: #ccc; warna: #fff; border: 1px hitam solid;
Tempatkan garis gaya di dalam atribut gaya dari elemen yang Anda ingin ditata. Misalnya, jika Anda ingin menerapkan gaya ini ke paragraf di HTML Anda, elemen itu akan terlihat seperti ini:
Dalam contoh ini, paragraf khusus ini akan muncul dengan latar belakang abu-abu terang (yang akan dibuat oleh #ccc), teks hitam (dari warna # 000), dan dengan 1-piksel tepi hitam solid di sekitar keempat sisi paragraf .
Keuntungan Gaya Inline
Berkat cascade style Cascading Style Sheet inline memiliki preseden atau spesikasi tertinggi dalam dokumen. Ini berarti mereka akan diterapkan tidak peduli apa lagi yang didiktekan dalam stylesheet eksternal Anda (dengan satu pengecualian adalah setiap gaya yang diberikan! Deklarasi penting lembar itu, tetapi ini bukan sesuatu yang harus dilakukan di situs produksi jika dapat dihindari).
Satu-satunya gaya yang memiliki prioritas lebih tinggi daripada gaya sebaris adalah gaya pengguna yang diterapkan oleh pembaca itu sendiri. Jika Anda mengalami kesulitan untuk menerapkan perubahan, Anda dapat mencoba menetapkan gaya sebaris pada elemen. Jika gaya Anda masih tidak ditampilkan menggunakan gaya sebaris, Anda tahu ada hal lain yang terjadi.
Gaya sebaris mudah dan cepat untuk ditambahkan dan Anda tidak perlu khawatir tentang menulis pemilih CSS yang tepat karena Anda menambahkan gaya langsung ke elemen yang ingin Anda ubah (elemen itu pada dasarnya menggantikan pemilih yang akan Anda tulis dalam lembar gaya eksternal ). Anda tidak perlu membuat dokumen baru (seperti lembar gaya eksternal) atau mengedit elemen baru di bagian atas dokumen Anda (seperti dengan style sheet internal). Anda cukup menambahkan atribut gaya yang berlaku di hampir setiap elemen HTML. Ini semua alasan mengapa Anda mungkin tergoda untuk menggunakan gaya sebaris, tetapi Anda juga harus menyadari beberapa kerugian yang sangat signifikan terhadap pendekatan ini.
Kekurangan Gaya Inline
Karena gaya inline, mereka adalah yang paling spesifik dalam kaskade, mereka dapat melampaui hal-hal yang tidak Anda inginkan. Mereka juga meniadakan salah satu aspek paling kuat dari CSS - kemampuan untuk banyak gaya dan banyak halaman web dari satu file CSS pusat untuk membuat pembaruan di masa depan dan perubahan gaya lebih mudah untuk dikelola.
Jika Anda hanya menggunakan gaya sebaris, dokumen Anda akan cepat menjadi kembung dan sangat sulit dipelihara. Ini karena gaya sebaris harus diterapkan ke setiap elemen yang Anda inginkan. Jadi jika Anda ingin semua paragraf memiliki font family "Arial", Anda harus menambahkan gaya sebaris ke setiap tag
dalam dokumen Anda. Ini menambahkan kedua pekerjaan pemeliharaan untuk perancang dan waktu pengunduhan untuk pembaca karena Anda perlu mengubah ini di setiap halaman di situs Anda untuk mengubah keluarga font tersebut. Atau, jika Anda menggunakan stylesheet terpisah, Anda mungkin dapat mengubahnya di satu tempat dan setiap halaman menerima pembaruan itu.
Sejujurnya, ini adalah langkah mundur dalam desain web - kembali hari-hari dari tag !
Kelemahan lain untuk gaya sebaris adalah bahwa tidak mungkin untuk mem-gaya elemen-dan-pseudo dengan mereka. Misalnya, dengan style sheet eksternal , Anda dapat menata warna yang dikunjungi, melayang-layang, aktif, dan tautan dari tag anchor, tetapi dengan gaya sebaris, semua yang dapat Anda lakukan adalah tautan itu sendiri, karena itulah atribut gaya yang dilampirkan ke .
Pada akhirnya, kami sarankan untuk tidak menggunakan gaya sebaris untuk laman web Anda karena menyebabkan masalah dan membuat laman lebih banyak pekerjaan untuk dijaga. Satu-satunya saat kami menggunakannya adalah ketika kami ingin memeriksa gaya dengan cepat selama pengembangan. Setelah kita melihatnya tepat untuk elemen itu, kita memindahkannya ke style sheet eksternal kita.
Artikel asli oleh Jennifer Krynin. Diedit oleh Jeremy Girard.