Tutorial CSS Untuk Pemula : Pengenalan Dasar CSS
Tutorial CSS Untuk Pemula Part 1 - CSS (Cascading Style Sheet) sendiri merupakan bahasa pemrograman yang dikembangkan oleh W3C (World Wide Web Consurtium) yang digunakan untuk mengontrol atau mengatur tampilan dari sebuah halaman web agar lebih rapih dan terstruktur. File CSS dapat diterapkan bersama-sama dengan dokumen HTML maupun secara terpisah. Di samping itu dokumen CSS dapat diaplikasikan di dokumen lain seperti halnya XML.
Tujuan utama dibuatnya CSS yaitu untuk memisahkan konten dan juga tampilan dari sebuah halaman web, dengan demikian kita dapat membuat beberapa dokumen yang berbeda tanpa harus membuat ulang desain dari tampilan dokumen tersebut dari awal.
Dengan menggunakan CSS kita dapat dengan mudah mendesain sebuah halaman web dengan sangat rapih dan juga enak dilihat. Sebagai contoh kita dapat menggunakan bahasa pemrograman CSS untuk mengatur tampilan dari teks, warna latar, gambar, tabel, paragraf hingga tata letak dari halaman web.
Mengapa harus CSS ?
Sebuah halaman web ada baiknya memisahkan antara konten dan tampilan dari sebuah halaman web. Hal tersebut berarti informasi yang ada di website harus berada pada halaman HTML, tetapi halaman HTML ada baiknya tidak berisi “cara” untuk menampilkan informasi tersebut. Adapun cara yang paling baik untuk menampilkan halaman yang berisi informasi tersebut adalah dengan menggunakan CSS.
Penulisan HTML untuk penentuan style pada setiap elemen pada halaman web memang sih cukup melelahkan dan menghabiskan banyak waktu. Sebagai contoh jika anda menginginkan setiap heading pada halaman web menggunakan jenis huruf Courier dan setiap subset pada heading menggunakan jenis huruf Arial, misalnya anda akan membuat 100 halaman web, maka bisa dibayangkan jika sobat tidak menggunakan CSS, sobat akan terus menulis ulang setiap format style tersebut pada setiap heading 100 halaman web tersebut.
Manfaat dari CSS
Adapun keuntungan yang didapat ketika anda menerapkan kode CSS pada halaman web yaitu :
- Lebih mudah mengutak-atik dan memperbaharui tampilan halaman web
- Konsistensi dalam mendesain sebuah halaman web
- Ukuran file yang kecil sehingga menjadi ringan dan mudah digunakan
- Tampilan web terlihat lebih apik dan rapih
- Dapat digunakan bersama-sama dengan dokumen lain seperti XML dan XHMTL
- Dapat diakses di segala jenis peramban (browser)
Struktur penulisan CSS
CSS bekerja dengan menggunakan 2 buah elemen penting untuk memformat tampilan, yaitu terdiri dari elemen selektor dan deklarator. Dua buah elemen ini berfungsi sebagai penentu format tampilan dan lainnya menempatkan format tampilan tersebut.
Deklarator berisi beberapa perintah-perintah CSS untuk menentukan format tampilan dari sebuah elemen pada halaman web. Sedangkan selektor adalah sebuah perintah lanjutan dari deklarator dan berfungsi menempatkan format tampilan dari deklarator pada halaman web.
Berikut ini adalah contoh struktur penulisan CSS
body {
font-family: sans-serif;
line-height: 1.5;
background-color: #f4f4f4;
}Barisan code di atas merupakan sebuah statement dalam sebuah dokumen style sheet. Selektor dari statement ini adalah body. Yang artinya statement atau perintah ini merujuk pada elemen <body> pada setiap halaman web yang terhubung dengan style sheet ini.
Code di atas mempunyai deklarator dengan 3 properti (font-family, line-height, background-color). Ini artinya setiap elemen yang dipilih oleh selektor ini akan berpengaruh pada tiga properti tersebut.
Demikian sampai sini dulu penjelasan mengenai Pengenalan dasar CSS, dan untuk materi berikutnya akan di bahas di postingan berikutnya. Terima kasih
Comments
Post a Comment