PENGERTIAN CSS BESERTA CARA KERJANYA

 

Apa itu CSS dan bagaimana cara kerja CSS

CSS yaitu Cascading style sheets salah satu dari bahasa pemrograman yang juga sudah saya bahas di artikel sebelumnya,namun ini untuk lebih rinci nya lagi.

Cascading Style Sheets atau lebih dikenal dengan nama CSS adalah sebuah bahasa programming yang dibuat dengan tujuan untuk menyederhanakan proses pembuatan halaman web. CSS mengontrol aspek desain yang berbeda dari HTML. Dengan CSS, Anda bisa mengatur warna tulisan, jenis font yang digunakan, jarak spasi antar paragraph, berapa ukuran kolom yang Anda butuhkan, background dan warna apa yang ingin Anda gunakan, layout desain web Anda, bagaimana website Anda akan terlihat di berbagai device dan ukuran layar, dan masih banyak lagi. Dalam pengerjaannya, CSS biasa digabungkan dengan markup language seperti HTML atau XHTML.

CSS dibuat dan dikembangkan oleh W3C (World Wide Web Consortium) pada tahun 1996 untuk alasan yang sederhana. Dulu HTML tidak dilengkapi dengan tags yang berfungsi untuk memformat halaman. Anda hanya perlu menulis markup untuk situs.

Tags, seperti <font>, diperkenalkan di HTML versi 3.2, dan ketika itu menyebabkan banyak masalah bagi developer. Karena website memiliki berbagai font, warna background, dan style, maka untuk menulis kembali (rewrite) kode memerlukan proses yang sangat panjang dan sulit. Oleh sebab itu, W3C membuat CSS untuk menyelesaikan masalah ini.

HTML dan CSS memiliki keterikatan yang erat. Karena HTML adalah bahasa markup (fondasi situs) dan CSS memperbaiki style (untuk semua aspek yang terkait dengan tampilan website), maka kedua bahasa pemrograman ini harus berjalan beriringan.

Tak hanya penting di sisi teknis, CSS juga berpengaruh pada tampilan sebuah website. Tentunya Anda tidak ingin website terlihat seperti situs yang ‘telanjang’ tanpa modifikasi apa pun iya bukan?

Kelebihan CSS

Mudah bagi Anda untuk mengetahui mana website yang menggunakan CSS dan mana yang tidak.

Anda pasti pernah membuka website, tapi sesaat kemudian gagal loading dan malah menampilkan background putih yang didominasi teks hitam dan biru. Situasi ini menggambarkan bahwa CSS pada situs tersebut tidak dapat di-load dengan benar atau situs sama sekali tidak memiliki CSS. Umumnya, situs seperti ini hanya menerapkan HTML.

Sebelum menggunakan CSS, semua stylizing harus disertakan ke dalam markup HTML. Itu berati Anda harus mendeskripsikan semua background, warna font, alignment, dan lain-lain secara terpisah.

Dengan CSS, Anda dapat mengatur tampilan semua aspek pada file yang berbeda, lalu menentukan style, kemudian mengintegrasikan file CSS di atas markup HTML. Alhasil, markup HTML bisa lebih mudah di-maintain.

Singkatnya, dengan CSS, Anda tidak perlu mendeskripsikan tampilan dari masing-masing elemen secara berulang-ulang. Anda tidak membuang-buang waktu, kode yang digunakan pun lebih singkat, dan error dapat diminimalisir.

Karena opsi kustomisasi yang ada hampir tak terbatas, CSS memungkinkan Anda untuk menerapkan berbagai macam style pada satu halaman HTML.

Cara kerja CSS

CSS menggunakan bahasa Inggris sederhana berbasis syntax yang dilengkapi dengan sekumpulan rule yang mengaturnya. Seperti yang telah kami sebutkan sebelumnya, HTML tidak dibuat untuk menerapkan elemen style, hanya markup halaman saja. HTML dirancang semata-mata untuk mendeskripsikan konten. Sebagai contoh: <p>This is a paragraph.</p>.

Satu yang menjadi pertanyaannya sekarang, bagaimana caranya style paragraf? Struktur syntax CSS cukup sederhana. Struktur ini memiliki selector dan declaration block. Pilih elemen yang diinginkan, kemudian deklarasi (declare) yang harus Anda lakukan terhadap elemen tersebut. Sangat mudah, kan?

Ada berbagai rule yang harus diingat. Meskipun demikian, rule struktur cukup simpel dan sederhana.

Selector mengarah ke elemen HTML yang ingin Anda ubah tampilannya. Declaration block memuat satu atau lebih banyak deklarasi (declaration) yang dipisahkan dengan tanda titik koma.

Setiap deklarasi menyertakan nama dan value dari properti CSS, yang dipisahkan dengan tanda koma. Umumnya deklarasi CSS diakhiri dengan tanda titik koma, sedangkan declaration block dikelilingi oleh tanda kurung kurawal.

Mari kita lihat contoh di bawah ini:

1. <style>
2. p {
3. color: blue;
4. text-weight: bold;
5. }
6. <style>

Semua elemen <p> ditandai dengan warna biru dan hurufnya ditebalkan (bold)

Contoh lain, semua elemen <p> diposisikan di tengah (center-aligned), dengan lebar 16x, dan berwarna pink.

1. <style>
2. p {
3. text-align: center;
4. font-size: 16px;
5. color: pink;
7. }
8. </style>

Lihat CSS cheat sheet untuk contoh yang lain.

Mari kita bahas beberapa style CSS, yakni Inline, External, dan Internal.

oke sekian dulu ditunggu next nya gan.

copas by : hostinger