Apa itu CSS?

Diterbitkan: 2019-03-08

Terakhir Diperbarui pada 22 April 2020

Cascading Style Sheets for the web Di World Wide Web (www), CSS adalah singkatan dari Cascading Style Sheets. CSS adalah bahasa style sheet yang digunakan untuk menggambarkan presentasi dokumen yang ditulis dalam bahasa markup, biasanya HTML. CSS mengatur bagaimana tata letak dan konten halaman web akan ditampilkan di layar, kertas, atau di media lain. CSS menghemat banyak pekerjaan karena mengontrol tata letak beberapa halaman web sekaligus.

Dokumen umumnya merupakan file teks yang terstruktur menggunakan bahasa markup seperti HTML. Menyajikan dokumen berarti mengubahnya menjadi bentuk yang dapat digunakan yang disajikan secara visual di layar komputer melalui browser web seperti Chrome, Firefox, Opera, Microsoft Edge, dan lain-lain. Browser web menerapkan aturan CSS ke dokumen untuk memengaruhi cara tampilannya.

Blog ini adalah pengantar umum untuk Cascading Style Sheets (CSS), mendefinisikan apa itu, dan apa kegunaannya di Web. Ini adalah pengantar yang menjawab pertanyaan dasar tentangnya tanpa masuk jauh ke dalam dunia CSS yang indah dan menarik.

Itu! Perusahaan menyediakan layanan desain web yang menawan dan efektif untuk agensi di seluruh dunia. Pelajari Lebih Lanjut tentang Layanan Desain Web Label Putih kami dan bagaimana kami dapat membantu Anda dan klien Anda membuat atau meningkatkan kehadiran web mereka. Mulailah hari ini!

CSS dimulai pada tahun 1994. Itu dibuat dan dikelola oleh W3C. Kelompok Kerja CSS dari W3C membuat dokumen yang disebut spesifikasi. Setelah spesifikasi dibahas dan disahkan secara resmi oleh anggota W3C, mereka menjadi rekomendasi.

Cascading Style Sheets level 1 (CSS1) keluar dari W3C sebagai rekomendasi pada Desember 1996. CSS2 menjadi rekomendasi W3C pada Mei 1998. CSS level 3, yang dimulai pada 1998, masih dalam pengembangan. CSS3 adalah kombinasi dari spesifikasi CSS2 dan spesifikasi baru yang disebut modul. Spesifikasi CSS dibentuk dari sekumpulan properti, yang memiliki nilai yang ditetapkan untuk memperbarui cara konten HTML ditampilkan.

CSS hadir untuk menyederhanakan proses penyajian dokumen bahasa mark-up kami. Anda dapat mengontrol berbagai properti seperti:

  • warna teks,
  • gaya font,
  • jarak antar paragraf,
  • bagaimana kolom berukuran dan ditata,
  • gambar atau warna latar belakang,
  • desain tata letak,
  • variasi tampilan menurut ukuran layar (Media Query).

Bagaimana kita menerapkan CSS?

Cascading Style Sheets for the web Ada empat cara untuk menerapkan gaya ke dokumen HTML kita. Metode yang paling umum digunakan adalah file CSS Eksternal yang disematkan dalam elemen <style> di dalam dokumen HTML kita. Jika gaya lembar berbeda ditentukan, gaya akan mengalir ke gaya baru dengan prioritas berikut (lebih tinggi angkanya kurang penting):

Prioritas 4: Peramban bawaan

Peramban menyertakan beberapa gaya yang telah ditulis sebelumnya untuk kami. Terkadang kita tidak menginginkan gaya yang sudah dimuat sebelumnya, jadi kita bisa menggantinya. Ada beberapa browser yang tidak mendukung spesifikasi CSS modern atau memiliki bentuk sendiri dalam menggunakan properti CSS. Karena itu, kita harus berhati-hati saat menulis CSS kita dalam dokumen HTML.

That! Company White Label Services

Prioritas 3: File style sheet eksternal

Elemen <link> dapat digunakan untuk menyertakan file stylesheet eksternal dalam dokumen HTML Anda. Lembar gaya eksternal adalah file teks terpisah dengan ekstensi ".css". Kami mendefinisikan semua aturan gaya dalam file teks ini dan kemudian kami menyertakan file ini dalam dokumen HTML apa pun di dalam tag <head>…</head> menggunakan elemen <link>.

 <link rel="stylesheet" type="text/css" href="style.css" />

Prioritas 2: Tertanam dalam dokumen HTML

Kita dapat menempatkan aturan CSS kita ke dalam dokumen HTML menggunakan elemen <style> untuk memuat aturan. Tag <style>…</style> ditempatkan di dalam tag <head>…</head>.

 <gaya>
 pemilih {
 nilai properti;
 }
 </ gaya>

Prioritas 1: Sebaris dalam elemen HTML kami

Kita dapat menggunakan atribut gaya dari elemen HTML apa pun untuk menentukan aturan gaya. Aturan ini hanya akan diterapkan pada elemen tersebut.

 <p>Halo Dunia!</p>

Mengganti Aturan CSS

Kami telah menjelaskan empat cara untuk menerapkan aturan style sheet ke dokumen HTML kami. Berikut adalah aturan untuk mengganti Aturan Style Sheet apa pun:

Setiap lembar gaya sebaris mengambil prioritas tertinggi. Jadi, itu akan menimpa aturan apa pun yang ditentukan dalam tag <style>…</style> atau aturan yang ditentukan dalam file style sheet eksternal apa pun.

Aturan apa pun yang ditentukan dalam tag <style>…</style> akan menggantikan aturan yang ditentukan dalam file style sheet eksternal apa pun.

Aturan apa pun yang ditentukan dalam file lembar gaya eksternal mengambil prioritas terendah, dan aturan yang ditentukan dalam file ini hanya akan diterapkan jika dua aturan di atas tidak berlaku.

Pemilih CSS

Aturan CSS diinterpretasikan oleh browser dan kemudian diterapkan ke elemen terkait dalam dokumen HTML kita. Aturan gaya terdiri dari tiga bagian:

  • Selector digunakan untuk "menemukan" (atau memilih) elemen HTML berdasarkan nama elemen, id, kelas, atribut, dan lainnya.
  • Properti adalah jenis gaya CSS. Itu bisa berupa warna, batas, latar belakang, font, tampilan, perataan teks, margin, spasi baris, dll.
  • Nilai diberikan ke properti. Misalnya, properti background-color dapat memiliki nilai merah atau hijau.

Sintaks Aturan CSS

Sintaks aturan CSS terdiri dari pemilih dan deklarasi properti dan nilai:

 pemilih { properti: nilai; }

Pemilih menunjuk ke elemen HTML untuk bergaya.

Blok deklarasi (dalam kurung kurawal) berisi satu atau lebih deklarasi yang dipisahkan oleh titik koma.

Setiap deklarasi menyertakan nama properti CSS dan nilai, dipisahkan oleh titik dua.

Kita dapat menulis aturan CSS dan kemudian menggunakan kembali aturan yang sama di beberapa elemen dan dokumen HTML. Dengan menggunakan CSS, kita tidak perlu menulis atribut tag sebaris HTML setiap kali yang hanya berlaku untuk elemen yang ditata. Kami hanya menulis satu aturan CSS dan menerapkannya ke semua kemunculan elemen tag itu. Jadi, lebih sedikit kode berarti halaman lebih cepat.

Perubahan dan pemeliharaan dokumen HTML kami sederhana ketika kami menggunakan aturan gaya eksternal atau tertanam. Kami hanya mengubah aturan gaya, dan semua elemen dalam dokumen HTML kami akan diperbarui secara otomatis. Dengan CSS, kami memiliki akses ke beberapa ukuran layar perangkat melalui Media Queries. Kueri media memungkinkan kami untuk mengoptimalkan dokumen HTML kami untuk lebih dari satu jenis perangkat. Dengan menggunakan dokumen HTML yang sama, kita dapat menyajikan versi yang berbeda dari halaman web kita.

Baca selengkapnya

Sekali lagi, posting ini hampir tidak membuka minat pembaca untuk belajar tentang CSS, dan berbagai hal yang tersedia untuk mengontrol dokumen HTML kita. Ini adalah bagian yang sangat kuat dan sangat penting dari web. Beberapa sumber daya utama di mana Anda dapat menyelam lebih dalam ke dalamnya adalah:

Sekolah W3C

MDN

Tutorial CSS