Jika anda berkutat dengan dunia coding, kemungkinan besar anda telah familiar dengan CSS. tapi, apa itu CSS sebenarnya? Singkatnya, CSS (Cascading Style Sheets) adalah bahasa yang menentukan gaya dokumen web. Ini mencakup semuanya, mulai dari warna dan font yang digunakan hingga spasi dan tata letak halaman.
Dengan kata lain, CSS adalah apa yang membuat halaman web terlihat bagus. Meskipun gaya default yang disediakan oleh browser web baik-baik saja dalam keadaan darurat, mereka biasanya tidak cukup untuk membuat situs web yang benar-benar unik dan menakjubkan secara visual.
Daftar Isi
Pengertian CSS
CSS adalah singkatan dari Cascading Style Sheets adalah bahasa yang digunakan untuk menyesuaikan elemen yang ditulis dalam bahasa markup seperti HTML. ini memisahkan konten dari representasi visual situs. Hubungan antara HTML dan CSS sangat terikat karena HTML adalah dasar dari sebuah situs dan CSS adalah semua yang menyangkut estetika dari keseluruhan website.
CSS digunakan untuk menata semua tag HTML, termasuk badan dokumen, judul, paragraf, dan potongan teks lainnya. CSS juga dapat digunakan untuk menata tampilan elemen tabel, elemen grid, dan gambar.
Fungsi CSS
Meningkatkan Kecepatan Loading
Dengan mengatur tampilan website dengan CSS, Anda dapat meningkatkan kecepatan loading website karena Anda tidak perlu menulis banyak halaman kode sekaligus, meminimalkan jumlah kode yang diperlukan. Akibatnya, jumlah kode yang diperlukan untuk menyelesaikan proses lebih sedikit.
Mudahkan Pengelolaan Code
Apabila Anda ingin mengubah tampilan website, Anda tidak perlu merubah kode setiap halaman dengan CSS. Jika, misalnya, Anda ingin mengubah latar belakang semua halaman website, Anda hanya perlu mengubah kode CSS yang berkaitan dengan latar belakang, dan perubahan akan diterapkan pada semua halaman.
Menawarkan Beragam Variasi Tampilan
Meskipun HTML memiliki beberapa kemampuan untuk mengatur tampilan halaman web, CSS menawarkan lebih banyak style tampilan, memungkinkan Anda untuk membuat antarmuka website dengan lebih bebas. Anda dapat menggunakan CSS untuk mengubah warna tombol atau membuat menu dropdown CSS.
Mengoptimalkan Tampilan
Fungsi CSS yang tidak kalah menarik adalah mengoptimalkan tampilan website di laptop dan smartphone. Mengapa hal ini terjadi?. Dengan menggunakan properti CSS, Anda dapat mengatur tampilan konten sesuai dengan ukuran layar. Properti seperti max-width mengubah ukuran elemen HTML sesuai dengan ukuran layar yang digunakan untuk menampilkan website.
Jenis-Jenis CSS yang Perlu Anda Tau
Inline CSS
Inline CSS digunakan untuk menerapkan gaya unik ke elemen HTML tunggal. Untuk menggunakan inline css, anda cukup menambahkan atribut style ke elemen HTML yang relevan. Atribut style dapat berisi properti CSS apapun seperti color, font family, dll.
CSS Internal
CSS internal digunakan untuk menerapkan gaya unik ke seluruh dokumen HTML atau bagian dari dokumen HTML. Internal CSS ditambahkan dalam elemen <style>, yang terletak di bagian <head> dari dokumen HTML. elemen <style> dapat berisi properti CSS apapun seperti color, font-family, dll.
CSS External
CSS external digunakan untuk menerapkan gaya unik ke seluruh website. File CSS eksternal disimpan dengan ekstensi file .css dan ditautkan dari dalam dokumen HTML menggunakan elemen <link> yang terletak di bagian <head>.
Cara Kerja CSS
CSS adalah bahasa yang digunakan untuk menata dokumen HTML. Bahasa ini dapat digunakan untuk membuat situs web sederhana dan kompleks. Untuk memahami cara kerja CSS, penting untuk memahami dasar-dasar HTML.
HTML adalah bahasa markup yang digunakan untuk menyusun konten pada halaman web. Elemen HTML adalah blok bangunan dari dokumen HTML. Elemen-elemen ini diwakili oleh tag. Misalnya, tag dapat digunakan untuk membuat elemen paragraf. Tag mendefinisikan hyperlink, yang memungkinkan Anda untuk menautkan ke halaman web lain. Tag mendefinisikan elemen heading. Ada banyak tag HTML lain yang digunakan untuk menyusun konten pada halaman web.
Instruksi CSS ditambahkan ke dokumen HTML untuk menata dokumen. Petunjuk ini ditambahkan dalam tag . Tag harus ditempatkan di dalam elemen head dokumen HTML. Hanya boleh ada satu elemen per dokumen. Elemen berisi satu atau lebih aturan CSS. Setiap aturan terdiri dari pemilih dan blok deklarasi.
Blok deklarasi berisi satu atau beberapa deklarasi. Setiap deklarasi terdiri dari properti dan nilai. Properti mengidentifikasi aspek elemen mana yang ingin Anda beri gaya dan nilainya menentukan bagaimana Anda ingin memberi gaya pada elemen tersebut.
Misalnya, Anda dapat menggunakan properti warna untuk mengubah warna teks elemen atau properti font-family untuk mengubah font elemen. Deklarasi harus selalu diakhiri dengan titik koma. Beberapa deklarasi dapat ditambahkan dalam blok deklarasi yang sama dengan memisahkan setiap deklarasi dengan titik koma.
Contoh CSS
Berikut adalah beberapa contoh penggunaan CSS:
Menentukan Format Paragraf
Salah satu contoh CSS adalah mengatur format paragraf. Misalnya, jika Anda ingin semua paragraf di halaman web berukuran 120% dan berwarna abu tua, Anda hanya perlu menambahkan kode berikut:
p { font-size: 115%; color: beige; }
Menentukan Huruf Kapital
Anda hanya ingin huruf kecil dalam setiap paragraf? Mengganti “Contoh Paragraf” dengan teks yang Anda inginkan di kode berikut:
<p class=”smallcaps“>Contoh Paragraf</p>
Merubah Warna Link
Selain itu, Anda dapat mengubah warna link menggunakan CSS. Gunakan beberapa kode dibawah ini:
a:link { color: gray; }
a:visited { color: blue; }
a:hover { color: goldenrod; }
a:active { color: pink; }
Warna link yang ditetapkan ada empat, yaitu:
- Normal. warna link yang belum pernah dibuka dan tidak diklik;
- Visited. warna link yang sudah pernah dibuka;
- Hover. warna ketika Anda meletakkan kursor di atas link; dan
- Active. warna link ketika Anda klik.
Membuat Tombol
Untuk membuat link terlihat lebih jelas, masukkan mereka ke dalam tombol dengan menggunakan kode di bawah ini:
a:link, a:visited, a:hover, a:active { background-color: green; color: white; padding: 10px 25px; text-align: center; text-decoration: none; display: inline-block; }
Dengan atribut “link”, “dilihat”, “hover”, dan “aktif”, tombol Anda tetap tampil meskipun sudah diklik atau ditunjuk dengan kursor.
Warna latar belakang menentukan warna tombol, dan padding menentukan ukurannya. Align teks menentukan letak teks dalam tombol, seperti di tengah atau di pinggir. Desain teks menentukan apakah ada garis bawah di teks. Penampilan: blok inline memungkinkan Anda mengatur tinggi dan lebar tombol.
Meng Highlight Baris dalam Tabel
Jika Anda ingin baris dalam tabel berubah warna ketika ditunjukkan dengan kursor, Anda dapat menambahkan contoh CSS berikut ini:
tr:hover { background-color: #fff; }
Jika Anda belum tahu tentang warna background, Anda hanya perlu mengganti #ddd dengan kode warna CSS.
Ingin Buat Website Bisnis Lebih Mudah Anti Ribet?
Anda telah mempelajari pengertian, fungsi, dan jenis jenis CSS di artikel ini. Anda juga telah membaca beberapa contoh CSS. Agar Anda dapat dengan cepat membuat tampilan website yang menarik, CSS adalah bahasa yang harus Anda kuasai. Anda hanya perlu menambahkan kode CSS ke dalam file HTML atau membuat file CSS untuk mengatur beberapa halaman sekaligus.
Terlepas dari itu, jika anda menginginkan untuk memiliki website bisnis tanpa ribet, anda dapat menggunakan jasa pembuatan website dari Nevaweb! Yuk, kunjungi website Nevaweb dan konsultasikan website impianmu sekarang juga!
