CSS merupakan salah satu bahasa yang wajib Anda ketahui saat belajar membuat website. Tanpa itu, tampilan situs web akan kurang menarik, dan diperlukan lebih banyak upaya untuk melakukan perubahan pada elemen tampilan.
Nah, untuk mulai belajar tentang CSS, kamu bisa menyimak artikel ini. Anda akan mempelajari apa itu CSS dan berbagai hal yang berkaitan dengan bahasa, mulai dari fungsi hingga jenis CSS.
Tanpa basa-basi lagi, mari kita mulai dengan mengetahui pengertian CSS!
Apa itu CSS?
CSS singkatan dari lembar gaya berjenjang, yang merupakan bahasa yang digunakan untuk menentukan tampilan dan format halaman situs web. Dengan CSS, Anda dapat mengatur jenis font, warna teks, dan latar belakang halaman.
CSS digunakan bersama dengan bahasa markup, seperti HTML dan XML untuk membangun situs web yang menarik dan berfungsi dengan baik.
CSS juga berguna untuk mengatasi keterbatasan HTML dalam mengatur format halaman website. Mengapa demikian?
Jika Anda hanya menggunakan HTML saat membuat situs web dengan banyak halaman, Anda harus menulis tag untuk elemen HTML di semua halaman tersebut.
Dengan CSS, Anda cukup menulis kode sekali agar elemen HTML diterapkan ke semua halaman. Nantinya, saat ingin melakukan perubahan, Anda juga cukup melakukan perubahan pada satu kode saja. Praktis, bukan?
Meski begitu, CSS sering dianggap sebagai bahasa pemrograman. Bahkan, CSS lebih tepat disebut sebagai bahasa style sheet.
Apa Fungsi CSS?
Secara umum CSS berfungsi untuk mengatur tampilan halaman website berdasarkan HTML atau bahasa markup lainnya. Tapi, masih ada beberapa fungsi CSS lainnya, yaitu:
1. Mempercepat Pemuatan Halaman Web
Jika Anda mengatur tampilan situs web dengan CSS, kecepatan memuat situs web dapat ditingkatkan. Karena Anda dapat menulis satu set kode untuk beberapa halaman situs web sekaligus, jumlah kode dapat diminimalkan. Dengan begitu, beban saat proses loading website lebih kecil.
2. Sederhanakan Manajemen Kode
Dengan CSS, Anda tidak perlu mengubah kode di setiap halaman jika ingin mengubah tampilan website Anda. Misalnya, Anda ingin mengubah latar belakang semua halaman situs web Anda. Kemudian, cukup edit kode CSS terkait latar belakang, perubahan akan diterapkan ke semua halaman.
3. Menawarkan Lebih Banyak Variasi Tampilan
HTML dapat digunakan untuk mengatur tampilan halaman website, namun terbatas. Nah, CSS menawarkan lebih banyak gaya tampilan, sehingga Anda dapat lebih leluasa membuat antarmuka situs web. Misalnya, Anda dapat menggunakan CSS untuk membuat tombol dengan warna yang Anda inginkan.
4. Jadikan Situs Web Terlihat Rapi di Semua Ukuran Layar
Fungsi CSS yang tidak kalah menarik adalah membuat tampilan website menjadi optimal dalam berbagai ukuran layar. Baik di laptop maupun smartphone. Mengapa demikian?
CSS memiliki variasi Properti untuk mengatur tampilan konten sesuai kebutuhan layar, misalnya dengan max-width. Ketika menggunakan Properti ini mengubah ukuran elemen HTML sesuai dengan ukuran layar yang digunakan untuk menampilkan situs web.
Jenis Jenis CSS Yang Perlu Anda Ketahui
Jenis CSS dibagi menjadi tiga berdasarkan penempatan kode, yaitu:
1. CSS sebaris
CSS sebaris adalah kode CSS yang ditulis di dalam file HTML. Jenis CSS ini hanya mempengaruhi satu baris kode HTML.
Perhatikan baris kode di bawah ini sebagai contoh:
<h1 style="font-size:30px;color:blue;">Cek beritama utama ini!</h1>Dengan kode itu, Anda akan mendapatkan hasil ini:
CSS sebaris tidak dapat diterapkan ke semua halaman situs web sekaligus. Namun, jenis CSS ini sangat ideal untuk digunakan saat Anda ingin membuat elemen HTML dengan format khusus pada halaman.
2. CSS internal
CSS internal ditulis di bagian header file HTML. Fungsinya untuk menentukan tampilan suatu halaman.
Misalnya, jika Anda ingin halaman memiliki latar belakang biru dan teks putih 20px, kodenya seperti di bawah ini:
<head> <style> Body { background-color:blue; } P { font-size:20px; color:white; } <p>Ini adalah contoh kalimat.</p> </style> </head>
CSS internal sangat membantu ketika Anda ingin membuat halaman website yang terlihat berbeda dengan halaman lainnya.
3. CSS Eksternal
Seperti namanya, CSS eksternal adalah kode CSS yang ditempatkan di luar dokumen HTML sebagai file .css. CSS jenis ini berfungsi untuk mengontrol tampilan semua halaman website yang Anda tentukan. Jadi, CSS eksternal berguna ketika Anda ingin mengatur tampilan beberapa halaman sekaligus.
Agar halaman situs web menggunakan CSS eksternal, Anda perlu menambahkan kode di bagian header kode HTML-nya. Contohnya adalah sebagai berikut:
<head>
<link rel="stylesheet" type="text/css" href=fileCSSAnda.css">
</head>
Dengan kode tersebut, halaman website Anda akan menggunakan file CSS.css Anda untuk menyesuaikan tampilannya.
Sekarang Anda sudah tahu bagaimana setiap jenis CSS dibuat dan dampaknya terhadap halaman website, bukan? Tapi, bagaimana cara kerja CSS ketika sebuah situs web dimuat? Yuk simak penjelasannya di bawah ini.
Bagaimana CSS Bekerja?
CSS berfungsi saat browser memuat halaman situs web. Untuk menerapkan pengaturan tampilan HTML yang telah ditentukan dengan kode CSS, prosesnya melibatkan beberapa langkah.
Awalnya, browser akan memuat file HTML dan CSS (jika kode ditulis sebagai CSS eksternal). Kemudian, browser ubah keduanya menjadi model objek dokumen (DOM). Ini adalah komponen yang mewakili file HTML dan CSS di memori perangkat pengunjung situs web.
Setelah HTML dan CSS dikonversi ke DOM, browser akan melakukan rendering, proses di mana browser menerapkan pengaturan dalam kode CSS ke elemen HTML. Hasilnya adalah halaman situs web yang muncul di layar perangkat Anda.
5+ Contoh CSS
Berikut adalah beberapa contoh implementasi CSS sederhana:
1. Tentukan Format Paragraf
Salah satu contoh CSS adalah mengatur format paragraf. Misalkan Anda ingin semua paragraf di halaman website menjadi 120% tebal dan abu-abu gelap, Anda cukup menambahkan kode di bawah ini:
p { font-size: 120%; color: dimgray; }2. Ubah Warna Tautan
Anda juga dapat mengubah warna tautan dengan CSS. Sebagai catatan, ada empat warna tautan yang ditentukan oleh CSS, yaitu:
- Normal: warna link yang belum pernah dibuka dan belum diklik
- Dikunjungi: warna link yang sudah dibuka
- Arahkan kursor: warna saat Anda meletakkan kursor di atas tautan
- Aktif: warna tautan saat Anda mengklik
Untuk menentukan empat warna, gunakan kode di bawah ini dan ketik warna yang Anda inginkan setelahnya warna:.
a:link { color: gray; } a:visited { color: green; } a:hover { color: purple; } a:active { color: teal; }3. Tentukan Kapital/Huruf Kecil
Apakah Anda ingin paragraf menjadi huruf kecil? Yang harus Anda lakukan adalah mengganti “Paragraf Anda” di kode berikut dengan teks yang Anda inginkan:
<p class="smallcaps">Paragraf Anda.</p>4. Buat Kotak Teks
CSS juga memungkinkan Anda membuat kotak teks. Umumnya, kotak teks digunakan untuk menyoroti informasi penting. Untuk melakukan ini, gunakan contoh CSS ini:
p.penting {border-style: solid; lebar batas: 5px; warna batas: ungu; }
Kode akan menambahkan kotak dengan batas 5px dan ungu di sekitar teks yang Anda tandai kelas penting. Untuk menandai teks dengan kelas lalu, tambahkan kode berikut:
<p class="important">Paragraf Anda.</p>5. Buat Tombol Tautan
Tautan akan terlihat lebih menonjol jika ditempatkan di sebuah tombol. Untuk membuatnya dengan CSS, gunakan 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; }Untuk mengetahui apa yang dilakukan bagian-bagian kode tersebut, lihat penjelasan berikut:
- a: tautan, a: dikunjungi, a: hover, a: aktif pastikan bahwa tombol Anda akan selalu muncul meskipun diklik atau diarahkan dengan kursor.
- warna latar belakang menentukan warna tombol.
- lapisan menentukan ukuran tombol.
- perataan teks menentukan lokasi teks di tombol, misalnya di tepi atau di tengah.
- dekorasi teks menentukan ada atau tidaknya garis bawah pada teks tersebut.
- tampilan: inline-block memungkinkan Anda untuk menyesuaikan tinggi dan lebar tombol.
6. Sorot Baris di Tabel
Jika Anda ingin baris dalam tabel memiliki warna yang berbeda saat diarahkan dengan kursor, Anda dapat menambahkan contoh CSS berikut:
tr:hover { background-color: #ddd; }
Setelah warna latar belakang: Anda cukup mengganti #ddd dengan kode warna CSS. MEMERIKSA Daftar kode warna CSS ketika Anda belum tahu.
Setelah warna latar belakang: Anda cukup mengganti #ddd dengan kode warna CSS. Periksa daftar kode warna CSS jika Anda belum tahu.
Anda sudah tahu apa itu CSS, kan?
Pada artikel ini Anda sudah mengetahui pengertian, fungsi, dan jenis-jenis CSS. Selain itu, Anda juga telah menyimak beberapa contoh CSS.
CSS adalah bahasa yang perlu Anda kuasai untuk membuat tampilan situs web yang bagus dengan cepat. Anda cukup menambahkan kode CSS ke file HTML atau membuat file CSS untuk mengatur beberapa halaman sekaligus.
Nah, jika Anda sudah bisa membuat website dengan HTML dan CSS, tentunya Anda membutuhkan layanan hosting yang handal agar website tersebut bisa diakses oleh semua orang.
Layanan web hosting Niagahoster adalah pilihan yang tepat untuk kebutuhan tersebut. Karena, layanan hosting ini memiliki waktu aktif 99,99% yang membuat situs online 24 jam tanpa henti. Jadi, pengunjung bisa mengakses website Anda kapan saja.
Selain itu, layanan hosting Niagahoster hadir dengan fitur Imunify360 yang mampu memindai dan menghapus malware dari situs web Anda. Dengan cara itu, Keamanan situs web akan dijamin.
Tak kalah menarik, Anda bisa berlangganan layanan hosting mulai dari Rp 26.813/bulan hanya. Itu masih ditambah domain gratis.
Ayo segera dapatkan paket hosting terbaik untuk website Anda!
Sumber: Niagahoster
