Tutorial CSS Lengkap Pemula
Assalamualaikum wr wb, baik kembali lagi disini yang menjelaskan seputar web programming dengan penjelasan yang mudah dipahami & ramah bagi pemula. Pada pembahasan kali ini saya akan mebahas mengenai materi CSS lengkap yang merupakan lanjutan dari HTML, jadi bagi kamu yang belum membaca atau mempelejari apa itu HTML silahkan pelajari terlebih dahulu untuk memulai pembahasan ini.
Apa saja yang dipelajari pada pembahasan kali ini? berikut :
- Apa itu CSS?
- Sejarah Singkat CSS
- Fungsi CSS
- Atutan Penulisan CSS
- Case Sensitivity
- Baris komentar
- cara menghubungkan css
CSS (Cascading Style Sheets) adalah bahasa pemrograman yang digunakan untuk mengatur tampilan dan layout elemen-elemen di halaman web. CSS memungkinkan untuk mengubah warna, ukuran font, margin, padding, dan banyak lagi, sehingga kita dapat merancang tampilan yang menarik. Namun CSS juga tidak bisa berdiri sendiri, ia perlu HTML yang menjadi komponen dasar dari web tersebut.
2. Sejarah Singkat CSS
CSS (Cascading Style Sheets) pertama kali diperkenalkan oleh Håkon Wium Lie dan Bert Bos pada tahun 1996. Tujuan utamanya adalah untuk memisahkan tampilan dari struktur dokumen HTML. Versi pertama CSS, CSS1, digunakan untuk mengatur gaya dasar seperti warna, font, dan tata letak. Seiring berjalannya waktu, perkembangan CSS terus berlanjut dengan penambahan fitur dan peningkatan kinerja. CSS2 dirilis pada tahun 1998 dengan tambahan pilihan gaya yang lebih luas, termasuk tata letak lebih lanjut dan kontrol terhadap media cetak. Pada tahun 1999, CSS2.1 menjadi rekomendasi resmi dari W3C (World Wide Web Consortium). Kemudian, CSS3, yang dirilis secara bertahap dari tahun 1999 hingga 2017, membawa banyak fitur baru seperti animasi, transisi, media queries untuk responsif, dan lebih banyak lagi. CSS menjadi bagian integral dari pengembangan web modern, memungkinkan pengembang untuk menciptakan tampilan yang menarik dan responsif dengan lebih efisien.
Berikut fungs CSS:
- Mengatur Tampilan: Fungsi utama CSS adalah mengatur tampilan dan gaya halaman web. Dengan CSS, Anda dapat mengubah warna, font, ukuran, jarak, dan tata letak elemen HTML, sehingga menciptakan tampilan visual yang menarik dan konsisten.
- Memisahkan Gaya dari Struktur: Dengan menggunakan CSS, Anda dapat memisahkan gaya (styling) dari struktur konten (HTML). Ini memungkinkan pengembang untuk mengelola tampilan secara terpisah dari konten, sehingga memudahkan pemeliharaan dan meningkatkan fleksibilitas.
- Mendukung Responsif: CSS juga digunakan untuk membuat tampilan responsif yang dapat beradaptasi dengan berbagai perangkat dan ukuran layar. Dengan media queries, Anda dapat mengatur gaya yang berbeda berdasarkan resolusi layar, memastikan tampilan yang optimal pada perangkat mobile, tablet, dan desktop.
- Animasi dan Transisi: CSS mendukung animasi dan transisi, memungkinkan Anda untuk menciptakan efek visual yang menarik dan interaktif tanpa menggunakan JavaScript.
- Peningkatan Aksesibilitas: Dengan CSS, Anda dapat mengoptimalkan pengalaman pengguna untuk aksesibilitas, seperti meningkatkan kontras warna untuk pembaca layar, mengatur tata letak yang baik untuk navigasi dengan keyboard, dan lainnya.
- Efisiensi Halaman Web: Menggunakan CSS memungkinkan Anda menggaya banyak elemen dengan sedikit kode, yang dapat mengurangi ukuran file halaman web dan mempercepat waktu pemuatan.
Secara keseluruhan, CSS merupakan alat penting dalam pengembangan web yang memungkinkan Anda mengendalikan tampilan dan gaya halaman dengan lebih efisien, membuat situs web lebih menarik, responsif, dan mudah diakses oleh pengguna.
Pembahasan pertama yang akan kita bahas ini adalah aturan penulisan css, ada 4 aturan cara dalam penulisan css...apa itu? ialah selector, declaraation, property dan value. Itu semua adalah inti dari penulisan css hampir semua kode pembuatannya menggunakan itu. Lalu apa yang dimaksud keempat aturan itu?? agar lebih memahaminya perhatikan contoh berikut :
Baik akan saya bahas kode diatas semua, yang pertama ada kode "h1" merupakan sebuah selector yang berfungsi untuk mencari tag atau element "h1" yang ada di dalam body yang ingin di jadikan style. Kemudian ada simbol kurung kurawal buka dan tutup meruapakan declaration adalah kumpulan aturan style CSS yang di dalamnya berisi kode property dan valuenya. Selanjutnya yang ketiga ada color merupakan sebuah property untuk memberi style, disitu terdapat sebuah property color yang merupakan untuk memberi warna pada selector yg ingin di style. Sebenarnya terdapat 100 an property lebih selain color, tapi di dalam kode diatas saya hanya menggunakan satu saja sebagai contoh. Yang terakhir adalah value...yap kalian bisa memahaminya sendiri apa itu value, merupakan sebuah nilai dari property. Disitu saya meng-style selector atau tag h1 dengan warna merah.
5. Case Sensitivity
Case sensivity adalah istilah mengacu pada perbedaan antara huruf kapital (huruf besar) dan huruf kecil dalam suatu sistem komputer, bahasa pemrograman, atau aplikasi perangkat lunak. untuk lebih memahaminya perhatikan contoh kode dibawah berikut:
Perhatikan contoh kode diatas, Keduanya berfungsi untuk mengubah warna pada element atau tag "h1" menjadi warna merah. Inilah yang dimaksud dengan Case Sensitivity yang artinya tidak membedakan antara huruf besar dan huruf kecil. Walaupun demikian, terdapat beberapa kasus dimana huruf besar dan kecil akan dibedakan. Ini sebenarnya bukan terletak pada CSS, tapi di HTML. Dalam HTML, penulisan atribut class bersifat case sensitif seperti contoh berikut:
Pada kode HTML di baris 15 dan 16 saya menulis 2 buah atribut class dengan nilai "Heading" dan "heading". Hasilnya hanya 1 heading yang akan berwarna merah. Ini terjadi karena penulisan atribut class di HTML akan membedakan huruf besar atau huruf kecil (case-sensitif). Cara yang paling disarankan adalah, selalu gunakan huruf kecil untuk semua penulisan selector, property dan value CSS. Jika ingin menggunakan nama atribut terdiri dari 2 kata atau lebih, gunakan tanda dash " - " seperti: judul_satu atau judul_dua.
6. Baris Komentar
Baris komentar berfungsi untuk membuat keterangan pada sebuah kode atau lebih tepatnya menerangkan dari fungsi kode itu sendiri. Komentar tidak akan diproses oleh web browser, jika sebuah kode diberikan komentar maka kode tersebut tidak akan di jalan, untuk lebih memahaminya perhatikan contoh kode dibawah berikut:
7. Cara Menghubungkan CSS
Terdapat 3 cara dalam menghubungkan CSS, yaitu inline CSS, internal CSS dan external CSS. Berikut penjelasan lengkap ketiganya :
- Inline CSS
Cara penerapan menghubungkan CSS ini langsung di dalam tag HTML menggunakan atribut style. Sebagai contoh, untuk memberi warna sebuah heading & paragra menjadi merah bisa menulis kode berikut:
- Internal CSS
Cara kedua dalam menghubungkan CSS yakni internal style CSS. Untuk menggunakannya, seluruh kode CSS ditulis di dalam dalam tag <style> pada bagian <head> . Berikut contoh penggunaan dari internal style CSS:
- External CSS
Cara penggunaan external style CSS adalah secarah terpisah itu artinya kode CSS harus memiliki file tersendiri, yang kita praktekkan sebelumnnya menerapkannya dalam satu file saja . Agar lebih mudah dipahami langsung saja kita praktek dengan contoh kode program. Silahkan buat satu file teks baru dengan nama style.css menggunakan text editor favorite anda disini saya selalu menggunakan Vscode, kemudian ketik kode berikut:
*file html
*file CSS
Perhatikan kedua file & kode diatas, untuk menerapkan external CSS menggunakan tag <link> di dalam file html pada baris ke 8 tersebut untuk menghubungkannya ke file css. Baik sekian dulu pembahasan dasar penulisan & penggunaan CSS, dalam pembahasan selanjutnya saya akan membahas Selector. Semoga apa yang saya bahas ini bisa bermanfaat dan menambah wawasan anda dan saya akhiri asalamualaikum wr wb terimakasih...
