Assalamu‘alaikum wr. wb.
Halo gais! Jika sebelumnya pernah membahas tentang Struktur Dasar HTML, sekarang kita akan membahas tentang Struktur Dasar pada CSS. CSS juga merupakan Komponen yang sangat penting dalam Pemrograman Web. Tanpa CSS, akan menjadi HTML Polos tanpa Hiasan yang menarik.
 |
| Ilustrasi Struktur Dasar pada CSS |
Sumber Artikel Materi : Hostinger.co.id, Plimbi.com, Techfor.id, dan Petanikode.com
CSS memiliki Sintaks atau proses penulisan kode program yang harus diikuti. Jika kita salah menulis, CSS yang kami hasilkan mungkin tidak menghasilkan apa pun di tampilan web. Jadi kita perlu memahami Sintaks dasar CSS agar tidak salah ketik.
A. Pengertian CSS
CSS adalah bahasa Cascading Style Sheet dan umumnya digunakan untuk mengontrol tampilan elemen yang ditulis dalam bahasa markup, seperti HTML. CSS digunakan untuk memisahkan konten dari tampilan visualnya di halaman web.
CSS dibuat dan dikembangkan oleh W3C (World Wide Web Consortium) pada tahun 1996 untuk alasan yang sederhana. Dulu HTML tidak dilengkapi dengan tags yang berfungsi untuk memformat halaman. Anda hanya perlu menulis markup untuk situs.
Tags, seperti <font>, diperkenalkan di HTML versi 3.2, dan ketika itu menyebabkan banyak masalah bagi developer. Karena website memiliki berbagai font, warna background, dan style, maka untuk menulis kembali (rewrite) kode memerlukan proses yang sangat panjang dan sulit. Oleh sebab itu, W3C membuat CSS untuk menyelesaikan masalah ini.
HTML dan CSS terkait erat. Karena HTML adalah bahasa markup (Fondasi situs) dan gaya tambalan CSS (untuk semua aspek yang terkait dengan tampilan halaman web), kedua bahasa pemrograman ini harus bekerja secara paralel.
B. Sejarah CSS
CSS pertama berasal dari lahirnya SGML pada tahun 1970-an. CSS telah berkembang sangat cepat sejak kemunculannya. Bentuk dasar CSS yang tersebar luas saat ini merupakan gagasan dari seorang programmer bernama Hako Wium Lie, yang mempresentasikan proposalnya untuk Cascading HTML Style Sheet (CHSS) pada Oktober 1994 (Pada konferensi W3C di Chicago, Illinois). Kemudian dia dan temannya bernama Bet Bos mengembangkan Standar CSS.
CSS secara resmi dirilis pada akhir tahun 1996 (CSS Level 1 menyusul pada bulan Desember). Proyek tersebut dibantu oleh seorang programmer bernama Thomas Reardon dari perusahaan perangkat lunak terkenal Microsoft.
Adapun Versi-versi dari CSS adalah sebagai berikut.
Pada tanggal 17 Agustus 1996 World Wide Web Consortium (w3C) menetapkan CSS sebagai bahasa pemrograman standar dalam pembuatan halaman web. Tujuan utamanya untuk mengurangi pembuatan tag-tag baru oleh Netscape dan Internet Explorer, karena kedua browser tersebut sedang bersaing mengembangkan tag sendiri untuk mengatur tampilan halaman website.
CSS1 mendukung pengaturan tampilan dalam hal :
- Font (jenis ketebalan).
- Warna, teks, background, dan elemen yang lainnya.
- Text atribut, misalnya spasi antar kata.
- Posisi teks, gambar, table dan elemen lainnya.
- Margin, border dan padding
2. CSS2
CSS2 ini dibuat untuk menyempurnakan CSS tahap awal dengan menciptakan standard CSS 2 yang menjadi standard dari tahun 1998 hingga saat ini. CSS2 dikembangkan untuk memenuhi kebutuhan terhadap format dokumen agar bisa ditampilkan di printer.
3. CSS3
CSS3 merupakan versi terbaru dari CSS yang mampu melakukan banyak hal dalam desain website. CSS3 dapat melakukan animasi halaman website, seperti animasi warna dan 3D. Selain itu, banyak fitur baru, yaitu :
- Animasi
- Beberapa efek teks, seperti teks bayangan, kolom koran, dan word wrap.
- Beberapa efek pada kotak, seperti transformasi 2 dimensi, sudut-sudut yang tumpul dan bayangan.
C. Kelebihan dan Kekurangan CSS
Sangat mudah untuk mengetahui situs mana yang menggunakan CSS dan mana yang tidak. Anda pasti sudah membuka situs web tersebut, tetapi setelah beberapa saat tidak mau memuat, malah menampilkan latar belakang putih yang didominasi teks hitam dan biru. Situasi ini menjelaskan bahwa CSS situs web tidak dapat dimuat dengan benar atau situs web tidak memiliki CSS sama sekali. Umumnya website semacam itu hanya menggunakan HTML.
Sebelum menggunakan CSS, semua gaya harus dibungkus (Stylizing) dengan Tag HTML. Itu berarti Anda harus mendeskripsikan latar belakang, warna font, perataan, dll secara terpisah.
Dengan CSS, Anda dapat mengontrol tampilan segala sesuatu di file yang berbeda, menentukan gaya, lalu mengintegrasikan file CSS dengan markup HTML. Ini membuat markup HTML lebih mudah dipelihara.
Singkatnya, dengan CSS Anda tidak perlu berulang kali mendeskripsikan tampilan setiap elemen. Anda tidak membuang waktu, kode yang digunakan lebih pendek dan kesalahan diminimalkan. Karena kemungkinan penyesuaian hampir tidak terbatas, CSS memungkinkan Anda menerapkan banyak gaya ke satu halaman HTML.
Adapun beberapa Kekurangan dari CSS adalah :
- Menyita waktu karena tidak semua browser dapat mengartikan sintaks CSS yang sama
- Kadang desain sudah terlihat rapi disatu browser, namun ketika dicoba dibrowser lain justru jadi acak-acakan.
D. Cara Kerja CSS
CSS menggunakan sintaks berbasis bahasa Inggris sederhana yang memiliki seperangkat aturan yang mengaturnya. Seperti yang telah kami sebutkan sebelumnya, HTML tidak dibuat untuk menerapkan elemen style, hanya markup halaman saja. HTML dirancang semata-mata untuk mendeskripsikan konten. Sebagai contoh : <p>This is a paragraph.</p>.
Satu yang menjadi pertanyaannya sekarang, bagaimana caranya style paragraf? Struktur syntax CSS cukup sederhana. Struktur ini memiliki selector dan declaration block. Pilih elemen yang diinginkan, kemudian deklarasi (declare) yang harus Anda lakukan terhadap elemen tersebut.
Ada berbagai rule yang harus diingat. Meskipun demikian, rule struktur cukup simpel dan sederhana.
Selector mengarah ke elemen HTML yang ingin Anda ubah tampilannya. Declaration block memuat satu atau lebih banyak deklarasi (declaration) yang dipisahkan dengan tanda titik koma.
Setiap deklarasi menyertakan nama dan value dari properti CSS, yang dipisahkan dengan tanda koma. Umumnya deklarasi CSS diakhiri dengan tanda titik koma, sedangkan declaration block dikelilingi oleh tanda kurung kurawal.
Mari kita lihat contoh di bawah ini :
Semua elemen <p> ditandai dengan warna biru dan hurufnya ditebalkan (bold).
<style>p {color: blue;text-weight: bold;}<style>
Contoh lain, semua elemen <p> diposisikan di tengah (center-aligned), dengan lebar 16x, dan berwarna pink.
<style>p {text-align: center;font-size: 16px;color: pink;}</style>
Untuk selengkapnya, silakah lihat pada CSS Cheat Sheet di bawah ini.
 |
| Beberapa Kunci pada CSS Cheat Sheet |
E. Cara memasukkan (Insert) Kode CSS
CSS Style internal dimuat setiap kali situs disegarkan dan sisi negatifnya adalah perlu waktu lebih lama untuk memuat. Gaya CSS yang sama tidak dapat digunakan di halaman lain karena sudah berfungsi di satu halaman.
Namun dibalik kekurangannya, inner style CSS memiliki beberapa kelebihan. Salah satunya adalah kemudahan berbagi template untuk pratinjau karena CSS hanya ada di satu halaman.
Ada 3 cara yang bisa Anda lakukan untuk menerapkan CSS pada file HTML Anda :
- External CSS
- Internal CSS
- Inline CSS
External merupakan CSS style yang paling mudah dan tidak menyulitkan. Semuanya dilakukan secara eksternal pada file .css. Styling dilakukan di file terpisah, lalu terapkan CSS ke halaman mana pun yang Anda inginkan. Sayangnya, CSS Style External juga memperlama waktu loading.
CSS Style Inline menggunakan elemen spesifik yang memuat tag <style>. Karena setiap komponen harus di-stylize, maka Inline bukan metode yang tepat jika Anda ingin menggunakan CSS dengan cepat.
Namun di sisi lain, hal tersebut mendatangkan keuntungan. Misalnya, jika Anda ingin mengubah satu elemen, atau menampilkan pratinjau dengan cepat, atau Anda tidak punya akses ke file CSS.
1. External CSS
Dengan External CSS, Anda bisa mengubah tampilan keseluruhan website Anda hanya dengan 1 file.
Setiap Page HTML harus memiliki sumber referensi (href) jika ingin menyisipkan external CSS. <href> diletakan di dalam elemen <link> di dalam bagian <head>.
External style sheet bisa Anda buat di text editor manapun, dan harus di save dengan format .css.
<!DOCTYPE html><html><head><link rel="stylesheet" href="mystyle.css"></head><body><h1>This is a heading</h1><p>This is a paragraph.</p></body></html>
Output :
 |
| Sumber : W3schools.com |
External style sheet tidak boleh mengandung elemen HTML.
Beginilah contoh mystyle.css yang kita gunakan diatas :
body {background-color: lightblue;}h1 {color: navy;margin-left: 20px;}
2. Internal CSS
Berbeda dengan external CSS yang mengambil file css dari luar html dengan href, Internal CSS yakni menyisipkan CSS pada file HTML. Intern al CSS bisa anda sisipkan pada elemen <style> didalam section <head>.
<!DOCTYPE html><html><head><style>body {background-color: linen;}h1 {color: maroon;margin-left: 40px;}</style></head><body><h1>This is a heading</h1><p>This is a paragraph.</p></body></html>
Output :
 |
| Sumber : W3schools.com |
3. Inline CSS
Sama persis dengan Internal CSS, hanya saja untuk inline anda menyisipkan CSS pada elemen (Contoh : h1, h2, p) yang anda pilih.Cara penggunaannya yaitu dengan menginput atribut Style pada elemen.
<!DOCTYPE html><html><body><h1 style="color:blue;text-align:center;">This is a heading</h1><p style="color:red;">This is a paragraph.</p></body></html>
Output :
 |
| Sumber : W3schools.com |
F. Struktur Dasar CSS
Adapun beberapa Struktur Dasar pada CSS, yaitu :
1. Selector
Sumber : W3schools.com
Selector dalam CSS masih terbagi lagi menjadi 3 (Tiga) bagian, yaitu :
a. ID Selector
Id selector menggunakan atribut id pada HTML untuk memilih elemen tertentu.
Id dari elemen bersifat unik dalam suatu laman, jadi Id selector digunakan untuk memilih satu elemen unik.
Untuk memilih elemen dengan id tertentu, tulis karakter hash (#), diikuti dengan id elemen.
<!DOCTYPE html><html><head><style>#para1 {text-align: center;color: green;}</style></head><body><p id="para1">Hello World!</p><p>This paragraph is not affected by the style.</p></body></html>
Output :
b. Class Selector
Class selector digunakan untuk memilih elemen HTML dengan class atribut tertentu. Untuk memilih elemen dengan class tertentu, tulis karakter titik (.), diikuti dengan nama class.
Contoh : Pada contoh kali semua elemen HTML dengan class=”center” akan berwarna merah dan rata tengah.
<!DOCTYPE html><html><head><style>.center {text-align: center;color: red;}</style></head><body><h1 class="center">Red and center-aligned heading</h1><p class="center">Red and center-aligned paragraph.</p></body></html>
Output :
.jpg) |
| Sumber : W3schools.com |
Anda juga bisa menargetkan elemen tertentu saja yang menggunakan CSS. Contoh hanya class <p> saja yang akan berwarna merah dan rata tengah.
<!DOCTYPE html><html><head><style>p.center {text-align: center;color: red;}</style></head><body><h1 class="center">This heading will not be affected</h1><p class="center">This paragraph will be red and center-aligned.</p></body></html>
Output :
.jpg) |
| Sumber : W3schools.com |
c. Grouping Selector
Grouping Selector yakni memilih semua elemen HTML dengan style css yang sama. Untuk Group Selector, pisahkan setiap selector dengan tanda koma.
Lihatlah kode CSS berikut (elemen h1, h2, dan p memiliki style css yang sama)
<!DOCTYPE html><html><head><style>h1, h2, p {text-align: center;color: red;}</style></head><body><h1>Hello World!</h1><h2>Smaller heading!</h2><p>This is a paragraph.</p></body></html>
Output :
 |
| Sumber : W3schools.com |
2. Box Model
Semua elemen HTML dapat dianggap sebagai kotak (box). Dalam CSS, kata “box model” mengacu pada desain dan layout / tata letak.
Secara esensial, CSS box model adalah kotak yang mengelilingi atau membungkus elemen HTML. CSS box model terdiri dari margin, border, padding, dan konten.Dibawah ini adalah contohnya :
 |
| CSS Box Model |
Penjelasan :
- Content : Konten di dalam box, dimana text atau gambar ditampilkan.
- Padding : Area kosong yang mengelilingi konten dan bersifat transparan.
- Border : Batas yang mengelilingi Padding dan Content.
- Margin : Area kosong di luar Border yang bersifat transparan.
Box model membuat kita dapat menyisipkan border di sekitar elemen, dan memberi jarak di antara elemen.
Berikut ini adalah contoh demonstrasi CSS Box model.
<!DOCTYPE html><html><head><style>div {background-color: lightgrey;width: 300px;border: 15px solid green;padding: 50px;margin: 20px;}</style></head><body><h2>Demonstrating the Box Model</h2><p>The CSS box model is essentially a box that wraps around every HTML element. It consists of: borders, padding, margins, and the actual content.</p><div>This text is the content of the box. We have added a 50px padding, 20px margin and a 15px green border.</div></body></html>
Output :
 |
| Sumber : W3schools.com |
Dan masih banyak lagi mengenai CSS dan tidak mungkin untuk dibahas satu per satu. Untuk melihat CSS Cheat Sheet, silakan klik di sini.
Semoga saja Artikel ini sangat bermanfaat bagi para IT dan Programmer Pemula.
Terima Kasih 😄😘👌👍 :)
Wassalamu‘alaikum wr. wb.