Untuk mempelajari dunia pemrograman web, Bahasa Pemrograman HTML dan CSS adalah bagian tak terpisahkan dari website. HTML digunakan untuk membuat konten atau kerangka logis dari halaman web sedangkan CSS digunakan untuk mengatur tampilan dari website seperti warna dan font yang digunakan.
Belajar CSS Dasar dan lanjutan
Apa itu CSS?
- CSS adalah singkatan dari Cascading Style Sheets
- CSS menjelaskan bagaimana elemen HTML akan ditampilkan di layar, kertas, atau di media lain
- CSS menghemat banyak pekerjaan. Hal ini dapat mengontrol tata letak beberapa halaman web sekaligus.
- Stylesheet eksternal disimpan dalam file CSS
Berikut ini referensi materi belajar CSS dasar dan lanjutan yang bisa anda pelajari- CSS Reference
- CSS Selectors
- CSS Functions
- CSS Reference Aural
- CSS Web Safe Fonts
- CSS Animatable
- CSS Units
- CSS PX-EM Converter
- CSS Color & Values
- CSS Default Values
- CSS Browser Support
- CSS Templates
- CSS Snippets
- CSS Reference
- CSS Selectors
- CSS Functions
- CSS Reference Aural
- CSS Web Safe Fonts
- CSS Animatable
- CSS Units
- CSS PX-EM Converter
- CSS Color & Values
- CSS Default Values
- CSS Browser Support
- CSS Templates
- CSS Snippets
Mengapa belajar CSS?
Tanpa CSS, setiap halaman web akan menjemukan teks biasa dan gambar yang mengalir lurus ke bawah halaman. Dengan CSS, Anda dapat menambahkan gambar warna dan latar belakang dan mengubah tata letak halaman Anda - halaman web Anda bisa terasa seperti karya seni!
Seperti yang sudah dijelaskan diatas CSS adalah bahasa yang kita gunakan untuk menata halaman Web.
CSS digunakan untuk menentukan gaya untuk halaman web Anda, termasuk desain, tata letak dan variasi tampilan untuk berbagai perangkat dan ukuran layar.
Cascading Style Sheets, yang lebih dikenal sebagai CSS, adalah proses desain yang sangat sederhana yang digunakan untuk membuat halaman web jauh lebih rapi.
CSS memungkinkan Anda untuk menempatkan gaya untuk menyesuaikan halaman web Anda. Bagian terbaik tentang memanfaatkan fitur styling ini adalah bahwa CSS independen dari cara HTML membuat halaman web.
Perbedaan dasar antara Hypertext Markup Language dan Cascading Style Sheets adalah bahwa yang pertama terutama dikenal untuk memberikan cara struktural lanskap ke halaman web sementara yang pertama dimaksudkan untuk memberikan pengkodean warna yang kuat dan teknik styling. Ini digunakan untuk mengontrol tata letak lebih dari satu halaman web sekaligus. Semua stylesheet eksternal disimpan dalam bentuk file CSS.
Komponen Utama CSS
Di Bagian Di Atas, kami telah mempelajari Pengantar CSS, Jadi sekarang kami akan melanjutkan dengan komponen utama CSS seperti di bawah ini:
1. Mudah dipelihara: Jika Anda dimaksudkan untuk membuat perubahan global, cukup ubah gaya, dan Anda dapat melihat semua elemen lain di semua halaman web lainnya diperbarui secara otomatis.
2.CSS menghemat waktu: Anda cukup menulis skrip sekali dan menggunakan kembali lembar yang sama dengan waktu yang Anda inginkan.
3. Gaya superior ke ujung depan asli: CSS memiliki susunan atribut dan daftar yang relatif lebih luas jika dibandingkan dengan HTML. Oleh karena itu halaman HTML dapat memiliki tampilan dan nuansa yang lebih cerah jika dibandingkan dengan atribut HTML normal.
4. Kemudahan dengan Mesin Pencari: CSS dianggap sebagai lembar styling yang sangat nyaman dan mudah dibaca. Ini berarti bahwa mesin pencari tidak perlu berusaha keras dalam mencoba membaca teks.
5. Penyimpanan cache yang efisien: CSS dapat digunakan untuk menyimpan aplikasi web secara lokal dengan bantuan mekanisme cache offline yang dapat digunakan untuk melihat situs web offline.
Karakteristik CSS
Saat kita membahas pengenalan CSS dan komponennya. Sekarang kita akan belajar tentang karakteristik CSS. Karakteristik utama CSS termasuk aturan styling yang ditafsirkan oleh browser klien dan diterapkan ke berbagai elemen dalam dokumen Anda. Karakteristik utama meliputi:
- Aturan gaya terdiri dari komponen pemilih dan komponen blok deklarasi.
- Pemilih digunakan untuk menunjuk ke komponen HTML yang ingin Anda dapatkan ditata.
- Di dalam blok deklarasi, satu atau lebih deklarasi terkandung bersama dengan titik koma.
- Setiap deklarasi yang ditempatkan memiliki nama properti CSS, titik koma, dan nilai. Misalnya, warna adalah properti, dan nilainya berwarna merah. Ukuran font adalah properti, dan 15px adalah nilainya.
- Deklarasi CSS diakhiri dengan titik koma, dan blok-blok ini dikelilingi oleh kawat gigi keriting.
- Penyeleksi CSS adalah yang digunakan untuk menemukan elemen HTML yang didasarkan pada nama elemen, id, atribut, kelas, dan banyak lagi.
- Satu elemen unik akan dipilih oleh ID elemen.
- Jika Anda ingin memilih elemen tertentu dengan id tertentu, fungsi # bersama dengan atribut id harus digunakan.
- Jika Anda ingin memilih elemen dengan kelas tertentu, karakter periode dan kelas nama harus ditulis.
- Pemilih universal: Jika Anda tidak tertarik untuk memilih elemen dari jenis tertentu, pemilih universal hanya cocok dengan nama elemen.
- Pemilih elemen: Pemilih ini memilih elemen berdasarkan nama elemen.
- Pemilih keturunan: Ketika elemen tertentu terletak di dalam elemen lain, maka itu disebut sebagai pemilih keturunan.
- Pemilih ID: Pemilih ini menggunakan id elemen HTML sehingga elemen tertentu dapat dipilih.
- Pemilih kelas: Ini memilih elemen dengan atribut kelas tertentu.
- Pemilih pengelompokan: Ini akan menjadi pilihan yang baik untuk mengelompokkan pemilih untuk meminimalkan kode. Setiap pemilih, bersama dengan koma, harus digunakan untuk mengelompokkan pemilih.
Aplikasi CSS
Setelah mempelajari Pengenalan CSS dan karakteristik CSS, kita akan mempelajari penerapan CSS. Ada tiga cara HTML mengakses CSS:
1. Inline
Style sheet sebaris hanya digunakan untuk memengaruhi tag yang ada. Ini pada dasarnya berarti bahwa detail kecil pada halaman dapat diubah tanpa mengubah tata letak keseluruhan halaman atau semua yang ada di halaman. Ini menguntungkan seolah-olah Anda memiliki semuanya di halaman eksternal, maka Anda akan diminta untuk menambahkan tag tambahan untuk mengubah detail. Inline overrules eksternal, yang berarti bahwa detail kecil dapat diubah. Ini juga overrules internal.
2. Internal
Internal hanya akan digunakan ketika Anda ingin menambahkan perubahan kecil dalam tag tunggal. Ini karena inline hanya mempengaruhi satu tag yang terkandung di dalamnya, sedangkan styling internal diletakkan di kepala dokumen HTML. Ini berarti bahwa jika Anda ingin menyesuaikan halaman, semua perubahan yang diperlukan akan terlihat hanya dengan menggulir. Styling internal ditempatkan di dalam tag. Secara komparatif, ini terlihat lebih rapi, sederhana, elegan dan terorganisir karena gaya dan penandaan yang terpisah.
3. Eksternal
Stylesheet eksternal digunakan untuk memungkinkan orang memformat dan membuat ulang halaman web mereka pada dokumen yang sama sekali berbeda. Ini secara efektif berarti bahwa Anda dapat memiliki dua atau lebih tempat kerja, karena lebih dari satu stylesheet dapat disematkan di dalam dokumen, sehingga memberi Anda ruang kerja yang jauh lebih bersih. Stylesheet akan mudah diakses dalam hal ini yang merupakan keuntungan besar, tetapi di sisi lain, setiap perubahan yang dilakukan pada lembar eksternal akan mempengaruhi semua lembar induk yang terkait dengannya.
Kelebihan dan Kekurangan CSS
Di bawah ini adalah kelebihan dan kekurangan:
Keuntungan
Di bawah ini adalah keuntungan yang disebutkan:
- Kompatibilitas Perangkat
- Kecepatan situs web lebih cepat
- Mudah dipelihara
- Perubahan yang konsisten dan spontan
- Kemampuan untuk memposisikan kembali
- Meningkatkan kemampuan mesin pencari untuk merayapi halaman web
Kerugian
Di bawah ini adalah kerugiannya:
- Masalah terkait lintas browser
- Rentan
- Masalah karena beberapa level
- Kurangnya keamanan
- Fragmentasi
Pertama, Anda akan membuat aplikasi foto kucing untuk mempelajari dasar-dasar HTML dan CSS. Kemudian, Anda akan mempelajari teknik modern seperti variabel CSS dengan membangun penguin, dan praktik terbaik untuk aksesibilitas dengan membangun formulir web.
Kesimpulan
CSS atau Cascading Style Sheets adalah bahasa yang digunakan untuk menata frontend situs web apa pun. CSS adalah teknologi landasan dari World Wide Web, bersama HTML dan JavaScript.