Pengertian CSS dan Cara Kerja CSS bagi Web Developer

  Seorang web programmer agar dapat mengembangkan website agar lebih menarik dan nyaman saat digunakan serta memenuhi kebutuhan user wajib mengetahui CSS namun untuk mempelajari CSS, tentunya harus mengetahui HTML dasar karena alur halaman sebuah website dibuat dengan tag – tag dan elemen HTML. Dengan demikian, dapat mengaplikasikan style untuk masing – masing tag atau elemen tersebut. CSS mendeskripsikan presentasi atau tampilan sebuah halaman web, maka dapat mengatur dan memperindah tampilan halaman website dengan menggunakan kode CSS. misalkan, memberi warna pada tulisan, menambahkan background atau latar berupa warna dan gambar, menentukan jenis dan ukuran font, memberi efek animasi, menentukan tampilan yang sesuai dengan ukuran layar web browser dan banyak hal lagi yang berkaitan dengan desain sebuah website.  

APA itu CSS?

CSS adalah kepanjangan dari “Cascading Style Sheets”. adalah kumpulan kode program yang digunakan untuk memberi sentuhan gaya atau corak tampilan (style) pada sebuah element atau struktur halaman web yang dibuat oleh HTML. Dengan menggunakan CSS developer dapat mengubah jenis tulisan, mengubah warna, mengubah ukuran gambar dan background atau latar belakang hampir seluruh kode tag HTML. CSS saling berkaitan dengan HTML.  HTML dikhususkan untuk membuat struktur halaman, isi konten atau informasi dari halaman web tersebut, sedangkan CSS dikhususkan untuk mengubah dan mengatur tampilan dari halaman website.  

Sejarah CSS

World Wide Web Consortium (W3C) yaitu komunitas seluruh dunia yang mengembangkan CSS yang berkontribusi untuk memberi masukan, mengembangkan spesifikasi dan menulis CSS untuk mendefinisikan standar bahasa CSS yang akan digunakan oleh semua orang, juga agar vendor yang mengembangkan aplikasi web browser dapat mengimplementasikan, spesifikasi CSS pertama kali diperkenalkan pada tahun 1996.  

Fungsi CSS

CSS atau singkatan dari “Cascading Style Sheets” di gunakan untuk mendesain halaman tampilan website karena dengan CSS dapat mengatur warna teks, mengatur jenis font, mengatur baris antar paragraf, mengatur background, mengatur gambar, mengatur layout dan masih banyak lagi fungsi dari CSS.  

Manfaat menggunakan CSS

• Mempercepat proses desain dalam mengembangkan website

Dengan menggunakan CSS saat mendesain website di beberapa halaman HTML, Anda tidak perlu menyalin ke setiap halaman karena cukup dengan mengetikan satu kali fungsi CSS kemudian dapat digunakan di berbagai halaman HTML. Karena file CSS yang dibuat dalam satu file dapat digunakan di berbagai halaman.

• Halaman website lebih cepat

Dengan menulis aturan CSS di berbagai file HTML dan menghubungkannya sudah dapat mengatur halaman website.

• Style lebih beragam dibandingkan dengan HTML

CSS mempunyai atribut lebih beragam sehingga banyak pilihan dalam mengatur tampilan website

• Kompatibel dengan berbagai perangkat

CSS dapat memungkinkan konten website dapat di optimasi dengan berbagai perangkat.  

Mengapa CSS diciptakan?

• Aturan – aturan yang dapat digunakan untuk menampilkan elemen / tag HTML
• Bertujuan untuk memisahkan konten dan style
• Dibuat terpisah dengan HTML
• Satu halaman HTML bisa membuat tampilan berbeda hanya dengan menggunakan CSS
• Satu file CSS dapat digunakan untuk berbagai halaman HTML

 

Cara menggunakan CSS

Setelah mengetahui pengertian CSS dan fungsinya maka akan melanjutkan dengan bagaimana cara menggunakan CSS? Jawabannya adalah CSS membuat Style di dalam sebuah halaman website yang dapat berinterkasi dengan elemen HTML. Berikut salah satu contoh penggunaan CSS: Kerangka CSS :  selector { property: value; } Misalkan kita mempunyai lima halaman HTML dan kita ingin memberi nama dan menebalkan Paragraf di semua halaman maka cukup dengan mengubah di dalam satu CSS untuk semua halaman Contoh : Semua elemen <p> ditandai dengan warna merah dan hurufnya ditebalkan (bold).

Maka semua halaman di paragraf akan berubah menjadi warna merah dan fontnya bercetak tebal perhatikan code di atas selector P { property adalah color: value adalah red; } kemudian text-weight adalah property: bold adalah value; } Contoh lainnya : semua elemen <p> diposisikan di tengah (center-aligned), dengan lebar 16px, dan berwarna blue.  

Penempatan CSS didalam kode HTML

Dalam menggunakan CSS ada 3 macam penempatan CSS yang dapat dipakai didalam baris kode HTML.

 

Penempatan CSS secara Internal CSS

baris kode CSS dituliskan di bagian atas <header> didalam file HTML. Cara ini sangat cocok dalam pembuatan halaman web dengan tampilan yang berbeda. Contoh :

Baris kode di atas akan menerapkan background dengan warna kuning, paragraf berukuran 25px, dan ‘medium blue’ font ke dalam satu halaman HTML.  

Penempatan CSS secara Inline CSS

Inline CSS adalah penempatan CSS secara langsung di buat di dalam HTML dan hanya fokus mengubah satu bagian baris kode saja Contoh :

CSS di atas hanya akan mempengaruhi suatu baris kode h1 di dalam HTML  

Penempatan CSS secara External CSS

External CSS adalah penempatan baris code CSS yang terpisah dengan file HTML menggunakan file CSS dapat mengubah Sebagian besar pengaturan tampilan website secara keseluruhan meskipun mempunyai lebih dari satu halaman HTML dapat diatur dengan satu file CSS. Contoh :

Baris kode di atas saling berhubungan antara kode HTML dan file CSS secara eksternal. contoh di atas file CSS dengan nama fileCSS punyasaya.css developer dapat menyesuaikan  letak file CSS di direktori sesuai dengan yang diinginkan. Ketika file HTML sudah terhubung dengan file eksternal CSS maka seluruh pengaturan yang dilakukan dengan CSS dapat diterapkan di semua halaman kode HTML meskipun berbeda halaman.  

Penutup

Sebagai programmer web sangat penting untuk memahami CSS karena dapat memudahkan dalam mengatur tampilan website agar lebih menarik dan nyaman saat digunakan mengingat CSS diciptakan agar baris kode HTML rapi dan memudahkan developer agar cepat dalam mengubah dan mengatur tampilan halaman website.