Kalau kamu sudah belajar HTML maka tahapan selanjutnya adalah mempelajari CSS. Apa itu CSS? Temukan pengertian dan cara kerjanya di artikel ini. Show
Pengertian Singkat CSS
Kode-kode yang kita tulis di HTML tampilannya pasti sangat-sangat tidak menarik, nah untuk membuatnya lebih menarik seperti tampilan warna, background, font, maka kita bisa menambahkan kode-kode CSS. Sejarah CSSCSS sendiri dibuat pada tahun 96 oleh W3C (World Wide Web Consortium). Masalah awalnya yaitu dulu HTML tidak dilengkapi dengan tag untuk format halaman. Akhirnya dikenalkan lah tag <font> pada versi HTML 3.2 yang menyebabkan banyak masalah. Karena website mempunyai berbagai macam pilihan :
Maka kalau ditulis satu-satu di HTML prosesnya akan lebih lama dan kode akan menjadi lebih panjang. Itulah yang menyebabkan CSS lahir. HTML dan CSS BeriringanHTML dan CSS tidak akan terpisahkan dari dunia pengembangan web. Karena HTML merupakan bahasa markup atau disebut sebagai fondasi dari sebuah website sedangkan CSS akan memperindah style semua aspek yang sudah dibuat oleh HTML. Fungsi CSS Pada WebsiteBerikut ini adalah beberapa fungsi jika membangun website menggunakan CSS, yaitu : #1. Proses Desain Jadi Lebih CepatMembuat desain website hanya dengan HTML saja tentu akan sangat memakan waktu dan rumit. Oleh karenanya proses desain akan lebih cepat dan mudah jika dengan CSS. Dengan CSS kita bisa mengetikan satu kali fungsi saja untuk digunakan berbagai halaman HTML. Jadi hemat waktu, karena tanpa harus menyalin baris kode proses desain sudah bisa berjalan. #2. Loading Halaman Lebih CepatDengan CSS kita tidak perlu lagi menuliskan atribut tag HTML di setiap filenya. Kita cukup menulis satu aturan CSS lalu menerapkannya di berbagai file yang membutuhkan fungsi tersebut hanya dengan memanggilnya menggunakan kode tertentu. Nantinya satu file hanya terdapat sedikit baris kode, sehingga proses loading website menjadi lebih cepat. #3. Mudah di MaintenanceKarena terpisah dari HTML maka proses pemeliharaannya sangat mudah. Misalkan kita ingin update tampilan di halaman tertentu atau semua halaman website, maka tinggal ubah fungsi stylenya di file CSS saja. Otomatis pasti akan berubah. #4. Style Lebih BeragamKarena memang dikhususkan untuk mendesain tampilan HTML, maka fungsinya otomatis akan lebih beragam dibandingkan kita mendesain hanya dengan kode-kode HTML saja. #5. Responsive di Berbagai PerangkatTidak usah takut ketika menggunakan CSS website kita tidak bisa responsive. Karena CSS ini sudah kompatibel dengan berbagai perangkat. Memahami Cara Kerja CSSBagaimana cara kerja CSS? Berikut saya jelaskan secara singkat cara kerjanya. Kode HTMLBerikut adalah kode html yang digunakan untuk menampilkan paragraf. <p>Ini adalah paragraf!</p> Kode CSSJika tanpa kode CSS maka yang ditampilkan hanya tulisan “ ini adalah paragraf !” dengan font dan warna standar bawaan dari HTML. Nah, bagaimana supaya :
Caranya yaitu dengan menuliskan kode berikut pada CSS : p { color:blue; font-weight:bold; } Penjelasan :
Sampai sini bagaimana sudah paham cara kerja CSS? mudah sekali ya. PenutupItulah penjelasan singkat mengenai apa itu CSS disertai dengan fungsi dan cara kerjanya. Semoga bermanfaat dan jangan lupa share ke temanmu yang lainnya juga. Mengapa Menggunakan CSS?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.
Jelaskan apa saja kelebihan CSS dibandingkan HTML yang kalian ketahui?Lebih Lengkap Daripada HTML
Begitu juga dengan mengubah warna font. Namun, CSS jauh lebih lengkap daripada HTML. Hal ini karena CSS memang didesain untuk mempercantik website. Sehingga, atributnya pun lebih lengkap.
Apa hubungan HTML dan CSS dalam Desain website?HTML (HyperText Markup Language) adalah bahasa markup standar untuk membuat halaman web dan aplikasi web. CSS (Cascading Style Sheet) adalah bahasa lembar gaya yang digunakan untuk menggambarkan penyajian dokumen yang ditulis dalam bahasa markup seperti HTML.
|