PENGERTIAN,FUNGSI,DAN CONTOH CSS
Pengertian,Fungsi,Dan Contoh CSS
Apa Itu CSS
CSS adalah singkatan dari cascading style sheets, yaitu bahasa yang digunakan untuk menentukan tampilan dan format halaman website. Dengan CSS, Anda bisa mengatur jenis font, warna tulisan, dan latar belakang halaman.
CSS digunakan bersama dengan bahasa markup, seperti HTML dan XML untuk membangun sebuah website yang menarik dan memiliki fungsi yang berjalan baik.
Apa Fungsi CSS
Secara umum, CSS berfungsi untuk mengatur tampilan halaman website berbasis HTML atau bahasa markup lainnya. Tapi, masih ada beberapa fungsi CSS lainnya, yaitu:
1.Mempercepat Loading Halama Web
Jika Anda mengatur tampilan website dengan CSS, kecepatan loading website bisa meningkat. Karena Anda bisa menuliskan satu rangkaian kode untuk beberapa halaman website sekaligus, jumlah kode bisa diminimalkan. Dengan begitu, beban pada saat proses loading website lebih kecil.
2.Memudahkan Pengelolaan Kode
Dengan CSS, Anda tidak perlu merubah kode di setiap halaman apabila ingin mengganti tampilan website. Sebagai contoh, Anda ingin mengubah latar belakang semua halaman website. Maka, cukup edit kode CSS terkait latar belakang, perubahan itu akan diterapkan di semua halaman.
3.Menawarkan lebih banyak Variasi tampilan
HTML adalah bahasa yang dapat untuk mengatur tampilan halaman website, tetapi terbatas. Nah, CSS menawarkan lebih banyak style tampilan, sehingga Anda bisa lebih bebas membuat antarmuka website. Contohnya, Anda bisa menggunakan CSS untuk membuat tombol dengan warna yang Anda inginkan, atau membuat menu dropdown CSS.
4.Membuat Website Tampil Rapi di Semua ukuran layar
Fungsi CSS yang tidak kalah menarik adalah membuat tampilan website optimal di berbagai ukuran layar. Baik itu di laptop maupun di smartphone. Mengapa demikian?
CSS memiliki berbagai property untuk mengatur tampilan konten sesuai kebutuhan layar, misalnya dengan max-width. Ketika menggunakan property ini mengubah ukuran elemen HTML sesuai ukuran layar yang digunakan untuk menampilkan website.
Jenis Jenis CSS Yang Perlu Anda Ketahui
1.Inline CSS
Inline CSS adalah kode CSS yang dituliskan di dalam file HTML. Jenis CSS ini hanya mempengaruhi satu baris kode HTML.
Perhatikan baris kode di bawah ini sebagai contohnya:
<h1 style="font-size:30px;color:blue;">Cek beritama utama ini!</h1>Dengan kode tersebut, Anda akan mendapatkan hasil ini:
Internal CSS dituliskan di bagian header file HTML. Fungsinya untuk menentukan tampilan sebuah halaman.
Contohnya, jika Anda ingin agar halaman memiliki latar belakang biru dan teks berukuran 20px yang berwarna putih, kodenya seperti di bawah ini:
<head>
<style>
Body { background-color:blue; }
P { font-size:20px; color:white; }
</style>
</head>
<p>Ini adalah contoh kalimat.</p>
Internal CSS sangat membantu ketika Anda ingin membuat halaman website yang tampilannya berbeda dari halaman lain.
Bagaimana Cara Kerja CSS
CSS bekerja ketika browser memuat halaman website. Untuk menerapkan pengaturan tampilan HTML yang telah ditentukan dengan kode CSS, prosesnya meliputi beberapa langkah.
Mulanya, browser akan memuat file HTML dan CSS (jika kodenya ditulis sebagai external CSS). Kemudian, browser mengubah keduanya menjadi document object model (DOM). Ini adalah komponen yang mewakili file HTML dan CSS dalam memori perangkat pengunjung website.
Setelah HTML dan CSS diubah menjadi DOM, browser akan melakukan rendering, proses di mana browser menerapkan pengaturan di kode CSS pada elemen-elemen HTML. Hasilnya adalah halaman website yang tampil di layar perangkat Anda.
1. Menentukan Format Paragraf
Salah satu contoh CSS adalah untuk mengatur format paragraf. Misalkan ingin agar semua paragraf dalam sebuah halaman website berukuran 120% dan berwarna abu tua, Anda cukup menambahkan kode di bawah ini:
p { font-size: 120%; color: dimgray; }2. Mengubah Warna Link
Anda juga bisa mengubah warna link dengan CSS. Sebagai catatan, warna link yang ditentukan dengan CSS 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
- Active: warna link ketika Anda klik
Untuk menentukan keempat warna itu, gunakan kode di bawah ini dan ketikkan warna yang Anda inginkan setelah color:.
a:link { color: gray; } a:visited { color: green; } a:hover { color: purple; } a:active { color: teal; }3. Menentukan Huruf Kapital/Kecil
Ingin agar sebuah paragraf berisi huruf kecil saja? Anda tinggal mengganti “Paragraf Anda” di kode berikut ini dengan teks yang diinginkan:
<p class="smallcaps">Paragraf Anda.</p>4. Membuat Kotak Teks
CSS juga memungkinkan Anda membuat kotak teks. Umumnya, kotak teks digunakan untuk menonjolkan sebuah informasi penting. Untuk melakukannya, gunakan contoh CSS ini:
p.important { border-style: solid; border-width: 5px; border-color: purple; }
Kode tersebut akan menambahkan kotak dengan border berukuran 5px dan warna ungu di sekitar teks yang Anda tandai dengan class important. Untuk menandai teks dengan class itu, tambahkan kode berikut ini:
<p class="important">Paragraf Anda.</p>5. Membuat Tombol Link
Link akan terlihat lebih mencolok jika diletakkan dalam 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; }Supaya Anda tahu apa saja fungsi dari bagian-bagian kode tersebut, simak penjelasan berikut ini:
- a:link, a:visited, a:hover, a:active memastikan bahwa tombol Anda akan selalu tampil meski sudah diklik atau ditunjuk dengan kursor.
- background-color menentukan warna tombol.
- padding menentukan ukuran tombol.
- text-align menentukan letak teks dalam tombol, misalnya di pinggir atau di tengah.
- text-decoration menentukan ada atau tidaknya garis bawah di teks.
- display: inline-block memungkinkan Anda untuk mengatur tinggi dan lebar tombol.
Sudah Tahu Apa Itu CSS, Kan?
Di artikel ini Anda sudah mengenal pengertian, fungsi, dan jenis jenis CSS. Selain itu, Anda juga sudah menyimak beberapa contoh CSS.
CSS adalah bahasa yang perlu Anda kuasai agar bisa membuat tampilan website yang baik dengan cepat. Anda tinggal menambahkan kode CSS ke dalam file HTML atau membuat file CSS untuk mengatur beberapa halaman sekaligus.
Nah, kalau Anda sudah bisa membuat website dengan HTML dan CSS, tentunya perlu layanan hosting yang dapat diandalkan agar website bisa diakses semua orang.
Layanan web hosting Niagahoster adalah pilihan yang tepat untuk kebutuhan itu. Sebab, layanan hosting ini memiliki uptime 99,99% yang membuat website online 24 jam non stop. Sehingga, pengunjung bisa mengakses website Anda kapan saja.
Selain itu, layanan hosting Niagahoster dilengkapi dengan fitur Imunify360 yang mampu memindai dan menghapus malware dari website Anda. Dengan begitu, keamanan website akan terjamin.
Komentar
Posting Komentar