Apa Itu Cascading Style Sheets dan Untuk Apa CSS Digunakan?

CSS milik triplet teknologi web inti bersama HTML dan JavaScript. Dengan perencanaan yang cermat, CSS berkontribusi pada pemisahan masalah. Sumber daya independen mengontrol struktur konten, presentasi, dan perilakunya.

Style Sheets memainkan peran penting dalam aksesibilitas, skalabilitas, dan bahkan kinerja web. Sebagai penulis konten atau desainer web, mereka memberi Anda kendali atas cara perangkat merender konten. Dari tata letak hingga ukuran dan warna font, CSS mengubah konten menjadi halaman yang tampak indah.

Seperti Apa Tampilan CSSnya?

CSS adalah bahasa yang besar—ada banyak hal berbeda untuk ditata! Tetapi sintaksnya mudah, dengan hanya beberapa aturan untuk dipelajari.

Elemen HTML memiliki berbagai properti yang dapat ditata oleh CSS. NS warna properti menetapkan warna latar depan (misalnya teks). Ukuran font tergantung pada ukuran huruf Properti.

Setiap properti dapat diatur ke nilai yang didukung. Penetapan nilai ke properti adalah 'deklarasi.' Umumnya, mereka terlihat seperti ini:

property: value

Sebagai contoh:

cara mengatasi laptop overheat

color: red

Nilai untuk properti yang berbeda dapat terlihat sangat berbeda, bahkan nilai untuk properti yang sama. Sebagai contoh, berikut adalah dua cara lagi untuk menulis deklarasi sebelumnya:

color: #ff0000  
color: rgb(255, 0, 0)

Bagaimana HTML dan Style Sheets Bersatu

Anda dapat menggabungkan HTML dan CSS dengan beberapa cara berbeda, masing-masing dengan kelebihannya.

Gaya Menulis Sebaris

Metode paling sederhana adalah dengan melampirkan deklarasi gaya langsung ke elemen dalam file HTML. Anda dapat melakukan ini menggunakan gaya atribut seperti:

  
 Most of this text is red …
  
 … but this isn’t!

Meskipun elemen penataan sebaris seperti ini bisa nyaman, ia memiliki beberapa kelemahan. Sebagai permulaan, ini memperumit HTML, membuatnya lebih sulit untuk dibaca secara sekilas. Ini juga canggung untuk dipelihara: bayangkan sebuah dokumen panjang di mana kita ingin mengatur warna setiap paragraf. Ini adalah CSS, tetapi bukan 'Style Sheets'.

Menanamkan Gaya di Kepala

Anda dapat mulai melihat seperti apa Style Sheet dengan mekanisme kedua, penyematan . Dengan menggunakan pendekatan ini, kami mengumpulkan semua deklarasi gaya bersama-sama di dalam a gaya elemen di kepala dari dokumen kami. Ini akan terlihat seperti ini:

  
  
  
  
 /* style instructions go here */  
  
  
  
 ...

Namun, instruksi gaya kami membutuhkan sedikit lebih banyak detail daripada sebelumnya. Karena kami telah memindahkannya ke kepala, setiap aturan tidak lagi dikaitkan dengan elemen. Kami mungkin telah menyatakan warna merah , tapi apa yang harus memiliki warna itu?

Di sinilah pemilih CSS masuk. Mereka memungkinkan kita untuk menargetkan bagian tertentu dari halaman dan menentukan gayanya di satu tempat, menggunakan sintaks ini:

unduh video amazon prime ke pc

selector {  
 declaration1;  
 declaration2;  
 /* etc. */  
}

Misalnya, untuk menata teks paragraf menjadi biru, kita dapat menentukan yang berikut:

p {  
 color: blue;  
}

Dalam contoh ini, pemilihnya adalah P , yang cocok dengan semua elemen paragraf dalam dokumen kita. Itu akan mewarnai semua teks menjadi biru, asalkan ada

Menautkan Lembar Gaya Eksternal

Metode terakhir untuk menutupi adalah menghubungkan. Sejauh ini, ini adalah pendekatan yang paling berguna, dan yang paling sering Anda pilih. Alih-alih menyematkan aturan CSS di gaya elemen langsung di dokumen Anda, Anda dapat memindahkannya ke file terpisah.

Tempelkan kode ini di dalam tag file HTML Anda untuk menautkan style sheet eksternal Anda.

Kekuatan CSS

Dengan metode tertaut, kami memanfaatkan kekuatan inti CSS: pemisahan kekhawatiran. Semua informasi semantik — apa arti konten — terkandung dalam dokumen HTML. Penataan—seperti apa tampilannya—ada dalam file terpisah, lembar gaya.

Berikut adalah beberapa manfaat dari pemisahan ini:

Anda dapat mengganti style sheet hanya dengan mengubah referensi file. Ini bahkan bisa terjadi secara dinamis. Dalam satu langkah, Anda dapat mengubah seluruh tampilan dan nuansa halaman.

Banyak halaman dapat berbagi lembar gaya yang sama seperti yang diperlukan. Dengan mengubah satu file, Anda dapat memperbarui tampilan dan nuansa seluruh situs web.

Memisahkan halaman menjadi 'konten' dan 'gaya' memiliki manfaat teknis. Proxy dan browser dapat menyimpan file individual secara terpisah. Ini berarti sebuah situs dapat mengirim informasi gayanya sekali, daripada memasukkannya ke dalam setiap halaman.

Saat berkolaborasi, tim yang berbeda dapat bekerja dengan kekuatan mereka masing-masing, membuat dan mengedit file terpisah tanpa mempengaruhi satu sama lain.

Menjelaskan Kaskade

Anda telah belajar banyak tentang gaya dan lembar gaya, tetapi bagaimana dengan bagian kaskade CSS?

Kaskade inilah yang memutuskan gaya mana yang akan digunakan ketika beberapa lembar gaya hadir. Anda telah melihat bagaimana seorang penulis dapat menentukan gaya untuk konten mereka. Tetapi fitur lain dari CSS adalah bahwa hal itu memberi pembaca dan produsen browser beberapa pendapat tentang masalah ini juga.

Anda mungkin sudah bertanya-tanya tentang gaya default. Misalnya, bagaimana cara H1 elemen tampak besar dan tebal, bahkan tanpa style sheet penulis? Ini berkat seperangkat aturan khusus yang membentuk lembar gaya agen pengguna. Aturan ini awalnya diterapkan oleh browser web Anda ke setiap halaman yang Anda kunjungi.

Kaskade menentukan bahwa lembar gaya penulis berlaku setelah gaya agen pengguna. Jika browser kami mengatakan bahwa judul dicetak tebal tetapi penulis halaman menyatakan bahwa judul pada halaman ini ringan, maka judul tersebut akan menjadi ringan.

Ada sumber lembar gaya lain yang menyerahkan beberapa kendali kepada pembaca. Setiap pengguna web, secara teori, dapat memelihara lembar gaya pengguna dengan aturan khusus. Ini berada di tengah: aturan pengguna akan menggantikan pengaturan browser default, tetapi akan ditimpa oleh gaya penulis. Sayangnya, dukungan untuk lembar gaya pengguna tidak pernah tersebar luas.

Menargetkan Media Berbeda

Anda dapat menggunakan Style Sheets dalam konteks yang berbeda, di luar layar. NS setengah atribut dari tautan elemen menentukan jenis media yang diterapkan pada lembar gaya. Misalnya, Anda dapat mendefinisikan lembar gaya untuk dicetak menggunakan markup seperti berikut:
Anda dapat mengumpulkan gaya umum dalam satu lembar gaya global dan gaya khusus media dalam file terpisah. Bahkan ada jenis media untuk memenuhi presentasi aural atau braille konten Anda. CSS adalah alat vital dalam meningkatkan aksesibilitas.

Terkait: Cara Menjelajah Web Jika Anda Buta atau Tunanetra
microsoft office 2016 64 bit unduh gratis dengan kunci produk

Situs seperti Wikipedia menggunakan CSS untuk mengontrol gaya cetaknya, menyembunyikan elemen yang tidak diinginkan, dan menyederhanakan tata letak.

CSS Membuat HTML Terlihat Bagus

Cascading Style Sheets mencakup banyak hal: kaskade, pewarisan, penyeleksi, sumber, media, dll. Namun kekuatannya memungkinkan web modern. Ini adalah media yang menyediakan fitur usabilitas, fleksibilitas, dan aksesibilitas bawaan.

Untuk melihat kekuatan penuh CSS dan seberapa banyak yang ditawarkannya, lihat lembar contekan kami yang mencakup semua properti CSS3 yang penting.
Membagikan Membagikan Menciak Surel Lembar Cheat Properti CSS3 Esensial
Kuasai sintaks CSS penting dengan lembar contekan properti CSS3 kami.
Baca Selanjutnya Topik-topik yang berkaitan

Pemrograman

Pengembangan web

CSS

Tentang Penulis Bobby Jack(58 Artikel Diterbitkan)
Bobby adalah penggemar teknologi yang bekerja sebagai pengembang perangkat lunak selama hampir dua dekade. Dia bersemangat tentang game, bekerja sebagai Editor Ulasan di Majalah Switch Player, dan mendalami semua aspek penerbitan online & pengembangan web.
More From Bobby Jack
Berlangganan newsletter kami

Bergabunglah dengan buletin kami untuk kiat teknologi, ulasan, ebook gratis, dan penawaran eksklusif!
Klik di sini untuk berlangganan