Mengenal lebih dekat dengan CSS, Bahasa Penghias Website

Keyword : apa itu css, apa itu css dan fungsinya, apa itu css dan html

EJourneys - Belajar CSS

EJourneys - Apa itu CSS? Sebelumnya apakah kalian sudah pernah mendengar istilah CSS? Atau mungkin Bahasa CSS? Mungkin sudah Yaa.. Tapi kalian belum tentu tau apa itu CSS kan? Yap kali ini kalian menemukan bacaan yang tepat yaitu mengenai Pengertian CSS, Fungsi dan Contohnya.

CSS merupakan bahasa Cascading Style Sheet & umumnya dipakai buat mengatur tampilan elemen yg tertulis pada bahasa markup, misalnya HTML. CSS berfungsi buat memisahkan konten menurut tampilan visualnya pada situs.

Awalnya CSS dibentuk & dikembangkan oleh W3C (World Wide Web Consortium) dalam tahun 1996 buat alasan yg sederhana. Dulu HTML ini tidak dilengkapi menggunakan tags yg berfungsi buat memformat halaman. Kalian hanya perlu menulis markup buat situs. Tags, misalnya , diperkenalkan pada HTML versi 3.2, & saat itu mengakibatkan poly perkara bagi developer.

Lantaran website mempunyai banyak sekali font, rona background, & style, maka buat menulis kembali (rewrite) kode memerlukan proses yg sangat panjang & sulit. Oleh karena itu, W3C menciptakan CSS buat merampungkan perkara ini.
HTML & CSS mempunyai keterikatan yg erat. Lantaran HTML merupakan bahasa markup (fondasi situs) & CSS memperbaiki style (buat seluruh aspek yg terkait menggunakan tampilan website), maka ke 2 bahasa pemrograman ini wajib berjalan beriringan.

Tak hanya krusial pada sisi teknis, CSS pula berpengaruh dalam tampilan sebuah website. Tentunya Anda nir ingin website terlihat misalnya situs yg ‘telanjang’ tanpa modifikasi apa pun, bukan?

Kelebihan CSS 

Keyword : Kelebihan CSS, Keunggulan bahasa CSS, Kelebihan CSS Style

Praktis bagi Kalian buat mengetahui mana website yg memakai CSS & mana yg tidak memakai CSS.

Kalian niscaya pernah membuka website, akan tetapi sesaat lalu gagal loading & malah menampilkan background putih yg didominasi teks hitam & biru. Situasi ini mendeskripsikan bahwa CSS dalam situs tadi nir bisa pada-load menggunakan sahih atau situs sama sekali nir mempunyai CSS. Umumnya, situs misalnya ini hanya menerapkan HTML.

Sebelum memakai CSS, seluruh stylizing wajib disertakan ke pada markup HTML. Itu berati Kalian wajib menggambarkan seluruh background, rona font, alignment, & lain-lain secara terpisah.
Dengan CSS, Kalian bisa mengatur tampilan seluruh aspek dalam arsip yg berbeda, kemudian memilih style, lalu mengintegrasikan arsip CSS pada atas markup HTML. Alhasil, markup HTML mampu lebih gampang pada-maintain.

Singkatnya, menggunakan CSS, Kalian nir perlu menggambarkan tampilan berdasarkan masing-masing elemen secara berulang-ulang. Kalian tidak membuang-buang waktu, kode yg dipakai pun lebih singkat, & error bisa diminimalisir.
Lantaran opsi kustomisasi yg terdapat hampir tidak terbatas, CSS memungkinkan Kalian buat menerapkan banyak sekali macam style dalam satu page HTML.

Cara Kerja CSS dan Contoh Penerapannya

Keyword : Cara kerja CSS, Penerapan CSS, Penggunaan CSS, Contoh CSS

CSS memakai bahasa Inggris sederhana berbasis syntax yg dilengkapi menggunakan sekumpulan rule yg mengaturnya. Seperti yg sudah kami sebutkan sebelumnya, HTML tak bisa dibentuk buat menerapkan elemen style, hanya markup page saja. HTML didesain semata-mata buat menggambarkan konten. Seperti contoh berikut :

<P>This is a paragraph.<p>

Satu yg sebagai pertanyaannya sekarang, bagaimana caranya style paragraf? Struktur syntax CSS relatif sederhana. Struktur ini mempunyai selector & declaration block. Pilih elemen yg diinginkan, lalu deklarasi (declare) yg wajib Anda lakukan terhadap elemen tersebut. Sangat mudah, kan?

Ada banyak sekali rule yg wajib diingat. Meskipun demikian, rule struktur relatif praktis & sederhana. Selector menunjuk ke elemen HTML yg ingin Anda ubah tampilannya. Declaration block memuat satu atau lebih poly deklarasi (declaration) yg dipisahkan menggunakan perindikasi titik koma. Setiap deklarasi menyertakan nama & value menurut properti CSS, yg dipisahkan menggunakan perindikasi koma. 

Umumnya deklarasi CSS diakhiri menggunakan perindikasi titik koma, sedangkan declaration block dilingkupi sang perindikasi kurung kurawal.

Mari kita lihat model pada bawah ini:

Semua elemen <p> ditandai menggunakan rona biru & hurufnya ditebalkan (bold).

Contoh Penggunaannya : 

<style>
p {
 color: blue;
 text-weight: bold;
}
<style>

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

<style>
p {
   text-align: center;
   font-size: 16px;
   color: pink;
}
</style>

Sekarang kita akan membahas beberapa style CSS, yakni Inline, External, dan Internal.

CSS Style Internal, External, dan Inline

Keyword : css style internal, external, dan inline, css internal dan eksternal, css internal adalah, external css adalah

Kami akan membahas setiap gaya CSS secara singkat. Untuk wawasan atau diskusi lebih lanjut, kami menyertakan tautan di bawah pratinjau.

Gaya CSS Internal dimuat setiap kali situs di-refresh dan sisi negatifnya adalah perlu waktu lebih lama untuk memuat. Gaya CSS yang sama tidak dapat digunakan di halaman lain karena sudah berfungsi di satu halaman.

Namun dibalik kekurangannya, internal CSS styling memiliki beberapa kelebihan. Salah satunya adalah kemudahan berbagi template untuk pratinjau karena CSS hanya ada di satu halaman.

CSS Eksternal adalah gaya CSS yang paling sederhana dan sederhana. Semuanya dilakukan secara eksternal dalam file .css. Penataan gaya dilakukan dalam file terpisah, lalu CSS diterapkan ke halaman pilihan Anda. Sayangnya, CSS Style External juga membutuhkan waktu lama untuk dimuat.

CSS Style Inline menggunakan elemen khusus yang berisi tag <style>. Karena setiap elemen perlu ditata atau di-stylize, maka inline bukanlah pendekatan yang tepat jika Anda ingin menggunakan CSS dengan cepat. Tapi di sisi lain menguntungkan. Misalnya, jika Anda ingin mengedit elemen atau menampilkan pratinjau singkat, atau jika Anda tidak memiliki akses ke file CSS.

Untuk mempelajari lebih lanjut, silakan baca artikel kami tentang perbedaan antara CSS internal, eksternal, dan inline.

#ApaituCSS? #CSSAdalah