Tahukah Kalian, Pengertian CSS, Apa itu Cascading Style Sheets dan CSS Specificity? Sejarah, Tujuan, Cara Kerja, Manfaat, Jenis dan Contoh serta Bagaimana Cara Menggunakannya! Saat ini, ada banyak cara mudah untuk mendesain konten situs web terutama di tahun 2024 seperti sekarang ini. Benar, Anda akan menemukan solusi seperti drag and drop (seret dan lepas), Jasa Pembuatan Website, dan bahkan Content Management System (CMS) yang lengkap. Namun, itu tidak akan membuat Anda menjadi seorang front-end developer!
Jika Anda ingin membuat desain yang benar-benar asli (original) daripada berisiko berakhir dengan situs web copy-cat, maka Anda perlu mempelajari sedikit pengkodean. Tempat terbaik untuk memulai adalah dengan Cascading Style Sheets (CSS), yaitu bahasa yang memungkinkan Anda untuk mengontrol bagaimana elemen-elemen pada halaman web disajikan. Terkait hal itu, dalam postingan kali ini, Kami akan membahas secara lebih lengkap dan detail tentang apa itu pengertian CSS, sejarah dan banyak lagi yang lainnya. Baiklah, berikut ini adalah ulasannya!
Daftar Isi Konten:
Pengertian CSS
Merupakan singkatan dari Cascading Style Sheets, CSS adalah bahasa yang menggambarkan gaya dokumen HTML berdasarkan simpulan Kami yang bersumber langsung dari Situs W3Schools.
Ini digunakan untuk menjelaskan bagaimana elemen-elemen HTML ditampilkan di layar, kertas, atau di media lainnya.
Cascading Style Sheets akan menghemat banyak pekerjaan dan dapat mengontrol tata letak beberapa halaman web sekaligus, di mana lembar gaya eksternalnya disimpan dalam file .css.
Apa itu Cascading Style Sheets?
Jadi, apa itu sebenarnya yang dimaksud dengan Cascading Style Sheets ini? Seperti yang sudah Kami bahas pada pengertian sebelumnya, ini lebih dikenal dengan istilah CSS (saja).
Singkatan CSS adalah kepanjangan dari Cascading Style Sheets, ini merupakan praktik terbaik untuk pengembangan antarmuka pengguna atau User Interface (UI) yang sesuai dengan pemisahan pola desain yang menjadi perhatian.
CSS adalah mekanisme standar dan pilihan untuk memformat halaman HTML.
Sesuai dengan pemisahan pola desain perhatian dan praktik terbaiknya, CSS (Cascading Style Sheets) menyediakan lokasi pusat di mana informasi tentang berbagai font, warna latar depan, warna latar belakang, gaya cetak miring, dan penekanan harus diterapkan ke berbagai HTML element dalam halaman website.
Lembaran gaya cascading juga dapat mengontrol bagaimana berbagai bagian halaman, seperti header, footer, content, article, bagian dan selainnya, diletakkan pada halaman.
Hal ini sangat membantu ketika konten harus ditata dengan cara yang sangat berbeda tergantung pada apakah itu dilihat di desktop, tablet atau smartphone.
Apa itu CSS Specificity?
Kekhususan (spesifisitas) atau CSS specificity adalah cara yang digunakan browser untuk menentukan nilai CSS property mana yang paling relevan dengan suatu elemen dan akan diterapkan.
Ha itu berarti bahwa kekhususan CSS adalah seperangkat aturan yang digunakan oleh browser dalam menentukan gaya yang ditentukan pengembang yang akan diterapkan ke elemen tertentu.
Agar gaya diterapkan ke elemen tertentu, pengembang harus mematuhi aturan, sehingga browser tahu cara menerapkan style (gaya).
Sejarah CSS atau Cascading Style Sheets
Dalam membahas mengenai apa itu pengertian CSS (Cascading Style Sheets), agar lebih memahaminya, pastinya kita juga harus mengetahui apa sejarah awalnya.
Ya! Ketika Anda memikirkan HTML dan CSS, Anda mungkin membayangkannya sebagai 1 (satu) paket.
Tetapi selama bertahun-tahun setelah Tim Berners-Lee pertama kali menciptakan World Wide Web atau WWW (baca pengertian WWW di sini) pada tahun 1989, tidak ada yang namanya CSS.
Perlu kalian ketahui bahwa paket asli untuk web tidak menawarkan cara untuk mendesain situs web sama sekali.
Ada sebuah postingan yang sekarang terkenal ditinggalkan di arsip milis WWW yang ditulis oleh Marc Andreessen pada tahun 1994, yang kemudian menciptakan co-browser Mosaic dan Netscape.
Dalam postingan tersebut, Andreessen berkomentar karena tidak ada cara untuk mendesain situs web dengan HTML.
Satu-satunya hal yang bisa dia sampaikan kepada web developers atau pengembang web ketika ditanya tentang desain visual adalah suatu pernyataan yang menyebutkan bahwa tampilannya berantakan.
10 tahun kemudian, CSS sedang dalam proses adopsi penuh oleh komunitas web yang baru diminati.
Sebelum CSS, pengembang mengalami kesulitan bekerja dengan kode HTML untuk memformat konten mereka dalam dokumen, dan bahkan kemudian kontennya sangat terbatas.
Hanya karena HTML dimaksudkan sebagai bahasa markup untuk menautkan berbagai dokumen online.
HTML tidak pernah dimaksudkan untuk memformat halaman.
Ketika HTML 3.2 menyajikan tag format gaya untuk properti seperti font (baca pengertian font di sini), itu menyebabkan munculnya kesulitan bagi pengembang.
Pemrogram akan menghabiskan proses yang panjang dan mahal untuk mengkode halaman HTML yang panjang.
Ini membuatnya sulit untuk menemukan kesalahan dalam sintaks HTML jika ada yang salah di halaman web.
Konsorsium World Wide Web (W3C) melihat ini dan mengadopsi CSS untuk menyelesaikan masalah.
Mereka kemudian membuat kelompok kerja CSS yang didedikasikan untuk mengembangkan versi CSS yang kita miliki saat ini di tahun 2020.
CSS melakukan pekerjaan HTML, dan dunia teknologi pada umumnya, mendukung dan menghapus semua gaya memformat tag HTML dari halaman dan menggantinya dengan daftar aturan yang disebut style sheet.
Tujuan CSS
Dalam membahas mengenai apa arti CSS, tentu hal ini akan menimbulkan pertanyaan seperti misalnya mengapa kita menggunakannya?
Benar, terkait tujuan utamanya, CSS digunakan untuk menentukan gaya untuk halaman website (baca pengertian website di sini) Anda, termasuk desain, layout (tata letak) dan variasi tampilan untuk berbagai perangkat dan ukuran layar.
CSS hadir untuk menyederhanakan proses penyajian dokumen bahasa markup kita, di mana Anda dapat mengontrol berbagai CSS property seperti:
- Warna teks.
- Gaya font.
- Jarak antar paragraf.
- Bagaimana kolom diukur dan ditata.
- Gambar atau warna latar belakang.
- Desain tata letak.
- Variasi tampilan sesuai dengan ukuran layar.
- Dan lain sebagainya.
Cara Kerja CSS (Cascading Style Sheets)
Selanjutnya, kita juga akan membahas tentang bagaimana cara kerja CSS atau Cascading Style Sheets.
Ingat bagaimana Kami mengatakan bahwa HTML adalah “bahasa markup”? Baca selengkapnya tentang pengertian HTML di sini!
CSS, di sisi lain, merupakan bahasa style sheet. Ini adalah deskriptor yang berguna, karena ini memberi tahu Anda tentang gaya dan presentasi.
Jika Anda memikirkan pengembangan rumah atau jenis bangunan apa pun, HTML mewakili struktur dasar bangunan seperti dinding, tangga, dan pintu.
CSS akan mewakili cat, dekorasi, dan gaya bangunan. Sementara HTML menyediakan struktur dasar Anda, CSS menyediakan gaya halaman web Anda serta membuatnya menonjol di antara halaman web lain di internet.
Meskipun Anda dapat menambahkan CSS secara langsung ke kode halaman web tertentu, hal ini tidak dianggap sebagai praktik terbaik.
Sebaliknya, desainer membuat style sheet sebagai file terpisah yang hanya berisi kode CSS, di mana mereka hanya perlu meng-edit file .css tersebut untuk menerapkan perubahan.
CSS menghadirkan gaya ke halaman web Anda dengan berinteraksi dengan elemen HTML. Elemen adalah komponen HTML individual dari halaman web.
Sebagai contoh misalnya paragraf yang terdapat dalam HTML mungkin terlihat seperti ini:
<p> Ini adalah paragraf saya! </p>
Jika Anda ingin membuat paragraf ini tampak merah muda (pink) dan huruf tebal kepada orang-orang yang melihat halaman web Anda melalui browser web, Anda akan menggunakan kode CSS yang terlihat seperti ini:
p {color: pink; font-weight: bold; }
Dalam hal ini, “p” (paragraf) disebut “selector” dan itu adalah bagian dari kode CSS yang menentukan elemen HTML mana yang akan dipengaruhi oleh style CSS.
Dalam CSS, pemilih ditulis di sebelah kiri braket keriting pertama.
Informasi antara kurung keriting disebut declaration (deklarasi), dan berisi property (properti) dan nilai yang diterapkan ke pemilih.
CSS property berisi hal-hal seperti ukuran font, warna, dan margin, sedangkan nilai adalah pengaturan untuk properti tersebut.
Dalam contoh di atas, “color” dan “font-weight” adalah property (properti), dan “pink” dan “bold” adalah value (nilai).
Manfaat Menggunakan CSS
Berdasarkan pembahasan di atas, maka secara garis besar kita pasti sudah dapat melihat apa saja manfaat dan keuntungan menggunakannya bukan?
Oke baiklah, berikut ini adalah beberapa manfaat menggunakan CSS (Cascading Style Sheets) yang perlu kalian ketahui.
a. Memecahkan Masalah Besar
Manfaat menggunakan CSS yang pertama adalah untuk memecahkan masalah besar. Ya! HTML tidak pernah dimaksudkan untuk mempunyai tag agar dapat memformat halaman web!
HTML hanya dibuat untuk menjelaskan konten halaman web, seperti:
<h1> Ini adalah judul!</h1>
<p> Ini adalah paragraf. </p>
Ketika tag seperti <i>, dan atribut warna ditambahkan ke spesifikasi HTML 3.2 sebelum HTML5 (baca pengertian HTML5 di sini) seperti sekarang ini, itu akan membuat mimpi buruk bagi para web developers atau pengembang web.
Dalam pengembangan situs web yang besar, di mana font dan informasi warna ditambahkan ke setiap halaman, itu pastinya akan menjadi proses yang terbilang panjang dan mahal!
Untuk mengatasi masalah ini, World Wide Web Consortium (W3C) menciptakan CSS yang menghapus pemformatan gaya dari halaman HTML!
b. Menghemat Banyak Pekerjaan
Manfaat menggunakan CSS berikutnya adalah untuk menghemat banyak pekerjaan. Sebagaimana definisinya, kita dapat mengubah seluruh situs web hanya dengan mengubah satu file saja!
Benar! Mereka biasanya disimpan dalam file .css eksternal terkait penggunaannya secara external.
c. Memungkinkan Lebih Banyak Atribut
Yang terakhir adalah memungkinkan lebih banyak HTML atribute atau atribut. CSS memberikan atribut yang lebih rinci daripada HTML biasa untuk mendefinisikan tampilan dan nuansa situs web.
Jenis dan Contoh CSS (Cascading Style Sheets)
Setelah kita mengetahui apa pengertian CSS atau Cascading Style Sheets, adalah merupakan hal penting bagi Kami untuk juga menjelaskan tentang apa saja jenis-jenis dan contoh mereka.
Perlu kalian ketahui, ada 3 (tiga) macam jenis CSS terkait cara Anda menyisipkan CSS di halaman web Anda, yaitu adalah sebagai berikut:
- Inline style CSS
- Internal atau embedded CSS
- External CSS
Di bawah ini adalah penjelasan daripada masing-masing macam jenis dan contohnya.
1. Inline Style CSS
Jenis yang pertama adalah inline style CSS. Lembar style yang berjenis inline merujuk pada informasi yang terkait dengan style yang fungsional untuk elemen HTML yang ada.
Jenis ini digunakan untuk menata elemen HTML tertentu.
Untuk gaya CSS ini, Anda hanya perlu menambahkan atribut style ke setiap tag HTML, tanpa menggunakan penyeleksi.
Jenis CSS ini tidak benar-benar direkomendasikan, karena setiap tag HTML harus ditata secara individual.
Mengelola situs web Anda mungkin menjadi terlalu sulit jika Anda hanya menggunakan CSS inline (sebaris).
Namun, inline CSS dalam HTML dapat berguna dalam beberapa situasi.
Misalnya, dalam kasus di mana Anda tidak memiliki akses ke file CSS atau perlu menerapkan gaya hanya untuk satu elemen.
Berikut ini adalah contoh dari sintaksis inline style CSS:
<HTML element style="properties: value"> ... </ HTML element>
Adapun contoh penerapannya pada HTML element adalah sebagai berikut:
<p style="color: blue">Teks ini mendapatkan efek gaya inline.</p>
2. Internal atau Embedded CSS
Jenis berikutnya adalah internat atau embedded CSS. Ini adalah lembar gaya di mana desainer dapat menyematkan informasi Cascading Style Sheets dalam dokumen HTML dengan memanfaatkan elemen “style”.
Penyisipan style sheet macam ini dimasukkan dalam tag <style> ... </style> yang terdapat di dalam elemen “head” yaitu bagian <head> .... </head> dokumen HTML.
Berikut ini adalah contoh dari penerapan internal atau embedded CSS dalam dokumen HTML:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: blue;
}
h1 {
color: red;
padding: 30px;
}
</style>
</head>
<body>
<h1>Ini adalah judul.</h1>
<p>Ini adalah paragraf.</p>
</body>
</html>
3. External CSS
Yang terakhir adalah jenis eksternal atau external CSS. Jenis lembar gaya ini mempunyai file terpisah di mana desainer web dapat menyatakan setiap gaya CSS yang tampaknya relevan untuk situs web.
Ini harus dikaitkan dengan style sheet eksternal secaran langsung dari halaman HTML Anda.
Anda harus mengikuti beberapa langkah spesifik untuk membuat Cascading Style Sheets konseptual ini dapat diimplementasikan.
Langkah-langkah untuk membuat ekternal atau external CSS adalah sebagai berikut:
- Buat sebuah dokumen dengan format Cascading Style Sheets dengan mengetikkan kode CSS dalam file teks (biasanya menggunakan text editor), dan kemudian simpan dengan ekstensi
.css. - Sekarang, Anda harus menautkan file tersebut dengan dokumen HTML dengan menggunakan elemen “link” pada HTML.
Berikut ini adalah contoh cara menautkan atau me-link-kan file CSS dari dokumen HTML Anda:
<head> <link rel = "stylesheet" href = "filesaya.css" /> </head>
Bagaimana Cara Menggunakan CSS?
Lalu, bagaimana caranya menggunakan Cascading Style Sheets (CSS)?
Jika kalian yang sendang membaca postingan Kami di sini dan kebetulan sedang bertanya-tanya tentang bagaimana cara menggunakannya, maka dapat Kami katakan di sini ahwa kalian berada di tempat yang tepat!
Kenapa? Tentu saja di sini Kami juga akan menjelaskannya! Ya, sintaksis CSS sederhana dan terdiri dari dokumen teks biasa yang disebut style sheets.
Lembar gaya yang dipisahkan menjadi blok-blok kode disebut rule (aturan).
Aturan CSS terdiri dari 2 (dua) bagian untuk dapat bekerja dengan kode HTML.
Bagian pertama dari rule (aturan) CSS adalah selector (pemilih).
Selektor CSS tersebut menyatakan HTML element (baca pengertian HTML element di sini) mana dalam dokumen HTML yang ingin dikembangkan oleh developer (pengembang).
Anda dapat memanggil aturan dengan selector yang berlaku, sebagai contoh misalnya untuk paragraf (diidentifikasi dengan tag “p”) dan itu akan memengaruhi semua paragraf dalam dokumen HTML Anda.
Selector atau penyeleksi tersebut juga berlaku untuk HTML dalam 2 (dua) cara.
Anda bisa menerapkan gaya Anda ke semua elemen pada halaman seperti disebutkan sebelumnya atau menerapkannya pada elemen tertentu dalam halaman melalui atribut.
CSS selector untuk atribut HTML diidentifikasi dalam 2 (dua) bentuk, yaitu “id” dan “class”.
Id mempengaruhi pengidentifikasi unik di dalam dokumen. Mereka akan ditandai dengan simbol “#” dalam proses deklarasinya.
Id tidak dapat berbagi nama pengidentifikasi yang sama dengan id lain dalam dokumen.
Jika Anda ingin menggunakan nama pengidentifikasi yang sama untuk beberapa elemen dalam dokumen, Anda akan menggunakan atribut “class” yang diwakili oleh simbol “.” dalam kode CSS Anda.
Kedua atribut tersebut adalah case-sensitive (peka huruf besar-kecil) dan dimulai dengan simbol dan huruf pengenalnya.
Mereka dapat menyertakan karakter alphanumeric (alfanumerik), tanda hubung, dan garis bawah dalam nama mereka.
Bagian kedua dari rule (aturan) CSS adalah blok declaration (deklarasi).
Blok ini adalah daftar deklarasi yang terdiri dari property, value, dan simbol “:” atau titik dua antara itemnya.
Deklarasi ini dikelilingi oleh kurung keriting “{}” atau bracket (kawat) dalam aturan CSS.
CSS property adalah item yang terpengaruh dalam selector yang ditentukan dalam standar CSS dan memiliki satu set value (nilai) yang mungkin.
CSS value adalah pengaturan yang ingin Anda masukkan ke properti Anda untuk mengubah presentasi mereka di halaman HTML.
Nilai tersebut dapat berupa kata kunci, nilai numerik, atau pengukuran.
Jika banyak deklarasi dimasukkan dalam sebuah blok, tanda titik koma “;” harus digunakan untuk memisahkan setiap deklarasi agar dapat berfungsi dalam aturan.
Anda dapat memasukkan beberapa aturan di banyak style sheet, tetapi bagaimana jika mereka saling bertentangan? Ketika ini terjadi, style akan mengalir pada style yang lebih baru dengan menggunakan urutan prioritas untuk menentukan mana yang dijawab oleh kode HTML.
Tingkat prioritas dalam proses render dan pembacaan CSS adalah:
- Prioritas ke-1 (pertama) adalah inline CSS.
- Prioritas ke-2 (kedua) adalah eksternal atau external CSS.
- Prioritas ke-3 (ketiga) bawaan default web browser.
Tetapi bagaimana jika Anda memiliki 2 (dua) style yang memiliki tingkat prioritas yang sama?
Menjalankan 2 (dua) CSS style dengan tingkat prioritas yang sama akan menyebabkan kode berjalan dari atas ke bawah.
Oleh karena itulah, bagian yang terakhir akan mendapatkan prioritas tertinggi.
Kesimpulan
Baiklah, Kami rasa sudah cukup jelas untuk sekarang. Jadi berdasarkan pembahasan dan penjelasan dari Pengertian CSS, Apa itu Cascading Style Sheets dan CSS Specificity? Sejarah, Tujuan, Cara Kerja, Manfaat, Jenis dan Contoh serta Bagaimana Cara Menggunakannya di atas, dapat kita simpulkan bahwa CSS adalah singkatan dari “Cascading Style Sheet” yaitu lembar gaya yang digunakan untuk memformat tata letak halaman web. Mereka dapat digunakan untuk menentukan gaya teks, ukuran tabel, dan aspek lain dari halaman Web yang sebelumnya hanya dapat didefinisikan dalam HTML halaman.
CSS membantu pengembang web membuat tampilan seragam di beberapa halaman situs web. Alih-alih mendefinisikan gaya setiap tabel dan setiap blok teks dalam HTML halaman, gaya yang biasa digunakan hanya perlu didefinisikan sekali dalam dokumen CSS.
Penutup
Itulah ulasan yang dapat Kami bagikan dalam postingan yang membahas tentang Pengertian CSS, Apa itu Cascading Style Sheets dan CSS Specificity? Sejarah, Tujuan, Cara Kerja, Manfaat, Jenis dan Contoh serta Bagaimana Cara Menggunakannya kali ini. Semoga bermanfaat dan dapat manambah wawasan Kita semua terutama dalam mengetahui istilah-istilah teknologi.
Silahkan share artikel atau tulisan Kami di sini jika kalian rasa ini bermanfaat untuk teman-teman, kerabat serta rekan belajar kalian semua. Sekian dari Saya, Terima Kasih.
Postingan ini juga tersedia dalam versi:
