Apa itu CSS (Cascading Style Sheets)
Admin - 19 November 2020
Apa itu CSS (Cascading Style Sheets) - Dalam dunia website design dan dunia programing website, setelah mengetahui apa itu HTML saatnya melengkapi pengetahuan anda dengan mengenal apa itu CSS. CSS adalah singkatan dari Cascading Style Sheets, yang berisikan rangkaian instruksi yang menentukan bagaimana suatu text akan tertampil di halaman sebuah website
Perancangan desain text dapat dilakukan dengan mendefinisikan fonts (huruf) , colors (warna), margins (ukuran), latar belakang (background), ukuran font (font sizes) dan lain-lain. Elemen-elemen seperti colors (warna) , fonts (huruf), sizes (ukuran) dan spacing (jarak) disebut juga “styles”.
Cascading Style Sheets juga bisa berarti meletakkan styles yang berbeda pada layers (lapisan) yang berbeda. CSS terdiri dari style sheet yang memberitahukan browser bagaimana suatu dokumen akan disajikan. Fitur-fitur baru pada halaman web lama dapat ditambahkan dengan bantuan style sheet. Saat menggunakan CSS, Anda tidak perlu menulis font, color atau size pada setiap paragraf, atau pada setiap dokumen. Setelah Anda membuat sebuah style sheet, Anda dapat menyimpan kode tersebut sekali saja dan dapat kembali menggunakannya bila diperlukan.
Keuntungan Menggunakan CSS
CSS memberikan keseragaman pada halaman web. Dengan CSS dapat menghemat banyak waktu dan pekerjaan berulang. Saat menggunakan CSS, perubahan tidak perlu dilakukan dalam setiap halaman web. Anda hanya perlu membuat perubahan dalam style sheet. CSS memungkinkan Anda untuk memuat halaman web Anda dengan mudah. Layers (Lapisan), seperti item pop-up, dapat digunakan dalam dokumen. CSS membantu Anda memelihara halaman web Anda dengan mudah dan efektif.
Rules
CSS selalu dimulai dengan tag <style> dan diakhiri dengan </style> CSS bisa dibagi 2 yaitu CSS Internal dan CSS eksternal
Contoh penggunaan CSS
<html>
<head>
<title>Contoh penggunaan CSS</title>
<style type="text/css">
b { color : lime }
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, <b>sed do eiusmod tempor</b> incididunt ut labore et dolore magna aliqua.</p>
</body>
</html>
Penjelasan
b {color: lime} dikenal sebagai "Style Rule" atau peraturan/perintah css, yang mana terdiri dari dua elemen dasar yaitu : "selector" dan "declaration“, sebuah "selector" biasanya adalah tag HTML (dalam hal ini b), sementara "declaration" adalah satu atau beberapa perintah/nilai dari css yang menunjukkan type bentuk yang diaplikasikan pada selector. Declaration ini biasanya di tandai dengan kurung kurawal, dan perintah/nilai css yang berbeda dipisahkan satu dengan yang lain dengan menggunakan titik-koma, Pasti bingung? Lihat hasil dari penggunaan HTML + CSS pada gambar dibawah ini:
Dapat dilihat pada gambar bawah pengunaan tag HTML <b> atau pada contoh "<b>sed do eiusmod tempor</b>" diatur oleh sebuah nilai pada CSS itu sendiri b {color: lime}. Masih banyak yang akan kami bahas mengenai CSS, HTML dan JS ataupun PHP. Tunggu terus artikel terbaru dari kami. Salam sehat.
