Cascading Style Sheets, atau CSS, adalah bahasa yang memberi tahu tampilan halaman web. CSS menambahkan warna, gaya, dan tata letak ke struktur polos situs web. Sama seperti Anda memilih pakaian agar merasa nyaman dan terlihat rapi, CSS membantu halaman web agar terlihat menarik. Dalam pengembangan web, kita menggunakan CSS untuk mengubah warna, ukuran, dan posisi teks dan kotak pada halaman. Pelajaran ini akan memperkenalkan Anda pada dasar-dasar CSS dalam bahasa yang sederhana. Kita akan mempelajari apa itu CSS, mengapa itu penting, dan bagaimana cara kerjanya dengan HTML.
CSS adalah singkatan dari Cascading Style Sheets. Ini adalah bahasa khusus yang digunakan untuk menata halaman web. Anggaplah CSS sebagai cat dan dekorasi untuk sebuah bangunan. Bangunan terbuat dari HTML, dan CSS membuatnya cantik. Dengan menggunakan CSS, Anda dapat mengubah warna latar belakang, gaya font, dan spasi di sekitar elemen pada halaman web Anda. CSS adalah alat yang membantu desainer web membuat situs web terlihat lebih baik dan lebih menarik.
Bayangkan Anda sedang mewarnai gambar. Garis-garis pada gambar tersebut seperti struktur dasar situs web. CSS seperti krayon dan spidol yang membuat gambar tampak lebih hidup. Dengan beberapa aturan sederhana, Anda dapat mengubah seluruh gambar dari polos menjadi berwarna!
CSS digunakan untuk membuat situs web menarik dan mudah digunakan. CSS menjaga gaya tetap terpisah dari konten. Ini berarti kata-kata dan gambar pada halaman (disediakan oleh HTML) tetap sama, sementara CSS mengontrol tampilannya. Saat Anda memperbarui gaya, Anda tidak perlu mengubah konten. Pemisahan ini membantu pengembang web bekerja lebih cepat dan membuat situs lebih menarik untuk dikunjungi.
Anggaplah CSS seperti pakaian yang Anda pilih. Jika Anda mengenakan pakaian yang berbeda, penampilan Anda akan berbeda, tetapi Anda tetap orang yang sama. CSS mengubah tampilan situs web tanpa mengubah informasi di dalamnya. Hal ini memudahkan pembaruan desain seluruh situs web hanya dengan mengedit satu berkas CSS.
CSS bekerja sama dengan HTML. HTML adalah fondasi yang menentukan di mana letak suatu halaman web. CSS kemudian berperan untuk menambahkan warna, font, dan gaya. Saat browser memuat halaman web, browser pertama-tama membangun struktur dengan HTML, lalu menerapkan gaya yang ditetapkan dalam CSS.
CSS ditulis sebagai seperangkat aturan. Setiap aturan memiliki dua bagian: pemilih dan blok deklarasi. Pemilih memberi tahu browser elemen HTML mana yang akan diberi gaya. Blok deklarasi berisi satu atau beberapa deklarasi. Setiap deklarasi memiliki properti dan nilai. Properti adalah apa yang ingin Anda ubah, dan nilai memberi tahu cara mengubahnya.
Misalnya, untuk mengatur warna latar belakang halaman menjadi biru muda, Anda dapat menulis aturan yang terlihat seperti ini:
<kode>tubuh {
warna latar belakang: biru muda;
</kode>Aturan sederhana ini mengubah latar belakang seluruh halaman.
Aturan dasar CSS mengikuti pola sederhana. Aturan ini menunjukkan pemilih dan blok properti serta nilai. Polanya terlihat seperti ini:
<kode>pemilih {
properti: nilai;
</kode>Di sini, pemilih memilih elemen HTML mana yang akan ditargetkan. Properti adalah apa yang ingin Anda ubah, dan nilainya adalah bagaimana Anda ingin mengubahnya.
Misalnya, jika Anda ingin semua teks paragraf berwarna biru, tuliskan:
<kode>p {
warna: biru;
</kode>Aturan ini memberi tahu peramban web bahwa setiap elemen <p> (paragraf) harus memiliki teks berwarna biru.
Pemilih CSS memungkinkan Anda memilih elemen mana di halaman web Anda yang akan terpengaruh oleh aturan gaya. Ada beberapa jenis pemilih, dan masing-masing berfungsi sedikit berbeda.
Berbagai penyeleksi ini memberi Anda banyak kekuatan untuk menata bagian tertentu dari halaman web Anda. Penyeleksi ini memungkinkan Anda untuk menargetkan elemen secara tepat dan memutuskan bagaimana tampilannya.
CSS menyediakan banyak properti berbeda yang dapat Anda gunakan untuk menata halaman web Anda. Setiap properti memungkinkan Anda mengubah aspek tertentu dari tampilan elemen. Beberapa properti umum adalah:
Setiap properti CSS diikuti oleh sebuah nilai. Misalnya, untuk memberi warna merah pada teks, Anda dapat menulis:
<kode>p {
warna: merah;
</kode>Aturan sederhana ini membuat semua paragraf memiliki teks berwarna merah. Properti color mengontrol bagaimana teks muncul dan nilai red menentukan warna yang akan digunakan.
Kata "cascading" dalam CSS berarti bahwa gaya dapat mengalir dari satu aturan ke aturan lainnya. Jika dua aturan dapat diterapkan pada elemen yang sama, urutannya dapat menentukan aturan mana yang menang. Ini mirip dengan menumpuk blok di mana satu blok terkadang menutupi sebagian blok lainnya.
Salah satu aturan umum adalah bahwa gaya yang ditulis langsung di dalam elemen HTML (disebut gaya sebaris) akan menggantikan gaya dalam berkas CSS Anda. Aturan lainnya adalah jika elemen induk diberi gaya, elemen turunannya dapat mewarisi gaya tersebut kecuali jika diberi tahu sebaliknya.
Misalnya, jika Anda menyetel warna teks <div> menjadi hijau, maka teks di dalam <div> juga akan sering tampak hijau karena pewarisan. Ini membantu mempertahankan desain yang konsisten pada halaman web.
Dengan CSS, Anda dapat mengubah warna dengan berbagai cara. Anda dapat menggunakan nama warna umum seperti merah , biru , dan hijau . Anda juga dapat menggunakan kode heksadesimal seperti <code>#FF0000</code> untuk warna merah, atau nilai RGB seperti <code>rgb(255, 0, 0)</code>.
Font merupakan bagian penting lain dari CSS. Font seperti gaya tulisan tangan yang Anda pilih di buku catatan. Di CSS, Anda dapat mengubah jenis, ukuran, ketebalan, dan gaya font. Misalnya, jika Anda ingin paragraf Anda muncul dalam format Arial, Anda dapat menggunakan:
<kode>p {
keluarga font: Arial, sans-serif;
</kode>Aturan ini memberi tahu browser untuk menampilkan teks dalam font Arial jika tersedia dan menggunakan font serupa lainnya jika tidak tersedia.
Mengubah warna dan font dengan CSS membuat teks lebih mudah dibaca dan halaman web Anda lebih menarik untuk dilihat.
Model Kotak CSS adalah cara untuk memahami bagaimana berbagai bagian elemen disusun pada halaman. Setiap elemen seperti kotak. Model kotak memiliki empat bagian:
Bayangkan sebuah foto. Foto itu sendiri adalah isinya. Alas yang mengelilingi foto itu seperti bantalan. Bingkai yang menyatukan semuanya adalah pembatas. Dan ruang di sekitar bingkai adalah margin. Dengan menggunakan model ini, Anda dapat memastikan bahwa semua bagian desain Anda memiliki ruang dan keseimbangan yang tepat.
CSS tidak hanya tentang warna dan font; CSS juga membantu Anda mengatur elemen pada halaman web. Ini disebut tata letak dan posisi. Dengan CSS, Anda dapat memutuskan di mana setiap elemen muncul pada halaman.
Ada beberapa cara untuk mengontrol tata letak halaman web, termasuk:
Menggunakan teknik tata letak ini seperti menata mainan di rak. Anda memutuskan di mana setiap mainan akan diletakkan sehingga semuanya memiliki cukup ruang dan terlihat rapi. Ini membuat halaman web Anda lebih teratur dan menarik.
Berikut ini adalah contoh bagaimana HTML dan CSS bekerja bersama. Kode contoh ini menunjukkan halaman web sederhana dengan beberapa gaya:
<kode><!DOCTYPE html>
Bahasa Indonesia:
<kepala>
<gaya>
tubuh {
warna latar belakang: biru muda;
}
h1 {
warna: biru tua;
ukuran font: 24px;
}
P {
warna: hijau;
ukuran font: 18px;
}
</gaya>
</kepala>
<tubuh>
<h1>Halaman Web Pertama Saya</h1>
<p>Ini adalah halaman web sederhana yang ditata menggunakan CSS.</p>
</tubuh>
</html></kode>Kode ini membuat halaman web dengan warna latar belakang biru muda. Teks header berwarna biru tua dan teks paragraf berwarna hijau. CSS di dalam tag <code><style></code> menunjukkan bagaimana aturan ditulis dan diterapkan.
Anda dapat menambahkan CSS ke HTML dengan tiga cara utama. Setiap metode memiliki kegunaannya sendiri, tergantung pada situasinya:
Metode eksternal adalah yang paling umum dalam pengembangan web profesional karena menjaga HTML tetap rapi dan memungkinkan Anda memperbarui gaya di banyak halaman sekaligus.
CSS sangat membantu dalam banyak hal. Berikut ini beberapa manfaat penggunaan CSS dalam pengembangan web:
Menggunakan CSS seperti memiliki kotak peralatan khusus. Setiap peralatan di kotak peralatan membantu Anda meningkatkan tampilan halaman web dengan mudah. Saat Anda berlatih, Anda akan melihat betapa hebatnya CSS dalam membuat situs web menjadi indah dan mudah digunakan.
Setiap situs web yang Anda kunjungi menggunakan CSS dalam beberapa hal. Dari situs kartun favorit Anda hingga halaman proyek sekolah, CSS membantu menciptakan tata letak yang menyenangkan dan mudah dibaca. Saat Anda melihat halaman web berwarna-warni dengan spasi yang rapi dan teks yang jelas, itu adalah CSS yang sedang bekerja.
Pertimbangkan desain situs web populer seperti situs web game, kartun, atau cerita daring. Penggunaan warna, font, dan tata letak yang cermat membantu menjadikan situs web ini menarik dan memikat. CSS juga digunakan dalam aplikasi dan situs seluler, memastikan konten terlihat bagus di layar besar dan ponsel kecil.
Dalam kehidupan sehari-hari, CSS mirip dengan mendekorasi ruangan. Anda dapat memilih tema untuk ruangan Anda, menggantung gambar berwarna, dan menata furnitur dengan rapi. CSS melakukan hal yang sama untuk situs web. Ia menghadirkan keteraturan dan keindahan pada ruang digital, sehingga menyenangkan bagi pengunjung.
Berikut adalah poin utama yang kami pelajari tentang CSS:
CSS merupakan bagian penting dari pengembangan web, yang membuat situs menjadi indah dan mudah dinavigasi. Saat Anda menjelajahi lebih jauh dan mencoba membuat halaman web sendiri, ingatlah bahwa CSS adalah alat untuk mengekspresikan kreativitas. Bersenang-senanglah bereksperimen dengan warna, font, dan tata letak, karena setiap perubahan kecil akan menambah keajaiban situs web yang dirancang dengan baik.
Teruslah berlatih dan amati situs web favorit Anda. Perhatikan bagaimana berbagai gaya digunakan untuk menarik perhatian Anda dan menciptakan pengalaman yang menyenangkan. Seiring berjalannya waktu, Anda akan melihat betapa hebatnya CSS dalam mengubah struktur HTML sederhana menjadi halaman web yang menarik secara visual.