Tahukah Anda apa CSS itu? Nah bagi Anda yang belum tahu tentang CSS, disini kita akan membahas sedikit tentang apa itu CSS, sejarah CSS, fungsi CSS dan masih banyak lagi hal yang berhubungan dengan CSS.
1. Pengertian dan fungsi CSS
Cascading Style Sheet (CSS) adalah salah satu bahasa pemrograman web yang digunakan untuk mempercantik halaman web dan mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS dapat kita gunakan dalam mengendalikan ukuran gambar, warna teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS bisa juga diartikan sebagai bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.
2. Sejarah CSS
Nama CSS didapat dari fakta bahwa setiap deklarasi style yang berbeda dapat diletakkan secara berurutan, yang kemudian membentuk suatu hubungan layaknya hubungan ayah-anak (parent-child) pada setiap style. CSS sendiri merupakan sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996. Setelah CSS distandarisasikan, Internet Explorer dan Netscape melepas browser terbaru mereka yang telah sesuai atau paling tidak hampir mendekati dengan standar CSS.
3. Kelebihan CSS
Adapun beberapa kelebihan CSS adalah sebagai berikut:
1. Memisahkan desain dengan konten halaman web.
2. Mengatur desain sefisien mungkin.
3. Jika kita ingin mengubah suatu tema halaman web, cukup modifikasi pada css saja.
4. Menghadirkan sesuatu yang tidak dapat dilakukan oleh HTML.
5. Lebih mudah didownload karena lebih ringan ukuran filenya.
6. Satu CSS dapat digunakan banyak halaman web.
B. Struktur Penulisan CSS
Berikut ini adalah struktur penulisan CSS.
Keterangan: Selector digunakan untuk menentukan element mana yang akan diatur stylenya.
1. Jenis-Jenis Selector CSS
CSS memiliki 3 jenis selector basic yaitu class selector, id selector, dan tag selector.
a. Class selector.
Class adalah “agen bebas” yang dapat diterapkan untuk tag HTML apapun. Kita dapat membuat nama class dengan hampir semua nama apapun. Karena class selector dapat diterapkan ke beberapa tag HTML sekaligus, maka class adalah selector yang paling serbaguna. Penulisan class selector dalam cssdisymbolkan dengan tanda titik ( . ).
Contoh:
Penulisan code di dalam dokumen HTML
Penulisan code dalam cssnya
Perlu di tekankan sekali lagi, sebuah selector class dapat digunakan pada lebih dari satu tag HTML. Masukkan style CSS dalam selector class jika terdapat 2 atau lebih elemen/tag HTML yang bisa memiliki style yang sama dalam satu halaman.
b. ID Selector
Hampir sama dengan class, ID dapat diterapkan untuk hampir semua tag HTML, tetapi penggunaanya hanya sekali dalam satu halaman untuk satu tag HTML tertentu.
Contoh:
Penulisan code dalam dokumen HTML
Penulisan code di cssnya
Sekali lagi di tekankan selector ID digunakan hanya untuk 1 elemen pada satu halaman web. Misalnya saja ID #footer diatas hanya digunakan sekali karena dalam satu halaman web hanya ada 1 header.
c. Tag selector
Nama dari element HTML digunakan sebagai selector untuk mendefinisikan tag HTML yang berasosiasi. Misalnya, selector dari h1 adalah h1. HTML selector digunakan dalam CSS rule untuk mendefinisikan bagaimana suatu tag akan ditampilkan.
Contoh:
Penulisan code di dokumen HTML
Penulisan code di cssnya
2. Cara Penggunaan CSS
Ada 3 cara penggunaan css yaitu inline css, embedded css, external css.
a. Inline CSS
Inline css merupakan cara penggunaan css dengan menambahkan langsung di tag dokumen htmlnya sebagai atribut.
Contoh:
b. Embedded CSS
Embedded CSS merupakan cara penggunaan css yang disisipkan di dalam tag style. Tag style tersebut disimpan di antara tag head.
Contoh:
Cara ini menggunakan file Css yang dituliskan secara terpisah dengan dokumen html. Dengan cara ini, anda hanya perlu memiliki satu set kode CSS yang digunakan untuk semua halaman web anda.
Ada dua langkah yang harus dikerjakan untuk menggunakan css dengan cara
ini
1) Anda membuat satu file dengan notepad atau teks editor lain, dan berinama, misalkan: style.css, lalu tuliskan kode-kode css di dalam file tersebut.
