Apa yang dimaksud dengan Cascading Style Sheets (CSS) ?

Komputer Teknologi Informasi
1

Cascading Style Sheet
image.jpg700×250 144 KB

Cascading Style Sheet (CSS) adalah aturan untuk mengatur beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman.

Apa yang dimaksud dengan Cascading Style Sheets (CSS) ?

2

Cascading Style Sheets atau yg disebut juga dengan CSS adalah gaya bahasa dan kontrol tata letak pada dokumen HTML. Contohnya yaitu CSS meliputi font, warna, margin, garis, tinggi, lebar, gambar latar belakang, dan yang lainnya. Bedanya dengan HTML yaitu, CSS dapat menawarkan lebih banyak pilihan yang lebih akurat dan lebih canggih daripada HTML.

Sejarah CSS

CSS pertama kali bermula sejak munculnya SGML pada tahun 1970an. Sejak kemunculannya tersebut, CSS mengalami perkembangan yang sangat pesat. Format dasar CSS yang banyak kita gunakan sekarang ini merupakan ide dari seoang programmer bernama Hakon Wium Lie yang tertuang dalam proposalnya mengenai Cascading HTML Style Sheet (CHSS) pada bulan Oktober 1994 (dalam konferensi W3C di Chicago, Illinois). Kemudian, beliau bersama-sama dengan seorang temannya yang bernama Bert Bos mengembangkan suatu standard CSS.

Manfaat CSS

  1. Pemisahan dari konten dan tampilan pada web
    Aturan CSS dapat dimuat dalam file yang terpisah untuk (isi) HTML. Jika semua link pages dapat terhubung dengan CSS file yang utama, maka itu semua akan mudah diubah hanya dalam satu tahapan saja. Misalnya, warna atau ukuran pada semua sub judul dapat diubah dengan memperbarui aturan CSS utama.

  2. Ukuran file halaman web yang lebih kecil
    Kode yang dibutuhkan untuk style content dapat dihapus dari satu webpage, jadi ukuran setiap file halaman web akan berkurang secara berkala. Namun itu semua masih bergantung pada benchmark, ukuran file dapat dikurangi hingga 60%.

  3. Peningkatan kecepatan download pada webpage
    Setelah stylesheet telah didownload, stylesheet tersebut biasanya disimpan di komputer pengguna (cache). Lalu selanjutnya setiap halaman web berikutnya hanya HTML saja yang perlu di-download.

  4. Peningkatan kecepatan rendering
    Setelah halaman web telah di-download, browser akan memproses kode yang mendasari sebuah webpage untuk menentukan bagaimana isi harus ditampilkan. Proses ini disebut sebagai ‘rendering’. Waktu yang dibutuhkan untuk membuat webpage dipengaruhi oleh kompleksitas dari kode browser yang menerima. Dengan menggunakan CSS untuk mengontrol tata letak halaman biasanya dengan menyederhanakan struktur kode sehingga lebih mudah dan tentu saja lebih cepat untuk browser untuk ‘rendering’.

  5. Perawatan yang sederhana
    Karena di setiap webpage ada pasti ada kode yang kurang diperlukan, seperti kesalahan coding dan waktu yang dibutuhkan untuk menambahkan konten ke situs web akan berkurang.

  6. Mengubah tampilan untuk berbagai perangkat
    Spesifikasi CSS memungkinkan aturan yang berbeda untuk digunakan tergantung pada perangkat yang digunakan untuk mengakses web. Misalnya, satu set peraturan yang berbeda dapat digunakan untuk memformat halaman web untuk pc atau ponsel.

  7. Aksesibilitas
    Fitur tambahan dapat ditambahkan ke halaman web yang menyediakan penghubung untuk teknologi pendukung seperti screen reader. (Screen reader adalah program yang membaca interface untuk program komputer dan konten berbasis komputer, termasuk laman web). Teknik berbasis CSS dapat digunakan untuk menyediakan penghubung tersebut tanpa berdampak pada users pada umumnya. Misalnya judul tambahan dapat ditambahkan ke konten yang hanya akan terlihat oleh screen reader.

Kekurangan CSS

  1. CSS sangat menyita waktu karena tidak semua browser mengartikan sintaks-sintaks CSS yang sama
  2. Kadang desain sudah terlihat rapih di suatu browser namun ketika dicoba di browser lain malah jadi acak-acakan
  3. Kekurangan tersebut dapat diatasi dengan script-script khusus(CSS Hack)

Versi

  1. CSS 1
    Yaitu mekanisme style sheet sederhana yang memungkinkan penulis untuk melampirkan style misalnya font, warna dan spasi ke dalam dokumen HTML. Bahasa CSS1 adalah bahasa yang mudah dibaca atau ditulis manusia.

  2. CSS 2
    CSS2 adalah bahasa style sheet yang memungkinkan pengguna untuk melampirkan style misalnya, font, spasi, dan fitur lain ke dokumen terstruktur (misalnya, dokumen HTML dan aplikasi XML). Dengan memisahkan style pada tampilan dokumen dan isi dokumen, CSS2 dapat menyederhanakan web dan pengendalian yg mudah.
    CSS2 dibuat setelah CSS1 dan dengan beberapa pengecualian semua style sheet CSS1 berlaku pada style sheet CSS2. CSS2 mendukung style sheet media tertentu sehingga penulis dapat menyesuaikan tampilan dokumen mereka untuk browser visual, perangkat aural, printer, perangkat braille, perangkat genggam, dll. Spesifikasi ini juga mendukung posisi konten, download font, table layout, fitur untuk internasionalisasi , counter otomatis dan penomoran, dan beberapa properti yang berkaitan dengan antarmuka pengguna.

  3. CSS 3
    CSS3 adalah versi terbaru untuk CSS. CSS3 adalah versi yang paling unggul dari versi sebelumnya. CSS3 dibagi menjadi beberapa modul. Modul ini berisi “spesifikasi CSS lama” (yang telah terpecah menjadi potongan-potongan yang lebih kecil). Namun, spesifikasi baru juga ditambahkan dalam modul tersebut. Dan sebagian besar spesifikasi CSS3 baru telah diimplementasikan pada browser modern.

    Berikut adalah modul yang paling penting dari CSS3 :

    • Selectors
    • Box Model
    • Backgrounds and Borders
    • Image Values and Replaced Content
    • Text Effects
    • 2D/3D Transformations
    • Animations
    • Multiple Column Layout
    • User Interface

CSS Rules

Aturan pada CSS terdiri dari selector dan property:value pair (declaration). Biasanya aturan ini disebut dengan “styles”. Berikut adalah aturan - aturannya

  1. Selector
    Bagaimana caranya agar content dipilih melalui styling, contohnya yaitu jika selector untuk elemen judul sub tingkat 1 adalah h1; maka selectors tersebut juga termasuk dari nama, id, dan kelas

  2. Property
    Bagaimana cara presentation attribute dari beberapa element bisa dibuat
    Contoh, font-family (property) yang mengacu pada typeface content harus ditetapkan terlebih dahulu

  3. Value
    Nilai yang diijinkan untuk setiap property. Contoh, warna bisa diubah dengan keyword seperti berikut : red, green, blue; atau hexadecimal code: #f00, #0f0, #00f.

    Contoh :

    Output :

Cara penulisan CSS

  • Syntax dasar dari CSS

  • Mengaplikasikan CSS ke dalam dokumen HTML
    Ada tiga cara yang bisa diterapkan CSS ke dokumen HTML. Disarankan untuk fokus pada metode ketiga yaitu eksternal.

    - Metode 1: In-line (the attribute style)
    Salah satu cara untuk menerapkan CSS ke HTML adalah dengan menggunakan gaya atribut HTML. Untuk mendapatkan warna latar belakang merah, dapat menggunakan syntax seperti ini:

    - Metode 2: Internal (the tag style)
    Cara lainnya adalah dengan memasukkan kode CSS menggunakan tag HTML . Contoh:

    - Metode 3: Eksternal (link to a style sheet)
    Metode ini disarankan karena ini merupakan link yang disebut dengan style sheet eksternal.
    Style sheet eksternal hanyalah sebuah file teks dengan format (.css). Seperti file yang lainnya, anda
    dapat menempatkan style sheet pada server web atau hard disk.
    Sebagai contoh, mari kita buat, style sheet anda bernama (style.css) dan berada pada folder bernama “style”
    Caranya adalah dengan membuat link dari dokumen HTML (default.htm) ke style sheet (style.css). Link tersebut dapat dibuat dengan satu baris kode HTML:

    Perhatikan bagaimana jalan untuk style sheet kita adalah dengan menggunakan href atrribute. Baris kode harus dimasukkan di bagian header dari kode HTML, yaitu antara dan </ head> tag. Seperti ini:

    Link ini memberitahu browser bahwa dia harus menggunakan tata letak dari file CSS ketika menampilkan file HTML.

Teknik yang benar – benar cerdas dari syntax tersebut adalah bahwa beberapa dokumen HTML dapat dihubungkan dengan style sheet yang sama. Dengan kata lain, satu file CSS dapat digunakan untuk mengontrol tata letak banyak dokumen HTML. Teknik ini dapat menghemat banyak pekerjaan. Jika misalnya anda ingin mengubah warna latar belakang dari sebuah website dengan 100 halaman, sebuah style sheet dapat mengubah secara cepat 100 dokumen HTML tersebut, dan anda tidak perlu mengubahnya secara manual. Menggunakan CSS, perubahan dapat dibuat dalam beberapa detik hanya dengan mengubah satu kode pada central style sheet.

Contoh berkas CSS

Referensi