Skip to main content

HTML dan CSS - Pengertian, Sejarah, Fungsi, dan Jenis CSS

CSS merupakan kepanjangaan dari Cascading Style Sheets dimana css adalah salah satu bahasa pemprogaman yang digunakan oleh seorang programer untuk membuat sebuah website. CSS digunakan oleh programer untuk mendesain halaman depan atau tampilan dari suatu website agar lebih memiliki variasi


Mengapa harus CSS?

Karena di CSS ada banyak hal yang dapat kita lakukan dibandingkan dengan bahasa pemrograman inti lainnya seperti HTML dan PHP. Ketika kita menggunakan CSS, kita dapat mengatur warna teks, jenis font, baris antar paragraf, ukuran kolom, dan jenis background yang dipakai sesuai kemauna diri kita sendiri.

Tidak hanya itu, di CSS kita juga bisa untuk mendesain sebuah layout, variasi tampilan di berbagai perangkat yang berbeda (respondsive), dan masih banyak yang lainnya. Makannya tidak heran jika psada saat ini CSS hampir dipakai di berbagai website untuk dikombinasikan dengan HTML maupun PHP.

Apa itu CSS ?

CSS sendiri merupakan singkatan dari Cascading Style Sheets yang merupakan sebuah bahasa pemprogaman yang digunakan untuk mempercantik tampilan dari sebuah webbsite. 

Dengan menggunakan CSS kita dapat mengatur layout, background, teks, paragraf, dan masih banyak lagi yang lainnya. dengan menggunakan CSS kita sebagai developer juga merasa mudah dan terbantu dalam membuat sebuah website.


Sejarah Singkat CSS

Terciptanya CSS diawali dari ide besar dari Hakon Wium Lie yang tertuang dalam proposalnya mengenai Cascading HTML Style Sheet (CHSS) pada konferensi World Wide Consortium (W3C) di Chicago, Illinois.

Konferensi tersebut diadakan pada bulan Oktober 1994. Proposal yang diajukan oleh Lie tersebut akhirnya di kembangkan bersama dengan Bert Bos menjadi CSS. Selain itu, proyek pengerjaan CSS juga didukung oleh Thomas Reardon, seorang programmer dari Microsoft.

CSS 1 kemudian resmi dirilis kepada publik pada tahun 1996. Nama CSS diambil dari bentuk deklarasi style berbeda yang diletakkan secara berurutan. Pada 17 Agustus 1996, pihak W3C (World Wide Web Consortium) merekomendasi CSS sebagai sebuah bahasa pemrograman standar dalam pembuatan website.

Kemudian pada tahun 1998, W3C menyempurnakan CSS dan menamainya sebagai CSS 2. Pada level ini, CSS dikembangkan untuk memenuhi kebutuhan terhadap format dokumen agar dapat ditampilkan pada printer.

Hingga pada akhirnya, terbitlah CSS 3 yang memiliki beberapa fitur baru yaitu:

  • Animasi – sehingga tidak lagi membutuhkan Adobe Flash dan Microsoft Silverlight.
  • Efek teks – ada tiga macam yaitu teks berbayang, kolom koran, dan word-wrap.
  • Jenis huruf eksternal – sehingga bisa menggunakan berbagai huruf yang tidak termasuk dalam web-safe font.
  • Efek pada kotak – ada tiga macam efek yang dapat diterapkan yaitu kotak yang ukurannya dapat diubah-ubah, transformasi 2 dimensi dan 3 dimensi, sudut-sudut yang tumpul dan bayangan.

Kini, CSS di maintain W3C oleh sebuah divisi bernama CSS Working Group. Mereka membuat dokumen yang dikenal dengan nama specifications. Ketika sebuah specifications telah didiskusikan dan secara resmi oleh anggota W3C, dokumen tersebut akan disebut recommendation (proposal). Specifications yang telah diresmikan disebut sebagai recommendation karena W3C tidak memiliki kontrol pada penerapannya secara nyata. Software akan dibuat oleh perusahaan dan organisasi yang bergerak secara mandiri.


Fungsi CSS

1. Mempercepat Proses Desain sebuah website

2. Membuat tampilan website menjadi lebih variatif

3. Membuat halaman menjadi lebih cepat dimuat

4. Mempermudah proses pemeliharaan

5. Membuat optimasi ke perangkat lain menjadi lebih mudah


Cara Kerja dari CSS

CSS akan bekerja dengan cara memisahkan kode-kode yang mengatur tentang visual website dan kode-kode yang mengatur tentang konten. Struktur dalam Bahasa Pemrograman ini cukup sederhana. Dalam CSS, aturan syntax nya tersusun dari sebuah selector dan declaration block. 

Di sini, Anda dapat memilih elemen yang mana yang diinginkan kemudian Anda dapat melakukan declaration terhadap elemen tersebut. Selector akan mengarahkan elemen dalam HTML yang ingin Anda percantik visualnya. Declaration block sendiri mengandung satu atau lebih declarations yang penulisannya dipisahkan oleh tanda titik koma (;).

Nah, setiap declarations memiliki sebuah property name dan value yang penulisannya dipisahkan oleh titik dua (:). Pada akhirnya declaration block ditutup dengan tanda kurung kurawal ({}).


Jenis-Jenis CSS

Menurut W3C, terdapat tiga jenis CSS yang diklasifikasikan berdasarkan penggunaannya yaitu

1. External Style Sheet CSS

External Style Sheet CSS adalah baris kode yang bisa langsung diletakkan di luar area object. CSS jenis ini dapat digunakan secara berulang pada beberapa objek sekaligus. External Style Sheet CSS juga dapat digunakan antar website, sehingga lebih menghemat ruang.

2. Inline Style Sheet CSS

Inline Style Sheet CSS adalah baris kode yang biasa diterapkan secara langsung pada objek yang ingin didesain ulang. Contohnya saat Anda ingin merubah sebuah text berwarna hitam menjadi berwarna kuning. 

Pengguna CSS jenis ini hanya perlu membubuhkan tag <style> sehingga sangat mudah dan menghemat waktu pengerjaan. 

3. Embedded Style Sheet CSS

Internal Style Sheet CSS adalah aturan CSS yang bisa ditempatkan dalam dokumen HTML menggunakan elemen style untuk memuat aturan. 

Cirinya hampir sama dengan Inline Style Sheet CSS, karena diletakkan pada halaman yang sama pada suatu website. Tag yang digunakan adalah < style > … </style> yang ditempatkan dalam tag <head> … </head>.









Labels:
Location: Indonesia

Comments

Post a Comment

Artikel Populer

Percabangan IF Else Pada Bahasa C dan Contohnya

Assallammualaikum wr.wb Pada kesempatan kali ini kita akan belajar lagi masih seputar bahasa C yaitu Percabangan IF Else. Apa sih itu Percabangan IF Else? IF Else merupakan suatu percabangan, bisa juga di sebut pemilihan dalam program, dimana program tersebut memiliki satu atau bahkan lebih dari satu kondisi yang didalamnya ada sebuah intruksi yang dilaksanakan jika kondisi tertentu dapat terpenuhi. Dibawah ini merupakan Struktur dari IF Else if (condition) {   //Kode program yang akan dijalankan jika condition berisi nilai True (1) } else {   //Kode program yang akan dijalankan jika condition berisi nilai False (0) } Bagian condition berperan sebagai penentu dari struktur percabangan ini. Jika condition terpenuhi (menghasilkan nilai TRUE atau 1), blok kode program milik IF akan dijalankan. Jika condition tidak terpenuhi (menghasilkan nilai FALSE atau 0), blok kode program bagian ELSE-lah yang akan diproses.   Contoh Praktek IF Else - Menentukan Umur Program C #include...
2 comments
Read more »

Belajar HTML Dasar #6 - Membuat Tabel Pada HTML

Membuat Tabel Pada HTML Tabel merupakan struktur yang digunakan untuk nmenampilkan informasi dalam bentuk baris dan kolom. Pada html, untuk pembuatan tabel menggunakan tag <table> dan menggunakan tag <tr>   untuk membuat baris dan <td> untuk membuat kolom. Untuk lebih mudah dalam memahami pembuatan table pada html, berikut ini akan saya sajikan penjelasan tag yang terlibat dalam pembuatan table pada HTML. Tag <table> merupakan tag pembuka dalam pembuatan sebuah table pada html, tanpa tag <table>   ini, penggunaan <tr> dan <td> tidak bisa digunakan dengan baik. < tr> atau dikenal dengan table row merupakan tag yang digunakan untuk membuat baris dalam table html. <td> atau dikenak dengan tabel data merupakan tag yang digunakan untuk membuat kolom  dalam baris dan tag < th> untuk membuat tablehead atau bagian kepala pada table. Dibawah ini adalah contoh pembuatan table pada HTML berikut : <! DOCTYPE ht...
Post a Comment
Read more »

Program Menghitung Pendapatan Karyawan Perusahaan Cat

Assallammualaikum wr.wb Pada kesempatan kali ini kita akan membuat sebuah program lagi menngunakan bahasa c yaitu tentang menghitung pendapatan karyawan suatu perusahaan Cat. C ontoh persoalannya seperti dibawah ini. Suatu perusahaan cat memberikan komisi kepada para karyawannya dengan ketentuan sebagai berikut : Bila karyawannya bisa menjual cat hingga Rp. 200.000,akan diberikan uang jasa sebesar Rp. 20.000,- ditambah dengan uang komisi 10% dari pendapatan yang diperoleh hari itu. Bila karyawannya bisa menjual cat diatas Rp. 200.000,-akan diberikan uang jasa sebesar Rp. 50.000,- ditambah dengan uang komisi 15% dari pendapatan yang diperoleh hari itu. Bila karyawannya bisa menjual cat diatas Rp. 400.000,-akan diberikan uang jasa sebesar Rp. 75.000,- ditambah dengan uang komisi 15% dari pendapatan yang diperoleh hari itu. Buatl ah program if-else untuk menghitung pendapatan karyawan perusahaan tersebut? Program bahasa C #include <stdio.h> int main() {   ...
2 comments
Read more »

Belajar HTML Dasar #5 - Membuat Paragraf Pada HTML

Membuat Paragraf Pada HTML Untuk memahami pembuatan paragraf pada HTML, diharapkan anda terlebih dahulu sudah memahami penulisan dan apa itu tag, element, atribut. paragraf disini merupakan suatu tag untuk membuat penulisan dalam bentuk paragraf. tag paragraf ini terdapat 3 atribut/tag yang bisa dikombinasikan langsung dengan tag paragraf atribut tag tersebut yaitu : 1. Membuat paragraf rata kiri menggunakan <p align="left"> .................. </p> 2. Membuat paragraf rata kanan menggunakan  <p align="right"> .................. </p> 3. Membuat paragraf rata tengan menggunakan  <p align="center"> .................. </p> 4. Membuat paragraf rata kiri kana menggunakan  <p align="justify"> .................. </p> Paragraf menggunakan <p>. Berikut ini adalah implementasi dari <p>   dalam dokumen html : <! DOCTYPE html > < html > < head > < title >belajar membuat parag...
Post a Comment
Read more »