 |
| CSS |
Masih ingat dengan HTML ? Bahasa pengkodean yang berfungsi sebagai dasar untuk semua pengembangan web? Nah, jika HTML adalah bahasa pertama yang ingin Anda pelajari ketika Anda tertarik untuk membangun situs web , CSS ini adalah ibaratnya adalah saudaranya.
Definisi ini menjelaskan arti CSS (cascading style sheets) dan bagaimana menggunakannya dengan halaman HTML adalah praktik terbaik pengembangan antarmuka pengguna (UI) yang sesuai dengan pemisahan pola desain yang menjadi perhatian.
Pengertian CSS
C asing S tyle S heets, yang akrab disebut sebagai CSS, adalah bahasa desain sederhana yang dimaksudkan untuk menyederhanakan proses pembuatan halaman web yang layak.
CSS menangani tampilan dan nuansa bagian dari halaman web. Dengan menggunakan CSS, Anda dapat mengontrol warna teks, gaya font, jarak antar paragraf, bagaimana ukuran kolom dan tata letak, gambar latar atau warna apa yang digunakan, desain tata letak, variasi tampilan untuk berbagai perangkat dan ukuran layar serta berbagai efek lainnya.
CSS mudah dipelajari dan dipahami tetapi memberikan kontrol yang kuat atas penyajian dokumen HTML. Paling umum, CSS dikombinasikan dengan bahasa markup HTML atau XHTML.
Definisi CSS
CSS adalah mekanisme standar dan pilihan untuk memformat halaman HTML .
Sesuai dengan pemisahan pola desain perhatian dan praktik terbaik, lembar gaya kaskade menyediakan lokasi pusat di mana informasi tentang berbagai font, warna latar depan, warna latar belakang, cetak miring, dan penekanan harus diterapkan ke berbagai elemen HTML dalam halaman web. Lembaran gaya Cascading juga dapat mengontrol bagaimana berbagai bagian halaman, seperti header, footer, isi, isi artikel, bagian dan selainnya, diletakkan pada halaman. Ini sangat membantu ketika konten harus ditata dengan cara yang sangat berbeda tergantung pada apakah itu dilihat di desktop, tablet atau smartphone.
 |
| Anatomi dari CSS |
Penggunaan CSS yang benar
Pada hari-hari awal World Wide Web ( WWW ) , sudah umum file HTML tidak hanya menyertakan bahasa markup dan konten, tetapi juga memformat informasi dan JavaScript. Ini membuat laman web sulit ditulis, sulit dibaca, sulit diperbarui, dan sulit dikelola. Saat web semakin matang, menjadi praktik terbaik untuk membagi HTML, membuat skrip konten dan informasi gaya menjadi file yang terpisah dan mudah dirawat. Dengan demikian, halaman web modern biasanya terdiri dari tiga entitas terpisah: lembar gaya berjenjang, file JavaScript, dan file HTML itu sendiri.
Keuntungan CSS
CSS menghemat waktu - Anda dapat menulis CSS sekali dan kemudian menggunakan kembali sheet yang sama di beberapa halaman HTML. Anda dapat menentukan gaya untuk setiap elemen HTML dan menerapkannya ke halaman Web sebanyak yang Anda inginkan.
Memuat halaman lebih cepat - Jika Anda menggunakan CSS, Anda tidak perlu menulis atribut tag HTML setiap kali. Cukup tulis satu aturan CSS dari sebuah tag dan terapkan pada semua kemunculan tag itu. Jadi lebih sedikit kode berarti waktu pengunduhan yang lebih cepat.
Perawatan mudah - Untuk membuat perubahan global, cukup ubah gaya, dan semua elemen di semua halaman web akan diperbarui secara otomatis.
Gaya unggul ke HTML - CSS memiliki array atribut yang jauh lebih luas daripada HTML, sehingga Anda dapat memberikan tampilan yang jauh lebih baik ke halaman HTML Anda dibandingkan dengan atribut HTML.
Kompatibilitas Beberapa Perangkat - Lembar gaya memungkinkan konten dioptimalkan untuk lebih dari satu jenis perangkat. Dengan menggunakan dokumen HTML yang sama, berbagai versi situs web dapat disajikan untuk perangkat genggam seperti PDA dan ponsel atau untuk dicetak.
Standar web global - Sekarang atribut HTML sedang tidak digunakan dan direkomendasikan untuk menggunakan CSS. Jadi ide yang baik untuk mulai menggunakan CSS di semua halaman HTML untuk membuatnya kompatibel dengan browser masa depan.
Siapa yang Membuat dan Memelihara CSS?
CSS dibuat dan dikelola melalui sekelompok orang dalam W3C yang disebut Kelompok Kerja CSS. Kelompok Kerja CSS membuat dokumen yang disebut spesifikasi. Ketika spesifikasi telah dibahas dan secara resmi diratifikasi oleh anggota W3C, itu menjadi rekomendasi.
Spesifikasi yang diratifikasi ini disebut rekomendasi karena W3C tidak memiliki kendali atas implementasi bahasa yang sebenarnya. Perusahaan dan organisasi independen membuat perangkat lunak itu.
CATATAN - Konsorsium World Wide Web, atau W3C adalah kelompok yang membuat rekomendasi tentang cara kerja Internet dan bagaimana internet harus berkembang.
Apa itu CSS? Dan Bagaimana Hubungannya dengan HMTL?
CSS adalah singkatan dari Cascading Style Sheets dengan penekanan pada “Style.” Sementara HTML digunakan untuk menyusun dokumen web (mendefinisikan hal-hal seperti berita utama dan paragraf, dan memungkinkan Anda untuk menyematkan gambar, video, dan media lainnya), CSS hadir dan menentukan gaya dokumen Anda — tata letak halaman, warna, dan font semuanya ditentukan dengan CSS. Pikirkan HTML sebagai fondasi (setiap rumah memiliki satu), dan CSS sebagai pilihan estetika (ada perbedaan besar antara rumah bergaya Victoria dan rumah modern abad pertengahan).
Bagaimana cara kerja CSS?
CSS menghadirkan gaya ke halaman web Anda dengan berinteraksi dengan elemen HTML. Elemen adalah komponen HTML individual dari sebuah halaman web — misalnya paragraf — yang dalam HTML mungkin terlihat seperti ini:
Jika Anda ingin membuat paragraf ini tampak merah muda dan tebal kepada orang-orang yang melihat halaman web Anda melalui browser web, Anda akan menggunakan kode CSS yang terlihat seperti ini:
Dalam hal ini, "p" (paragraf) disebut "selector" - itu adalah bagian dari kode CSS yang menentukan elemen HTML mana yang akan dipengaruhi oleh style CSS. Dalam CSS, pemilih ditulis di sebelah kiri braket keriting pertama. Informasi antara kurung keriting disebut deklarasi, dan berisi properti dan nilai yang diterapkan ke pemilih. Properti adalah hal-hal seperti ukuran font, warna, dan margin, sedangkan nilai adalah pengaturan untuk properti tersebut. Dalam contoh di atas, "warna" dan "font-weight" adalah properti, dan "pink" dan "tebal" adalah nilai. Set bracketed penuh.
adalah deklarasi, dan sekali lagi, "p" (artinya paragraf HTML) adalah pemilih. Prinsip-prinsip dasar yang sama ini dapat diterapkan untuk mengubah ukuran font, warna latar belakang, lekukan margin, dan banyak lagi. Contohnya :
akan membuat latar belakang halaman Anda biru muda, atau
akan membuat paragraf font 20 poin dengan huruf merah.
CSS Eksternal, Internal, atau Inline?
Anda mungkin bertanya-tanya bagaimana kode CSS ini sebenarnya diterapkan pada konten HTML. Sama seperti HTML, CSS ditulis dalam teks sederhana dan sederhana melalui editor teks atau pengolah kata di komputer Anda, dan ada tiga cara utama untuk menambahkan kode CSS ke halaman HTML Anda. Kode CSS (atau Style Sheets) dapat berupa eksternal, internal, atau inline. Lembar gaya eksternal disimpan sebagai file .css dan dapat digunakan untuk menentukan tampilan seluruh situs web melalui satu file (daripada menambahkan setiap contoh kode CSS ke setiap elemen HTML yang ingin Anda sesuaikan). Untuk menggunakan lembar gaya eksternal, file .html Anda harus menyertakan bagian tajuk yang tertaut ke lembar gaya eksternal dan terlihat seperti ini:
Ini akan menautkan file .html ke style sheet eksternal Anda (dalam hal ini, mysitestyle.css), dan semua instruksi CSS dalam file itu kemudian akan berlaku untuk halaman .html Anda yang ditautkan.
Sheet style internal adalah instruksi CSS yang ditulis langsung ke header halaman .html tertentu. (Ini sangat berguna jika Anda memiliki satu halaman di situs yang memiliki tampilan unik.) Lembar gaya internal terlihat seperti ini. . .
Warna latar belakang thistle dan paragraf dengan 20 titik, font biru sedang sekarang akan diterapkan ke halaman .html tunggal ini.
Akhirnya, Sheet style Inline adalah potongan-potongan CSS yang ditulis langsung ke dalam kode HTML, dan hanya berlaku untuk turunan kode tunggal. Sebagai contoh:
akan menyebabkan satu judul khusus pada satu halaman .html muncul dalam warna ungu, 40 poin.
Secara umum, style sheet eksternal adalah metode yang paling efisien untuk mengimplementasikan CSS di situs web (lebih mudah untuk melacak dan mengimplementasikan style situs dari file CSS khusus), sementara style sheet internal dan style inline dapat digunakan pada suatu case oleh dasar kasus ketika perubahan gaya individu perlu dilakukan.
Jadi jika HTML adalah fondasi, bingkai, dinding, dan balok penopang yang mendukung situs web Anda, pertimbangkan CSS warna cat, gaya jendela, dan lansekap yang muncul setelahnya. Anda tidak bisa sampai di mana pun tanpa meletakkan fondasi terlebih dahulu, tetapi — begitu Anda melakukannya — Anda ingin menindaklanjuti dengan gaya tertentu, dan CSS adalah tiket untuk melepaskan dekorator batin Anda.