Apa Itu CSS? Pengertian, Fungsi, dan Contohnya

 CSS adalah salah satu bahasa yang wajib Anda ketahui saat belajar membuat website. Tanpanya, tampilan website akan kurang menarik, dan perlu upaya lebih untuk melakukan perubahan pada elemen tampilan. 

Nah, untuk mulai belajar tentang CSS, Anda bisa menyimak artikel ini. Anda akan mengenal apa itu CSS dan berbagai hal terkait bahasa tersebut, mulai dari fungsi hingga jenis jenis CSS.

Tanpa berlama-lama, mari mulai dengan mengetahui pengertian CSS!

Daftar isi  tutup 

Apa Itu CSS?

Apa Fungsi CSS?

1. Mempercepat Loading Halaman Web

2. Memudahkan Pengelolaan Kode

3. Menawarkan Lebih Banyak Variasi Tampilan

4. Membuat Website Tampil Rapi di Semua Ukuran Layar

Jenis Jenis CSS yang Perlu Anda Ketahui

1. Inline CSS

2. Internal CSS

3. External CSS

Bagaimana Cara Kerja CSS?

5+ Contoh CSS

1. Menentukan Format Paragraf

2. Mengubah Warna Link

3. Menentukan Huruf Kapital/Kecil

4. Membuat Kotak Teks

5. Membuat Tombol Link

6. Meng-highlight Baris dalam Tabel

Sudah Tahu Apa Itu CSS, Kan?

Apa Itu CSS?

CSS adalah singkatan dari cascading style sheets, yaitu bahasa yang digunakan untuk menentukan tampilan dan format halaman website. Dengan CSS, Anda bisa mengatur jenis font, warna tulisan, dan latar belakang halaman.

CSS digunakan bersama dengan bahasa markup, seperti HTML dan XML untuk membangun sebuah website yang menarik dan memiliki fungsi yang berjalan baik.

CSS juga berguna untuk mengatasi keterbatasan HTML dalam mengatur format halaman website. Kenapa demikian?

Apabila hanya menggunakan HTML ketika membangun website dengan beberapa halaman, Anda harus menulis tag untuk sebuah elemen HTML di semua halaman tersebut. 

Dengan adanya CSS, Anda cukup menulis kode satu kali untuk sebuah elemen HTML untuk diterapkan ke semua halaman. Nantinya, ketika akan melakukan perubahan, Anda juga cukup melakukan perubahan pada satu kode tadi. Praktis, bukan?

Pun demikian, CSS sering dianggap sebagai sebuah bahasa pemrograman. Padahal, CSS lebih tepat disebut sebagai bahasa style sheet yang umumnya digunakan bersamaan dengan JavaScript. Untuk lebih mengenal JavaScript, Anda bisa mampir ke artikel apa itu JavaScript.

Apa Fungsi CSS?

Secara umum, CSS berfungsi untuk mengatur tampilan halaman website berbasis HTML atau bahasa markup lainnya. Tapi, masih ada beberapa fungsi CSS lainnya, yaitu:

1. Mempercepat Loading Halaman Web

Jika Anda mengatur tampilan website dengan CSS, kecepatan loading website bisa meningkat. Karena Anda bisa menuliskan satu rangkaian kode untuk beberapa halaman website sekaligus, jumlah kode bisa diminimalkan. Dengan begitu, beban pada saat proses loading website lebih kecil.

2. Memudahkan Pengelolaan Kode

Dengan CSS, Anda tidak perlu merubah kode di setiap halaman apabila ingin mengganti tampilan website. Sebagai contoh, Anda ingin mengubah latar belakang semua halaman website. Maka, cukup edit kode CSS terkait latar belakang, perubahan itu akan diterapkan di semua halaman.

3. Menawarkan Lebih Banyak Variasi Tampilan

HTML adalah bahasa yang dapat untuk mengatur tampilan halaman website, tetapi terbatas. Nah, CSS menawarkan lebih banyak style tampilan, sehingga Anda bisa lebih bebas membuat antarmuka website. Contohnya, Anda bisa menggunakan CSS untuk membuat tombol dengan warna yang Anda inginkan, atau membuat menu dropdown CSS.

4. Membuat Website Tampil Rapi di Semua Ukuran Layar

Fungsi CSS yang tidak kalah menarik adalah membuat tampilan website optimal di berbagai ukuran layar. Baik itu di laptop maupun di smartphone. Mengapa demikian? 

CSS memiliki berbagai property untuk mengatur tampilan konten sesuai kebutuhan layar, misalnya dengan max-width. Ketika menggunakan property ini mengubah ukuran elemen HTML sesuai ukuran layar yang digunakan untuk menampilkan website.

Read More

Belajar HTML dari Nol: Pengenalan Dasar HTML untuk Pemula

 HTML memang bahasa yang wajib dipelajari, bagi yang mau menjadi web developer.

Karena…

HTML merupakan bahasa dasar untuk membuat web.

Saya yakin, kamu sudah pernah mendengar HTML sebelumnya. Tapi tidak ada salahnya membaca kembali artikel ini.

Pada tutorial ini, kita akan benar-benar membahas dari nol hingga kamu bisa membuat halaman HTML sendiri.

Baiklah…

Mari kita mulai!

Apa itu HTML?

Mari kita lihat pengertian HTML menurut wikipedia:

HTML atau HyperText Markup Language merupakan sebuah bahasa markah untuk membuat halaman web. 1

Paham kan maksudnya?

Kalau belum paham, sini saya jelaskan…

Jadi, HTML itu adalah sebuah bahasa yang menggunakan markup atau penanda untuk membuat halaman web.

Penanda atau markup ini, nanti akan kita sebut dengan Tag.

HTML berperan untuk menentukan struktur konten dan tampilan dari sebuah web.

Kalau kita ibaratkan nih..

HTML itu seperti batu bata untuk membangun rumah. Batu bata ini dapat disusun, hingga menjadi fondasi dasar.

Dalam membuat halaman web, HTML tidak sendirian. Ada bahasa lain lagi yang menjadi pelengkapnya, yakni CSS dan Javascript.

CSS adalah bahasa khusus yang digunakan untuk memperindah tampilan web.

Lalu Javascript bertugas untuk membuat halaman web menjadi hidup. Karena dengan Javascript, kita dapat menentukan fungsi-fungsi maupun efek yang akan diterapkan di website.

Oh iya, pada tutorial ini.. Kita akan fokus dulu membahas HTML. Jika kamu ingin belajar CSS dan Javascript, silakan buka:

• Tutorial CSS untuk Pemula
• Tutorial Javascript untuk Pemula

Oke, saya anggap kamu sudah paham tentang apa itu HTML serta peranannya dalam pembuatan web.

Berikutnya, biar lebih paham.. kita akan membahas sejarah dan asal-usul HTML.

Sejarah dan Asal-usul HTML

Sejarah lengkap HTML bisa juga dibaca di:

• Sejarah dan Asal Usul HTML

Pada tutorial ini, kita akan bahas sejarahnya secara singkat.

Cerita awal kemunculan HTML dimulai dari tahun 1980..

Saat itu seorang ilmuan bernama Tim Berners-Lee sedang bekerja di CERN.

Tim Berners-Lee (2009)

CERN sendiri bukanlah perusahaan yang berkaitan tentang teknologi maupun internet. CERN adalah singkatan dari bahasa prancis: Conseil Européen pour la Recherche Nucléaire.

Yang artinya: Komisi Eropa untuk Penelitian Fisika Nuklir.

Website CERN (2020)

Para peneliti di CERN membutuhkan sebuah cara atau sistem agar bisa saling berbagi dokumen hasil penelitian.

Tim kemudian mencoba membuat ENQUIRE. Ini adalah software hypertext yang akan digunakan untuk berbagi dokumen.

Lalu di tahun 1989, Tim memperkenalkan ide tentang hypertext berbasis internet. Ini nantinya akan menjadi cikal-bakal HTML.

Tim kemudian memulai proyek baru dengan rekannya Robert Cailliau yang merupakan system engineer di CERN. Akan tetapi proyek ini tidak resmi diadopsi oleh CERN.

Tim Berners-Lee (kiri) dan Robert Cailliau (kanan)

Pada akhir tahun 1991, Tim Berners-Lee menerbitkan dokumen yang berjudul: “HTML Tags”.

Dokumen ini berisi penjelasan tentang 18 tags awal yang menjadi konsep dasar HTML.

HTML sebenarnya dirancang berdasarkan pada konsep bahasa markup yang dikenal dengan SGML (Standard Generalized Markup Language).

SGML adalah sebuah standar internasional untuk membuat dokumen dengan tanda (markup) seperti paragraf, list, heading, dan lain-lain.

Bisa dibilang..

HTML adalah implementasi dari SGML.

Kalau kita lihat, beberapa tag seperti <title>, <p>, <li>, dan <h1> sampai <h6> berasal dari SGML. Namun, tidak semua yang ada di HTML berasal dari SGML.

Salah satunya adalah Hyperlink, yang murni hasil pemikiran Tim Berners-Lee.

Ide tentang HTML ini kemudian disebarkan ke dalam sebuah mailing list dan segera menjadi perhatian berbagai ilmuwan komputer di seluruh dunia.

Perkembangan dan Versi HTML

HTML punya beberapa versi, dari versi yang paling tua hingga yang terbaru. Berikut ini perkembangan versi HTML:

• [Draft] HTML 1.0 (Juni 1993) adalah versi HTML pertama, namun tidak resmi dirilis;
• HTML 2.0 (24 November 1995) adalah versi HTML kedua yang resmi pertama kali beredar di pasaran dan dirilis oleh IETF;
• [Draft] HTML 3.0 (28 Maret 1995) versi ini gagal beredar, karena banyak perubahan yang memicu perdebatan;
• HTML 3.2 (14 Januari 1997) versi resmi yang dirilis W3C pertama kali.
• HTML 4.0 (24 April 1998) versi pengembangan dari yang sebelumnya;
• HTML 4.01 (24 Desember 1999) versi perbaikan dari HTML 4.0;
• XHTML 1.0 (26 Januari 2000) pengembangan dari HTML 4.01 dengan mengadopsi XML;
• XHTML 2.0 (Augustus 2002—Juli 2006) versi kedua dari XHTML;
• HTML 5 (28 Oktober 2014) versi html saat ini.

Versi [draft] adalah versi yang tidak resmi dirilis ke pasaran. Bentuknya cuma masih dalam draft spesifikasi saja.

Artinya..

Tidak ada yang menggunakan versi [draft] untuk membuat web.

Lalu, versi mana yang akan kita pakai?

Tentunya versi terbaru, yakni HTML 5.

Peralatan untuk Belajar HTML

Nah, sekarang.. Tiba saatnya kita praktik!

Tapi sebelum itu, kamu harus siapkan beberapa alat yang akan digunakan untuk praktik.

Adapun peralatan yang harus kamu persiapkan adalah:

1. Teks Editor untuk Menulis HTML

Teks editor akan kita gunakan untuk menulis kode-kode HTML. Kamu bebas menggunakan teks editor apapun.

Notepad boleh, Notepad++ juga boleh..

Apapun teks editornya, yang penting bisa digunakan untuk membuat dan menulis dokumen HTML.

Namun, pada tutorial ini.. kita akan menggunakan teks editor Visual Studio Code.

Read More