Definisi CSS (Cascading Style Sheet) dan Panduan Lengkap Cara Penggunaannya!

10

1. Apa yang dimaksud CSS ?

CSS adalah singakatan dari Cascading Style Sheet. CSS berfungsi untuk memberikan style atau corak tampilan pada suatu elemen atau struktur page website yang dibuat HTML.

Contohnya seperti memberi warna pada huruf, menebal / memeringkan huruf, dan masih banyak lagi. Tampilan website yang hanya menggunakan HTML akan terlihat membosankan, maka dari itu diciptakannya CSS.

CSS adalah sebuah teknologi internet yang kembangkan oleh World Wide Web Consortium (W3C) pada tahun 1996. Selain HTML, CSS juga kompatibel Bahasa markup lain seperti XHTML, XML, SVG, dan XUL.

Baca Juga Artikel HTML Lengkap! : Mengenal Definisi HyperText Markup Language (HTML)

Sebelum mulai menggunakan CSS, saya saran kan agar kamu mempelajari terlebih dahulu HTML! Karena untuk menerapkan CSS, kamu perlu tau terlebih dahulu elemen-elemen dan tags yang ada pada HTML, sehingga dapat menyisipkan style CSS pada setiap elemen dan tag tersebut.

Sekarang penggunaan CSS telah semakin meluas dan terus dikembangkan. Hal ini juga akan mempermudah seorang web designer dalam mengembangkan suatu halaman web (situs).

Ada 3 cara untuk memasang Script CSS pada dokumen HTML yaitu:

  • External Style Sheet (file CSS berbeda dari file HTML),
  • Internal Style Sheet (Kode CSS dipasang di dalam tag <head> HTML),
  • Inline Style Sheet (Kode CSS langsung dipasang di tag HTML)

Tempat Kursus Komputer Terbaik | Digital Marketing, Programming, SEO, Dll.

2. Sejarah Perkembangan CSS

CSS 1

Pada tanggal 17 Agustus 1996 World Wide Web Consortium (W3C) menetapkan CSS sebagai bahasa pemrograman standard dalam pembuatan web. Tujuannya adalah untuk mengurangi pembuatan tag-tag baru oleh Netscape dan Internet Explorer, karena kedua browser tersebut sedang bersaing mengembangkan tag sendiri untuk mengatur tampilan web.

CSS 1 Mensupport :

  • Jenis Font
  • Warna Text, Background, dan Elemen lainnya
  • Text attribute seperti spasi antar huruf, surat, dan baris text
  • Alignment text atau gambar seperti rata kiri, kanan, dan tengah
  • Margin, Border, Padding, dan Positioning untuk kebanyakan elemen
  • Mengidentifikasi & menklarifikasi secara generik dan unik sebuah group attribute

CSS 2

Spesifikasi CSS 2 dipublish dan dikembangkan oleh W3C pada Mei 1998. Merupakan Upgrade dari CSS 1, CSS 2 memiliki fitur baru seperti Positioning suatu Elemen atau Z-Index secara absolut, relatif, dan tepat. CSS 2 menekankan pada fitur Accessibility and Capacibilty kususnya pada media-specific CSS. CSS 2 dikembangkan untuk memenuhi kebutuhan terhadap format dokumen agar bisa ditampilkan di printer.

CSS 3

CSS 3 adalah versi terbaru dari CSS yang memiliki banyak kelebihan untuk mendesain website agar terlihat unik dan menarik. CSS 3 mampu menyisipkan animasi, seperti animasi gambar dan animasi 3D. Desain yang ada pada CSS 3 bersifat responsive, jadi sangat kompatibel dengan desktop maupun smartphone. Selain itu, fitur terbaru yang dimiliki CSS 3 adalah Animation, Multiple-Background, Drop-shadow, CSS Object-model, CSS Math, dan masih banyak lagi.

Baca Juga : Ini Dia Golang, Salah Satu Bahasa Pemograman Yang Digunakan Tokopedia

3. Cara Menggunakan CSS

Ada 3 cara menggunakan CSS yaitu :

  1. External CSS
  2. Internal CSS
  3. Inline CSS

External CSS

Dengan External Style Sheet kamu bisa mengganti desain keseluruhan website kamu hanya dengan 1 file

Pada File HTML kamu harus disisipkan Link yang menuju ke file CSS yang diinginkan. Contoh :

Internal CSS

Internal Style CSS disipkan diantara elemen<style>, didalam section <head> dari page HTML kamu.

Inline CSS

Inline CSS berarti menyisipkan CSS hanya pada elemen tertentu. Untuk menggunakan Inline CSS, tambahkan atribut style pada baris script code elemen yang diinginkan.

Dari ketiga cara diatas sebenarnya hampir sama, hanya saja pada external CSS kamu perlu membuat file css terpisah, dan memanggil file tersebut pada bagian <head> HTML kamu.

4. Fungsi CSS

CSS berfungsi sebagai media untuk merepresentasikan suatu tampilan (huruf, gambar, dan yang lainnya) pada halaman website. Kode yang ada pada CSS bertujuan untuk memperindah tampilan dan memperbaiki user-interface website.

Berikut ini adalah contohnya!

Gambar diatas merupakan contoh HTML tanpa Script Code CSS, namun bagaimana jika disisipkan code tersebut.

Bagaimana ? Terlihat jelas perbedaannya. Jika kamu membuat HTML tanpa CSS, maka tampilannya akan terlihat membosankan. Namun dengan menyisipkan script code CSS, maka akan memberikan sedikit warna pada website kamu.

Cara untuk menyisipkan CSS pada HTML adalah pertama-tama kamu harus membuat file css terlebih dahulu (.css) dan menyisipkan script code “<Link rel=”Stylesheet” type=”text/css” href=”mystyle.css>” pada bagian <head> HTML. Pada contoh diatas, saya menamai file CSS saya mystyle.css

Dibawah ini adalah isi dari file mystyle.css

  • Background-color – mengindikasikan warna background. Pada contoh saya menggunakan warna lightblue
  • H1 Color: navy & margin-left: 20px – mengartikan bahwa pada judul HTML saya menggunakan warna navy dengan margin rata kiri dan ukuran font 20px.

Untuk membuat script CSS kamu bisa menggunakan text editor seperti Notepad++ atau sublime text. Jangan lupa untuk mengsave filenya agar bisa dipanggil pada Script kode HTML kamu.

5. Kelebihan & Kekurangan CSS

Sama halnya dengan bahasa pemrograman lain, Css juga memiliki kelebihan dan kekurangannya tersendiri. Berikut ini adalah kelebihan dan kekurangan dari CSS

Kelebihan

  1. CSS sangat mudah dipelajari bahkan untuk pemula sekalipun
  2. CSS memisahkan antara Desain dan konten yang ada pada blog / website
  3. Pengaturan desain bisa anda tentukan sendiri dengan bebas
  4. Multi function – 1 file CSS bisa anda gunakan beberapa kali, jadi anda tidak perlu repot-repot membuat banyak file CSS.
  5. Menghemat waktu kamu ketika membuat maupun mengedit halaman web
  6. Size memory yang kecil. Karena file css terpisah, membuat ukuran file HTML anda relatif lebih kecil

Kekurangan

  1. Karena tidak semua browser sama dalam mengartikan CSS, terkadang prosesnya memakan waktu
  2. Adanya kemungkinan tampilan yang berbeda antara satu browser, dengan browser yang lainnya

Baca Juga Artikel Menarik Lainnya :

Sumber : w3schools

*Artikel ini pernah tayang di website Babastudio.com

Share.

About Author

Babastudio

Berdiri sejak tahun 2003 telah memiliki lebih dari 15.000 peserta kursus dan telah berpengalaman dan dipercaya dalam menangani ratusan klien korporat dan pemerintahan. Pengalaman keberhasilan dalam dunia online adalah yang paling utama kami berikan kepada peserta didik dan itu sangat tidak ternilai harganya.