1. Latar Belakang dan Awal Kemunculan (1994-1996)

Pada awal 1990-an, tata letak web dilakukan langsung dalam dokumen HTML menggunakan atribut seperti <font>, <color>, dan tabel. Hal ini membuat HTML sulit dipelihara. Pada tahun 1994, Håkon Wium Lie mengusulkan konsep “Cascading Style Sheets”. Pada Desember 1996, W3C merilis spesifikasi CSS Level 1.

1. CSS Level 1 (1996)

   CSS1 memperkenalkan fitur dasar seperti:

   • Mengatur warna teks, latar belakang, dan margin.
   • Penggunaan font dan ukuran huruf.
   • Menentukan tata letak sederhana.
2. CSS Level 2 (1998)

   CSS2 menambahkan fitur seperti:

   • Dukungan untuk media (screen, print, speech).
   • Pengaturan tata letak menggunakan z-index.
   • Positioning relatif dan absolut.
   • Pseudo-class dan pseudo-elements.
3. CSS Level 2.1 (2004)

   W3C merilis CSS2.1 sebagai revisi dari CSS2 untuk memperbaiki kompatibilitas antar-browser.

4. CSS3 (2005 – Sekarang)

   CSS3 adalah standar modular yang menambahkan fitur seperti:

   • Flexbox dan Grid Layout untuk tata letak modern.
   • Efek visual seperti animasi, transformasi, dan transisi.
   • Desain responsif dengan media queries.
   • Font web dengan @font-face.

2. Pengenalan CSS

CSS (Cascading Style Sheets) adalah bahasa pemrograman yang digunakan untuk mengatur tampilan dan tata letak halaman web. CSS bekerja bersama HTML untuk mempercantik elemen-elemen di dalamnya.

HTML tanpa CSS akan menghasilkan halaman web yang hanya berisi struktur konten, tanpa desain atau gaya visual yang menarik. HTML (Hypertext Markup Language) digunakan untuk membuat struktur dasar halaman web, seperti teks, gambar, dan link. Namun, tanpa CSS (Cascading Style Sheets), halaman tersebut akan tampil sangat sederhana dan tidak teratur. Berikut perbedaan utama antara HTML dengan dan tanpa CSS

1. Tampilan
   • Dengan CSS: Halaman web akan memiliki tata letak yang terorganisir, warna latar belakang, jenis font, ukuran teks, dan elemen visual lainnya yang membuat halaman lebih menarik dan mudah dibaca.
   • Tanpa CSS: Tampilan halaman hanya akan menggunakan format default yang sangat terbatas, seperti teks yang ditampilkan dalam urutan linier tanpa pembeda yang jelas antar elemen (seperti heading atau paragraf).
2. Pengaturan Tata Letak
   • Dengan CSS: Anda bisa mengatur tata letak halaman menggunakan elemen-elemen seperti grid atau flexbox, dan juga bisa mengubah posisi elemen secara dinamis dengan media queries.
   • Tanpa CSS: Semua elemen akan muncul dalam urutan dasar dan tidak bisa diatur tata letaknya dengan baik. Elemen-elemen seperti gambar atau teks akan ditempatkan secara default di atas satu sama lain.
3. Desain Responsif
   • Dengan CSS: Anda dapat membuat halaman web yang responsif, yang artinya tampilan halaman akan menyesuaikan diri dengan ukuran layar perangkat yang digunakan, baik itu desktop, tablet, atau smartphone.
   • Tanpa CSS: Halaman web tidak dapat menyesuaikan diri dengan berbagai ukuran layar dan akan terlihat kacau atau tidak terbaca dengan baik pada perangkat selain desktop.

CSS (Cascading Style Sheets) memiliki fungsi penting dalam pengembangan web, terutama saat digunakan bersama HTML. Berikut adalah fungsi utama CSS pada HTML

1. Meningkatkan Tampilan Visual
CSS digunakan untuk mengatur warna, font, margin, padding, border, dan elemen-elemen visual lainnya pada halaman web.
2. Memisahkan Konten dan Tampilan
Dengan CSS, gaya visual dapat dipisahkan dari struktur konten yang ditulis dalam HTML. Ini membuat kode lebih terorganisir dan mudah dikelola.
3. Meningkatkan Konsistensi Desain
Dengan eksternal CSS, Anda dapat mengatur gaya untuk seluruh halaman web dalam satu file, sehingga memudahkan konsistensi desain di berbagai halaman.
4. Meningkatkan Efisiensi Pengembangan
Perubahan tampilan dapat dilakukan hanya dengan mengedit file CSS, tanpa perlu mengubah kode HTML setiap halaman.
5. Mendukung Responsivitas
CSS memungkinkan desain halaman web menjadi responsif, sehingga tampilannya tetap optimal di berbagai ukuran layar, termasuk perangkat desktop, tablet, dan ponsel.
6. Memberikan Efek Animasi dan Interaktif
Dengan CSS, Anda dapat menambahkan transisi, animasi, dan efek hover untuk meningkatkan pengalaman pengguna.

3. Jenis Penerapan CSS

Jenis penerapan CSS pada HTML terdiri dari tiga cara utama: Inline CSS, Internal CSS, dan Eksternal CSS. Berikut adalah penjelasan masing-masing

1. Inline CSS
Inline CSS ditulis langsung di dalam tag HTML menggunakan atribut style. Cara ini hanya berlaku untuk satu elemen.
2. Internal CSS
Internal CSS ditulis di dalam tag <style> yang berada di dalam tag <head> pada file HTML.
3. Eksternal CSS
Eksternal CSS disimpan dalam file terpisah dengan ekstensi .css dan dihubungkan ke file HTML menggunakan tag <link>.

4. Selector pada CSS

1. Selector Universal (*)
Menerapkan gaya ke semua elemen di halaman web.
2. Selector Tag
Memilih semua elemen dengan tag tertentu.
3. Selector ID (#)
Memilih elemen dengan atribut id tertentu. ID harus unik di setiap halaman.



Menuliskan CSS dengan menggunakan id sebagai selector



4. Selector Class (.)
Memilih elemen dengan atribut class. Satu class dapat digunakan oleh banyak elemen.





5. Selector Atribut
Memilih elemen berdasarkan atribut tertentu.



Sedangkan penulisan CSS dengan menggunakan atribut sebagai selector adalah sebagai berikut



6. Selector Descendant (Turunan)
Memilih elemen yang berada di dalam elemen terkait. Elemen turunan tersebut harus berada pada elemen induk yang sama.



Elemen div adalah parent atau induk dari tag p sehingga p adalah turunan dari tag div



7. Selector Grouping (Pengelompokan)
Menerapkan gaya yang sama pada beberapa elemen sekaligus.



8. Selector Pseudo-Class
Memilih elemen dalam keadaan tertentu, seperti ketika elemen di-hover atau di-klik.



Contoh lain dari Pseudo-class

Pseudo-Class	Deskripsi	Contoh
:hover	Memilih elemen saat pengguna menyorot elemen tersebut dengan kursor.	Hover pada baris ini.
:nth-child(odd)	Memilih elemen dengan urutan ganjil.	Baris ganjil ini memiliki warna berbeda.
:nth-child(even)	Memilih elemen dengan urutan genap.	Baris genap ini memiliki warna berbeda.
:first-child	Memilih elemen pertama di dalam elemen induknya.	Elemen ini adalah yang pertama dalam grup.
:last-child	Memilih elemen terakhir di dalam elemen induknya.	Elemen ini adalah yang terakhir dalam grup.

9. Selector Pseudo-Element
Memilih bagian tertentu dari elemen, seperti baris pertama atau sebelum/after elemen.



Contoh lain dari Pseudo-Element

Pseudo-Element	Fungsi	Properti yang Dapat Digunakan
::first-line	Memformat baris pertama teks dalam elemen.	font-family, font-size, font-style, font-variant, font-weight, color, background-color, word-spacing, letter-spacing, text-decoration, vertical-align
::first-letter	Memformat huruf pertama dalam elemen.	font-family, font-size, font-style, font-variant, font-weight, color, background-color, text-transform, float, text-decoration, vertical-align
::before	Menyisipkan konten sebelum elemen.	content, color, background-color, font-family, font-size, font-style, font-weight, margin, padding, border
::after	Menyisipkan konten setelah elemen.	content, color, background-color, font-family, font-size, font-style, font-weight, margin, padding, border
::placeholder	Memformat teks placeholder dalam elemen input.	color, font-family, font-size, font-style, font-variant, font-weight