CSS

Pengertian CSS dan Cara Kerjanya

Pengertian CSS dan Cara Kerjanya – Untuk membangun sebuah website selain diperlukan untuk mengetahui bahasa pemrograman seperti HTML, PHP, ASP dan bahasa lainnya, kalian juga wajib mengetahui tentang CSS. CSS akan sangat berguna  dalam proses pengembangan website, karena saat ini hampir setiap website menggunakan CSS sebagai tools untuk mengatur berbagai tampilan di dalamnya. Untuk pada artikel kali ini kita akan membahas pengertian CSS dan fungsinya.

Pengertian CSS

Cascading Style Sheets atau lebih dikenal dengan CSS adalah bahasa pemrograman yang digunakan untuk mendesain tampilan halaman website.

Ada banyak hal yang dapat Anda lakukan menggunakan CSS dibandingkan dengan bahasa pemrograman seperti HTML dan PHP. Dengan menggunakan CSS, kalian dapat mengatur warna teks, jenis font, baris antar paragraf, ukuran kolom, background yang dipakai dan lainnya.

Tidak hanya itu CSS juga bisa digunakan untuk mendesain layout, variasi tampilan di berbagai perangkat yang berbeda (responsive design), dan berbagai efek yang dipakai di dalam website.

CSS sangat mudah dipelajari, tapi juga powerful karena dapat mengontrol penyajian tampilan dari dokumen HTML. Mulai dari yang simpel sampai kompleks. Tidak heran jika saat ini CSS hampir dipakai di berbagai website untuk dikombinasikan dengan HTML, PHP maupun bahasa pemrograman web lainnya.

Fungsi CSS

Jika kalian pernah mengembangkan website dengan PHP atau HTML, kalian pasti merasakan sedikit kesulitan ketika ingin mendesain tampilan halaman websitenya. Apalagi ketika kalian mememiliki halaman website yang komplek dan ingin mengubah tampilan di setiap halaman website kalian, tentu itu sangat merepotkan. Untuk itu, CSS bisa menjadi salah satu solusinya.

Sebagai contoh, jika membuat teks menggunakan HTML saja, Anda mungkin akan mendapatkan hasil seperti ini:

contoh tanpa hasil penggunaan css

Namun, berbeda hasilnya jika kalian menambahkan CSS, hasilnya akan menjadi lebih bervariasi dengan warna seperti ini:

contoh hasil penggunaan css

Gambar di atas hanya salah satu hasil penggunaan dari CSS. Banyak hal yang dapat dikerjakan dengan menggunakan CSS. Kalian bisa mendesain berbagai macam tampilan menggunakan CSS sehingga sesuai dengan kebutuhan.

Selain itu, ada beberapa keuntungan yang bisa Anda dapatkan ketika menggunakan CSS, seperti:

1. Mempercepat Proses Desain

Seumpanya kita memiliki beberapa halaman HTML yang menggunakan desain yang sama. Dan suatu saat kita ingin mengubah ukuran font atau warna font , maka yang kita lakukan adalah mengganti di setiap halalamn yang kita miliki dan ini akan memakan waktu yang lama tentunya kan?.

Ketika menggunakan CSS, kita cukup mengetikkan satu kali fungsi CSS kemudian menggunakannya di setiap halaman HTML. Fungsi CSS yang kita buat dalam satu file dapat Anda panggil ke berbagai halaman web tanpa harus menyalin baris kode fungsi berkali-kali, cukup memanggil fungsi CSS yang kita buat tadi.

2. Proses Pemeliharaan Mudah

CSS memudahkan kita untuk mengubah tampilan di berbagai halaman. Hanya dengan mengubah fungsi style di file CSS maka seluruh tampilan yang menggunakan fungsi tersebut akan berubah secara otomatis.

3. Style Lebih Beragam Dibanding HTML

CSS mempunyai atribut lebih beragam dibandingkan dengan HTML. Apa keuntungannya? Anda mempunyai lebih banyak pilihan tampilan halaman website.

4. Kompatibel Dengan Berbagai Macam Perangkat

CSS memungkinkan konten Anda dapat dioptimasi di lebih dari satu perangkat. Misal ketika memproses sebuah dokumen. Jika menggunakan CSS, Anda bisa menyesuaikan tampilan dokumen di perangkat versi lama sekaligus di versi yang baru.

5. CSS Menjadi Standar Pengembangan Website

Hampir seluruh website yang ada di internet menggunakan CSS di dalamnya. Selain tampilannya yang lebih menarik, kebanyakan browser populer saat ini juga mendukung CSS. Jadi jika Anda ingin mengembangkan website yang sesuai standar browser populer, sebaiknya gunakan CSS. Anda pasti juga ingin website dapat kompatibel dengan berbagai macam browser kan?.

Cara Kerja CSS

Setelah mengetahui pengertian CSS dan fungsinya, selanjutnya ialah kita belajar tentang cara kerja CSS. CSS membuat style di dalam halaman web dapat berinteraksi dengan elemen HTML. Elemen merupakan komponen HTML dari sebuah halaman web. Berikut adalah salah satu contoh elemen di HTML:

p  { color:red;  font-weight:bold;  }

Pada contoh di atas, “p” (paragraf) merupakan bagian baris kode CSS untuk menspesifikasikan elemen HTML atau biasa dikenal dengan nama ‘selector’.Jika Anda ingin membuat paragraf di atas muncul dengan warna yang lain dan bold, Anda bisa menambahkan baris CSS seperti di bawah ini:

Di dalam CSS, selector ditulis di bagian kiri sebelum tanda kurung kurawal (curly bracket)  pertama. Sedangkan informasi yang ada di dalam tanda kurung kurawal merupakan sebuah deklarasi yang di dalamnya mengandung properti dan nilai yang diaplikasikan ke dalam selector.

Contoh dari properti adalah ukuran font, warna, layout, format, dan lain sebagainya. Sedangkan nilai yang dimaksud adalah pengaturan yang diterapkan ke dalam properti. Misalnya dari contoh di atas, “color” dan “font-weight” merupakan properti, sedangkan “red dan “bold” merupakan sebuah nilai.

Sebagai tambahan, baris kode ..

body  { background-color:blue;  }

.. akan membuat halaman background menjadi biru , atau ..

p  { font-size:20px;  color:red;  }

.. akan menerapkan ukuran font 20 dengan warna merah di setiap paragraf.

3 Macam Cara Penulisan CSS

Ada tiga macam cara penulisan CSS yang dapat dipakai ke dalam baris kode HTML, yaitu externalinternal, atau inline. Bagian ini akan membahas tiga macam CSS ini dengan lebih detail.

Inline CSS

CSS didefinisikan langsung pada tag HTML yang bersangkutan. Cara penulisannya cukup dengan menambahkan atribut style=”…” dalam tag HTML tersebut. Style hanya akan berlaku pada tag yang bersangkutan, dan tidak akan memengaruhi tag HTML yang lain.

Contoh penulisan CSS dengan metode Inline Style Sheet

<h1  style="font-size:30px;color:blue;">Contoh Metode Inline Style Sheet</h1>

External CSS

External CSS adalah penempatan baris kode CSS menggunakan file .css. Cara ini dapat digunakan untuk mendeklarasikan sebagian besar pengaturan tampilan website secara keseluruhan.

Cara ini lebih sederhana dan simpel daripada menambahkan baris kode di setiap elemen HTML yang ingin Anda atur tampilannya.

Jika menggunakan penempatan secara eksternal, Anda harus menambahkan header untuk memanggil file .css di dalam file HTML seperti contoh di bawah ini.

<head>
<link rel="stylesheet"  type="text/css"  href=filecss.css">
</head>

Baris kode di atas akan menghubungkan file .html dengan eksternal style sheet (CSS). Pada contoh di atas file CSS menggunakan nama ‘filecss.css’ yang dapat Anda sesuaikan dengan letak file CSS di dalam direktori website. Ketika file HTML sudah terhubung dengan file CSS maka seluruh pengaturan CSS akan diterapkan di dalam kode HTML.

Internal CSS

Internal CSS sekilas mirip dengan inline CSS, yaitu tipe penulisan tanpa file CSS terpisah.

Namun di dalam penggunaan CSS secara internal, baris kode CSS dituliskan di dalam file HTML. Cara ini akan sangat cocok dipakai untuk menciptakan halaman web dengan tampilan yang berbeda. Dengan kata lain, CSS ini bisa dipakai untuk menciptakan tampilan yang unik.

Baris kode CSS secara internal contohnya seperti di bawah ini.

<head>
<style>
Body  { background-color:blue;  }
P  { font-size:20px;  color:mediumblue;  }
</style>
</head>

 

Di antara tiga jenis cara penulisan CSS, cara eksternal merupakan cara yang paling efektif untuk mengimplementasikan CSS ke dalam website. Cara ini juga paling populer atau sering dipakai oleh banyak pengembangan website dibandingkan dengan cara yang lainnya.

Sedangkan cara internal dan inline juga bisa dipakai untuk menambahkan format masing-masing halaman yang khusus atau berbeda dengan halaman yang lainnya.

Penutup

CSS memudahkan kita untuk mengatur berbagai tampilan yang di dalam website. Kita dapat mengatur warna, ukuran font, jenis layout, dan berbagai macam pengaturan tampilan sehingga bisa sesuai dengan kebutuhan yang diinginkan.

Jadi untuk membangun website kombinasi HTML dan CSS adalah komponen yang saling menunjang untuk terciptanya tampilan website yang menarik.

Demikian ulasan tentang CSS semoga bermanfaat bagi kalian yang ingin belajar membuat website

 

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *