CSS : Pengertian, Fungsi dan Cara Kerjanya

CSS (Cascading Style Sheets) adalah bahasa pemrograman yang digunakan untuk mengatur tampilan dan penataan elemen-elemen dalam sebuah halaman web. Dengan CSS, Anda dapat mengendalikan warna, ukuran, jenis huruf, jarak antar elemen, dan berbagai aspek tampilan lainnya pada halaman web. Ini memungkinkan pemisahan antara struktur konten (HTML) dan tampilan (CSS), sehingga memudahkan perubahan tampilan tanpa harus merubah struktur konten secara langsung. CSS bekerja dengan cara menyediakan aturan-aturan yang diterapkan pada elemen-elemen HTML untuk mencapai tampilan yang diinginkan.

Pengertian CSS

CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk membuat tampilan dan gaya dalam halaman web yang ditulis di dalam bhs markup seperti HTML atau XML. Dengan CSS, Anda mampu mengatur aspek-aspek seperti warna, ukuran teks, jarak pada elemen, tata letak, dan bermacam properti tampilan lainnya yang terdapat dalam elemen-elemen halaman web. CSS sangat mungkin pemisahan pada struktur konten dan presentasi, sehingga amat mungkin pergantian tampilan tanpa merubah struktur kode asli. Ini membuahkan halaman website yang lebih fleksibel, gampang diatur, dan berkesinambungan secara visual.

Fungsi CSS

CSS (Cascading Style Sheets) memiliki beberapa fungsi utama dalam pengembangan web:

Tampilan yang Konsisten: CSS memungkinkan Anda mengatur tampilan halaman web secara konsisten di seluruh situs. Anda dapat mendefinisikan gaya sekali dan menerapkannya pada berbagai halaman, sehingga menciptakan kesan profesional dan seragam.
Pemisahan Konten dan Presentasi: Dengan menggunakan CSS, Anda dapat memisahkan struktur konten (HTML) dari tampilan dan gaya (CSS). Ini memungkinkan pembaruan tampilan tanpa harus merubah konten, serta mempermudah perawatan dan pengelolaan situs.
Fleksibilitas Tampilan: CSS memberikan fleksibilitas untuk mengubah tampilan halaman web dengan mudah. Anda dapat mengubah warna, font, ukuran, dan tata letak hanya dengan mengedit kode CSS tanpa harus menyentuh kode HTML.
Efisiensi dan Kecepatan: Menggunakan CSS dapat membantu mengurangi ukuran file halaman web dan mempercepat waktu muat. Ini karena gaya yang didefinisikan dalam file CSS dapat digunakan oleh berbagai halaman, mengurangi repetisi kode.
Penataan Tata Letak: Dengan CSS, Anda dapat mengendalikan tata letak halaman secara presisi. Anda dapat menentukan posisi, jarak, dan ukuran elemen, serta mengatur tata letak responsif untuk berbagai perangkat.
Gaya Berbeda untuk Media Berbeda: CSS memungkinkan Anda mendefinisikan gaya yang berbeda untuk media berbeda, seperti layar komputer, cetakan, atau perangkat mobile. Ini memungkinkan tampilan yang optimal tergantung pada media yang digunakan oleh pengguna.
Animasi dan Transisi: CSS juga memungkinkan pembuatan animasi, transisi, dan efek visual lainnya. Ini dapat meningkatkan interaksi dan daya tarik halaman web.
Optimasi untuk Aksesibilitas: Dengan menggunakan CSS secara bijak, Anda dapat meningkatkan aksesibilitas situs web bagi pengguna dengan berbagai kebutuhan, seperti tunanetra atau difabel visual.

Secara singkat, CSS adalah alat penting dalam desain dan pengembangan web yang memberikan kontrol atas tampilan dan gaya halaman, serta memungkinkan peningkatan fleksibilitas dan efisiensi dalam pengelolaan tampilan web.

Jenis - Jenis CSS

CSS (Cascading Style Sheets) memiliki beberapa jenis yang masing-masing memiliki fokus dan penggunaan yang berbeda:

Inline CSS: Ini adalah gaya yang diterapkan langsung pada elemen HTML menggunakan atribut style. Contoh:< p style=" color : blue;">Ini teks biru.< /p> Namun, penggunaan ini kurang disarankan karena sulit untuk dikelola dan memisahkan gaya dari struktur.
Internal CSS: Ini adalah gaya yang ditempatkan di dalam elemen
External CSS: Gaya ini ditempatkan dalam file terpisah dengan ekstensi .css. File ini dapat diterapkan pada berbagai halaman HTML. Contoh:
File style.css:
< head>
< style>
p
{
color: red;
}
< /style>
< /head>

Dalam HTML:
< link rel="stylesheet" type="text/css" href="style.css" >
Media Queries: Jenis CSS ini memungkinkan Anda mengatur gaya yang berbeda tergantung pada karakteristik media, seperti lebar layar perangkat. Ini digunakan untuk membuat desain responsif yang beradaptasi dengan baik pada berbagai ukuran perangkat.
CSS Frameworks: Ini adalah kumpulan gaya dan komponen yang sudah siap pakai untuk mempercepat pengembangan. Contoh termasuk Bootstrap, Foundation, dan Bulma.
CSS Preprocessors: Alat seperti Sass (Syntactically Awesome Style Sheets) dan Less memperluas kemampuan CSS dengan menyediakan sintaks yang lebih kuat, seperti variabel, fungsi, dan mixin. Ini membantu dalam mengelola dan memodularisasi kode gaya.
CSS Libraries: Ini adalah koleksi gaya yang dapat digunakan untuk memperindah elemen seperti tombol, ikon, atau animasi. Contoh termasuk Font Awesome dan Animate.css.
CSS-in-JS: Ini adalah pendekatan di mana gaya ditulis menggunakan sintaks JavaScript dan diterapkan sebagai bagian dari komponen web. Ini populer dalam pengembangan aplikasi berbasis JavaScript, seperti React.
Custom CSS Properties (CSS Variables): CSS sekarang mendukung variabel yang dapat didefinisikan dan digunakan dalam berbagai aturan gaya. Ini memungkinkan untuk lebih fleksibel dalam pengaturan dan perubahan gaya.
Print CSS: Gaya ini dioptimalkan khusus untuk pencetakan, memungkinkan Anda mengontrol tampilan ketika halaman dicetak.

Jenis-jenis di atas mencerminkan fleksibilitas dan kompleksitas yang dimiliki CSS dalam pengembangan web modern. Pilihan jenis CSS yang tepat akan tergantung pada kebutuhan dan pendekatan pengembangan yang Anda pilih.

Cara Kerja CSS

Cara kerja CSS melibatkan proses penerapan gaya visual ke dalam elemen-elemen dalam halaman web. Berikut adalah langkah-langkah umum tentang bagaimana CSS bekerja:

Seleksi Elemen: Pertama, Anda memilih elemen atau kelompok elemen tertentu pada halaman web yang ingin Anda gayakan. Selektor CSS digunakan untuk menargetkan elemen ini. Contoh selektor: p (untuk elemen paragraf), .header (untuk elemen dengan kelas "header"), #title (untuk elemen dengan id "title").
Deklarasi Properti: Setelah elemen atau kelompok elemen ditargetkan, Anda mendeklarasikan properti-properti gaya yang ingin diubah. Properti ini bisa berupa warna, ukuran font, tata letak, jarak, dan lain-lain. Contoh deklarasi: color: blue;, font-size: 16px;, margin-top: 10px;.
Pengaplikasian Gaya: Setelah deklarasi properti gaya ditentukan, Anda menerapkan gaya ini pada elemen atau kelompok elemen yang sesuai dengan selektor. Gaya ini dapat diterapkan langsung pada elemen dalam HTML menggunakan atribut style, atau melalui elemen