CSS Adalah? Pengertian, Cara Kerja, dan Penggunaannya

Last Updated on April 21, 2022 by

Pada era digital saat ini, setiap pemilik website dan developer web, bukan hanya dituntut untuk bisa membangun website dengan konten yang menarik dan berkualitas tinggi.

Tetapi, harus bisa juga mempresentasikan tampilan websitenya agar terlihat lebih indah dan menarik secara visual yang bisa membuat pengunjung merasa nyaman dan betah berlama-lama berada di dalam website.

Nah, untuk mengembangkan website supaya memiliki tampilan styles yang indah dan menarik serta memiliki user interface yang baik. Salah satu caranya adalah dengan menggunakan teknologi CSS.

Pada artikel ini, kami akan mengangkat tema mengenai CSS (Cascading Style Sheet). Pembahasan utamanya mulai dari memahami pengertian CSS, cara kerja, dan penggunaanya di dalam website.

Untuk lebih jelasnya lagi. Silahkan, simak informasi berikut ini.

Pengertian CSS

Apa itu CSS?

Kepanjangan CSS adalah Cascading Style Sheets. Jika, diterjemahkan secara harfiah adalah Bahasa Lembar Gaya.

CSS merupakan bahasa utama pengembangan web yang digunakan untuk mengatur, mengontrol, mengedit tampilan halaman website supaya mempunyai tampilan styles yang lebih indah dan menarik serta sesuai dengan yang diinginkan. CSS fokus untuk styling dokumen-dokumen yang berbahasa mark up seperti HTML, XML, SVG, dan XUL yang akan ditampilkan di halaman wesite.

CSS paling sering digunakan bersama dengan HTML. Namun, sebenarnya CSS tidak tergantung hanya pada satu bahasa mark up. CSS dapat digunakan juga dengan bahasa mark up yang lainnya.

CSS bukanlah bahasa pemograman dan juga bukan sebuah bahasa mark up, tetapi CSS merupakan bahasa style sheet yang digunakan untuk menampilkan warna teks dan warna background, setting lay out, ukuran font, dan mengatur besar-kecil halaman website agar bisa ditampilkan dengan baik di berbagai jenis perangkat. Baik itu, di perangkat yang menggunakan large screens ataupun small screens.

Cara Kerja CSS (Cascading Style Sheets)

Seperti yang telah kita ketahui, HTML, XHTML, dan JavaScript digunakan untuk mark up halaman web. Sedangkan, untuk memberikan styles pada tampilan halaman web, maka itu adalah tugas dari CSS.

Setiap halaman website, terdapat konten dokumen yang dimuat dengan bahasa mark up. Maka untuk memberikan atau mengubah tampilan styles pada konten file yang menggunakan bahasa mark up, anda bisa menggunakan teknologi CSS.

Sebagai contoh, misalnya paragraf dalam bahasa mark up HTML, mungkin akan terlihat seperti ini:

<p> This a paragraph! </p>

Kemudian, untuk membuat teks pada seluruh elemen paragraf dalam satu halaman HTML menjadi berwarna kuning dan tebal di halaman website. Anda bisa menulis kode CSS seperti ini:

p {color: yellow font-weight: bold;}

Keterangan:

• p (paragraf HTML) adalah selector
• Color dan font-weight adalah property.
• Yellow dan bold adalah value.
• Full Set kurung kurawal {color: yellow; font-weight: bold} adalah declaration.

Rule CSS terdapat dua bagian yang utama, dua rule yang perlu diingat dalam penulisan CSS adalah sebagai berikut:

1. Selector adalah elemen HTML yang akan dipengaruhi oleh style CSS untuk diubah tampilannya. Selector ditulis di sebelah kiri kurung kurawal pertama/depan.
2. Declaration Block dikelililngi oleh kurung kurawal yang di dalamnya memuat satu atau banyak declaration. Setiap declaration terdiri dari value dan property yang dipisahkan dengan tanda koma.

• Property adalah atribut style yang ingin diubah pada content seperti font-size, color, dan margin.
• Value adalah pengaturan untuk memberikan nilai yang diinginkan pada property.

Rule-rule dapat diaplikasikan juga untuk penulisan CSS, seperti mengubah ukuran font, background-color, margin, dan masih banyak yang lainnya. Untuk contoh penulisan CSS yang lainnya, bisa anda lihat seperti ini:

• body {background-color:light green;}, maka akan membuat background halaman website anda menjadi hijau muda.
• p {font-size: 10px; blue color;}, maka membuat seluruh teks dalam paragraf HTML dengan ukuran font 10 point dan tulisan huruf berwarna biru.
• p {color; dark brown}, maka membuat seluruh teks dalam paragraf HTML berwarna coklat tua.
• p {text-align: center; font-size: 16px; color: red;} seluruh teks dalam paragraf HTML diposisikan berada di tengah, dengan ukuran font 16 point dan berwarna merah.

Fungsi CSS dalam Website

Fungsi CSS adalah untuk mengatur atau mengubah styles tampilan dokumen yang menggunakan bahasa mark up yang ada di halaman website. Jenis dokumen bahasa mark up yang digunakan bekerja bersama dengan CSS seperti HTML, XHTML, SVG, dan JavaScript. Tetapi, yang paling sering digunakan bersama CSS adalah HTML, XHTML, dan JavaScript.

Fungsi utama penggunaan CSS adalah dapat memisahkan konten dokumen yang ditulis menggunakan bahasa mark up dari konten dokumen yang ditulis dengan CSS di website.

Berikut adalah lima keuntungan menggunakan CSS dalam website :

Konsisten

Apabila, anda membuat perubahan style sheet CSS yang ingin diterapkan di seluruh halaman website anda. Maka, secara otomatis membuat perubahan style ke seluruh halaman website. Hal ini tentunya dapat menghemat waktu pengerjaannya dan membuat halaman website memiliki style yang konsisten di seluruh bagian halaman website.

Loading Page yang Lebih Cepat

Adanya pengurangan bandwidth, dapat membuat loading page website menjadi lebih cepat. Hal ini karena, CSS bisa memisahkan konten web dari bahasa tampilannya dengan cara mengurangi ukuran transfer file.

Rangking Lebih Tinggi di SEO

Penggunaan CSS dalam sebuah website dapat mendongkrak rangking website lebih tinggi lagi di SEO. Hal ini karena, website memiliki user interface yang baik. Artinya, setiap pengunjung dapat dengan mudah menelusuri setiap bagian halaman web dan bisa cepat menemukan informasi yang mereka cari yang ada di dalam website.

Kompatibilitas Browser

Style sheet CSS bisa meningkatkan kemampuan beradaptasi sebuah website. Artinya, pengunjung dapat mengakses website anda dengan tepat saat menggunakan browser jenis apapun.

Pilihan View

CSS dapat membantu anda agar website bisa ditampilkan dengan baik pada pilihan device yang berbeda-beda.

Penulisan Kode CSS dalam File HTML

Anda dapat menerapkan penulisan kode CSS dalam file HTML dengan 3 cara yang berbeda:

File CSS Eksternal

Menyimpan kode CSS dalam file terpisah dengan kode HTML adalah cara yang terbaik. Dalam dunia pemograman yang sebenarnya, kita harus menyimpan kode HTML, CSS, dan JavaScript dalam file yang terpisah. Kemudian, mengimpornya jika sudah diperlukan.

Anda bisa membuat file eksternal CSS yang ditulis terpisah dengan file khusus dengan ekstensi .css dan memasukkannya ke HTML.

Sebagai contoh, kita dapat membuat file CSS seperti ini: index.css

Di dalam index.css, kita dapat menulis kode CSS :

p {color: red;}

Kemudian kita dapat mengimpor index.css ke HTML dengan tag <link> seperti di bawah ini:

<head>

< link rel= “stylesheet” href = “index.css”>

</head> <body>

<p> I’m a Text </p>

</body>

Selanjutnya, file HTML memiliki kode CSS dan perubahan akan diterapkan ke elemen.

Internal CSS dengan tag <style>

Cara yang lain, Anda dapat menulis kode CSS di dalam tag <style> dalam HTML. Hal ini akan menjaga kode CSS langsung di dalam file HTML, bukan di file yang terpisah.

Dalam file HTML, tag <style> biasanya ditulis di dalam tag <head>. Bisa juga ditulis di dalam <body>.

Pada contoh di bawah, tag style ditulis di <body>

<style> p {color:red;} </style> <body> <p> I’m a text </p> </body>

Inline Style

Cara ketiga adalah menulis rule-rule CSS secara langsung di dalam atribut elemen HTML. Setiap element HTML ditulis atribut style. Dalam metode ini, kami menetapkan rule-rule CSS secara langsung di dalam tag dan cara ini disarankan untuk tidak digunakan.

< p style = “color: blue; font-size: 22px;”> I’m a Text </p>

Kesimpulan

Pada era digital saat ini, semakin banyak website yang menggunakan CSS. Hal itu karena, CSS merupakan salah satu bahasa utama pengembangan web yang wajib digunakan untuk mengatur atau mengubah tampilan halaman web, supaya lebih menarik dan sesuai dengan estetika yang diinginkan.

CSS dirancang untuk dapat bekerja beriringan dengan bahasa-bahasa mark up seperti HTML, XML, JavaScript, dan varian bahasa mark up lainnya. CSS paling sering digunakan bersama dengan HTML. Namun, CSS tidak tergantung hanya pada satu bahasa mark up. CSS bisa digunakan juga bersama dengan XML ataupun bahasa mark up yang lainnya.

Walaupun, CSS bukanlah bahasa pemograman ataupun bahasa markup, tetapi kita tidak bisa memandangnya sebelah mata. Apalagi, anda menggunakan CSS tanpa mempelajari terlebih dahulu secara serius, maka siap-siap anda akan menemukan banyak kesulitan saat mengembangkan website anda nantinya.

Oleh karena itu, mempelajari CSS adalah suatu hal yang sangat penting, sama seperti halnya anda mempelajari bahasa pemograman dan bahasa mark up.

Demikian, pembahasan mengenai artikel kali ini. Semoga informasi yang telah disampaikan dapat bermanfaat. Jika Anda tertarik untuk tahu lebih banyak tentang cara membuat desain web, kunjungi situs WEB APP di https://appkey.id/.