Sei sulla pagina 1di 7

Dalam dunia maya World Wide Web (www), CSS adalah akronim untuk Cascading

Style Sheets. CSS adalah bahasa style sheet yang digunakan untuk menggambarkan

penyajian dokumen yang ditulis dalam bahasa markup, umumnya HTML. CSS

mengatur bagaimana tata letak dan konten halaman web ditampilkan di layar, kertas,

atau di media lain. CSS menyimpan banyak pekerjaan karena dapat mengontrol tata

letak beberapa halaman web sekaligus.

Dokumen biasanya berupa file teks yang disusun dengan menggunakan bahasa

markup seperti HTML. Menyajikan dokumen berarti mengubahnya menjadi bentuk yang

dapat digunakan yang disajikan secara visual di layar komputer melalui browser web

pencarian seperti Chrome, Firefox, Opera, Microsoft Edge, dan lainnya. Browser web

sendiri menerapkan aturan CSS pada dokumen untuk memengaruhi bagaimana

mereka ditampilkan.

CSS dimulai pada tahun 1994 silam ini dibuat dan dikelola oleh W3C. W3C sendiri

adalah kumpulan Working Group (Kelompok Kerja) CSS dari W3C membuat dokumen

yang disebut spesifikasi. Setelah spesifikasi dibahas dan secara resmi diratifikasi oleh

anggota W3C, maka mereka akan merekomendasikannya. Untuk lebih lanjutnya, mari

simak penjelasan mengenai CSS di bawah ini.

Pengertian CSS (Cascading Style Sheet)


CSS adalah singkatan dari Cascading Style Sheets. Ini adalah merupakan bahasa

pengkodean yang memberikan tampilan dan tata letak situs web. Seiring dengan

HTML, CSS adalah dasar untuk desain web. Tanpa itu, situs web akan tetap menjadi

teks biasa dengan latar belakang putih sehingga tentunya tidak menarik dan terkesan

datar atau monoton.


Sebelum pengembangan CSS pada tahun 1996 oleh World Wide Web Consortium

(W3C), halaman web sangat terbatas baik dalam bentuk maupun fungsinya. Browser

awal menyajikan halaman sebagai hypertext -yakni teks biasa, gambar dan tautan ke

halaman hypertext lainnya. Tidak ada tata letak sama sekali untuk ditampilkan, hanya

paragraf yang berjalan melintasi halaman dalam satu kolom.

Fungsi CSS (Cascading Style Sheet)


CSS sebagai inovasi pengembangan website, memungkinkan beberapa inovasi untuk
tata letak halaman web, seperti kemampuan untuk :

 Menentukan font selain default untuk browser


 Menentukan warna dan ukuran teks dan tautan
 Menerapkan warna ke latar belakang
 Mengandung elemen halaman web dalam kotak dan mengapungkan kotak-kotak
itu ke posisi tertentu di halaman
 Kemampuan dalam memasukkan style ke dalam style sheet, yang membuat
untuk pertama kalinya, halaman web bisa dirancang.

Browser komersial pertama yang membaca dan menggunakan CSS adalah Microsoft

Internet Explorer 3 pada tahun 1998. Hingga hari ini, dukungan untuk fungsi CSS

tertentu bervariasi dari browser ke browser. W3C, yang masih mengawasi dan

menciptakan standar Web, baru-baru ini merilis standar baru untuk CSS – CSS3.

Dengan CSS3, pengembang berharap bahwa semua browser utama akan membaca

dan menampilkan setiap fungsi CSS dengan cara yang sama.

Keuntungan Menggunakan CSS


CSS mudah dipelajari dan dipahami tetapi juga mampu memberikan kontrol yang kuat

atas penyajian dokumen HTML. Paling umum, penggunaan sering CSS dikombinasikan
dengan bahasa markup HTML atau XHTML. Berikut apa saja fungsi, kemampuan dan

keuntungan yang didapatkan dari penggunaan CSS.


 CSS menghemat waktu

Anda dapat menulis CSS sekali dan kemudian menggunakan kembali sheet

yang sama di beberapa halaman HTML. Anda dapat menentukan gaya untuk

setiap elemen HTML dan menerapkannya ke halaman Web sebanyak yang

Anda inginkan.
 Memuat halaman lebih cepat

Jika Anda menggunakan CSS, Anda tidak perlu menulis atribut tag HTML setiap

kali. Cukup tulis satu aturan CSS dari sebuah tag dan terapkan pada semua

kemunculan tag itu. Jadi lebih sedikit kode berarti waktu pengunduhan lebih

cepat.
 Perawatan mudah

Untuk membuat perubahan global, cukup ubah gaya, dan semua elemen di

semua halaman web akan diperbarui secara otomatis.


 Gaya unggul ke HTML

CSS memiliki array atribut yang jauh lebih luas daripada HTML, sehingga Anda

dapat memberikan tampilan yang jauh lebih baik ke halaman HTML Anda

dibandingkan dengan atribut HTML.


 Kompatibilitas terhadap beberapa perangkat

Lembar gaya memungkinkan konten dioptimalkan untuk lebih dari satu jenis

perangkat. Dengan menggunakan dokumen HTML yang sama, berbagai versi

situs web dapat disajikan untuk perangkat genggam seperti PDA dan ponsel

atau untuk dicetak.


 Mempunyai standar web global
Sekarang atribut HTML sudah tidak digunakan lagi dan direkomendasikan untuk

menggunakan CSS. Jadi itu ide yang baik untuk mulai menggunakan CSS di

semua halaman HTML untuk membuatnya kompatibel dengan browser masa

depan.

Mengetahui Cara Kerja CSS


Untuk memahami dasar-dasar cara kerja CSS, Anda harus terlebih dahulu memahami
sedikitnya tentang penggunaan HTML modern. Pengembang web membuat halaman

sesuai dengan box model (model kotak). Karena halaman web adalah serangkaian

kumpulan kotak yang masing-masing berisi elemen diskrit. Kotak-kotak ini bersarang, di

dalam satu dengan yang lainya.

Misalnya, tajuk halaman adalah kotak dan berisi beberapa kotak kecil yang terdiri dari

semua elemen yang membentuk tajuk seperti logo, navigasi, tombol media sosial,

tombol keranjang belanja, dan semua yang dibutuhkan. Menggunakan CSS, maka

pengembang dapat memberikan gaya atau sentuhan tersendiri ke kotak header. Dalam

contoh ini, mari asumsikan bahwa pengembang membuat teks di dalam header

berwarna merah, font Arial dan lima belas poin.

Di sinilah bagian cascading dari style sheet cascading ikut bermain. Gaya font yang

diterapkan ke cascade header turun ke semua elemen yang terkandung di dalam

header. Elemen yang mengandung teks seperti navigasi, tautan, atau ajakan bertindak

semuanya akan berubah menjadi berwarna merah, Arial, dan lima belas poin tadi.

CSS menghadirkan gaya ke halaman web Anda dengan berinteraksi dengan elemen

HTML. Elemen adalah komponen HTML individual dari halaman web yang misalnya

paragraf, yang dalam HTML mungkin terlihat seperti ini:


<p>     Ini paragraf saya!  </p>

Jika Anda ingin membuat paragraf ini tampak merah muda dan tebal untuk ditampilkan

kepada orang-orang yang melihat halaman web Anda melalui browser web, Anda akan

menggunakan kode CSS yang terlihat seperti ini:

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

Dalam hal ini, “p” (paragraf) disebut “selector” yang mana itu adalah bagian dari kode

CSS yang menentukan elemen HTML mana yang akan dipengaruhi oleh style CSS.

Dalam CSS, pemilih ditulis di sebelah kiri braket keriting pertama. Informasi antara

kurung keriting disebut deklarasi, dan berisi properti dan nilai yang diterapkan ke

pemilih. Properti adalah hal-hal seperti ukuran font, warna, dan margin, sedangkan nilai

adalah pengaturan untuk properti tersebut. Dalam contoh di atas, “warna” dan “font-

weight” adalah properti, dan “pink” dan “tebal” adalah nilai. Set bracketed penuh untuk

{color: pink; font-weight: bold; }

adalah deklarasi, dan sekali lagi, “p” (artinya paragraf HTML) adalah pemilih. Prinsip-

prinsip dasar yang sama ini dapat diterapkan untuk mengubah ukuran font, warna latar

belakang, lekukan margin, dan banyak lagi. Misalnya. . .

body {background-color: lightblue; }

. . .akan membuat latar belakang halaman Anda biru muda, atau. . .

p {font-size: 20px; warna merah; }

. . .akan membuat paragraf font 20 poin dengan huruf merah.


Cara Aplikasi CSS
Ada empat cara untuk menerapkan gaya ke dokumen HTML. Metode yang paling

umum digunakan adalah file CSS eksternal yang tertanam dalam elemen <style>  di

dalam dokumen HTML. Jika lembar style yang berbeda telah ditentukan, maka style

akan mengalir ke style baru dengan prioritas engikuti cara berikut :


 Penerapan sebaris dengan elemen HTML

Kita bisa menggunakan atribut style dari elemen HTML apa saja untuk

mendefinisikan aturan style. Aturan-aturan ini akan diterapkan pada elemen itu

saja. Seperti <p style = property : value ; “Hello World!”  </p>


 Embedded dokumen HTML

Anda bisa menempatkan aturan CSS kita ke dalam dokumen HTML

menggunakan elemen < style >  untuk memuat aturan.  Tag <style > ….. </style

> ditempatkan dalam tag  <head> … </head >


 File external sheet style

Elemen dapat digunakan untuk menyertakan file stylesheet eksternal dalam

dokumen HTML Anda. Lembar gaya eksternal adalah file teks terpisah dengan

ekstensi “.css”. Didefinisikan sebagai semua aturan gaya dalam file teks ini dan

kemudian akan dimasukkan file ini dalam dokumen HTML apa pun di dalam tag

<head>…  </head >  menggunakan elemen <link >


 Default browser

Peramban menyertakan beberapa gaya yang telah ditulis sebelumnya untuk

kami. Terkadang Anda tidak menginginkan style yang dimuat seperti ini,

sehingga Anda dapat menimpanya. Namun ada juga beberapa browser yang

tidak mendukung spesifikasi CSS modern atau memiliki bentuk sendiri

menggunakan properti CSS. Karena itu, Anda harus berhati-hati saat menulis

CSS dalam dokumen HTML.


Baca Juga :   Panduan Lengkap Penggunaan .htaccess Pemula

Kesimpulan dan penutup


CSS dibuat dan dikelola melalui sekelompok orang dalam W3C yang disebut Working

Group CSS. Kelompok CSS ini yang membuat dokumen yang disebut spesifikasi yang

akan diratifikasi. Spesifikasi yang diratifikasi ini disebut rekomendasi karena W3C tidak

memiliki kendali atas implementasi bahasa yang sebenarnya. Perusahaan dan


organisasi independen yang membuat perangkat lunak itu.

Cascading Style Sheets level 1 (CSS1) berhasil keluar dari W3C sebagai rekomendasi

mereka pada Desember 1996 silam. Versi ini menjelaskan bahasa CSS serta model

pemformatan visual sederhana untuk semua tag HTML. CSS2 menjadi rekomendasi

W3C pada Mei 1998 dan dibangun berdasarkan CSS1. Versi ini menambahkan

dukungan untuk style sheet khusus media, misalnya printer dan perangkat aural, font

yang dapat diunduh, penentuan posisi elemen dan tabel.

Secara umum, CSS dan HTML memang tidak dapat dipisahkan penggunaannya. Jadi

jika HTML adalah fondasi, bingkai, dinding, dan balok penopang yang mendukung situs

web Anda, pertimbangkan CSS sebagai warna cat, gaya jendela, dan lansekap yang

muncul setelahnya. Anda tidak dapat membangun tanpa meletakkan sebuah fondasi

lebih dahulu. Karena jika Anda sudah mempunyai fondasi, CSS adalah alat yang paling

bagus dalam mendekorasi web Anda semenarik mungkin sesuai dengan yang Anda

inginkan.

Potrebbero piacerti anche