Pengertian dan Pengenalan CSS 3

15

Apa itu CSS?

CSS adalah singkatan dari Cascading Style Sheets. CSS merupakan kumpulan kode-kode yang bertujuan untuk menghias dan mengatur gaya tampilan/layout halaman web supaya lebih elegan dan menarik.

Mengapa Menggunakan CSS?

CSS digunakan untuk menentukan gaya untuk halaman web Anda, termasuk desain, tata letak, dan variasi tampilan untuk berbagai perangkat dan ukuran layar.

Sebelum menggunakan CSS, semua stylizing harus disertakan ke dalam markup HTML. Itu berati Anda harus mendeskripsikan semua background, warna font, alignment, dan lain-lain secara terpisah.

Dengan CSS, Anda dapat mengatur tampilan semua aspek pada file yang berbeda, lalu menentukan style, kemudian mengintegrasikan file CSS di atas markup HTML. Alhasil, markup HTML bisa lebih mudah di-maintain.

Singkatnya, dengan CSS, Anda tidak perlu mendeskripsikan tampilan dari masing-masing elemen secara berulang-ulang. Anda tidak membuang-buang waktu, kode yang digunakan pun lebih singkat, dan error dapat diminimalisir.

Karena opsi kustomisasi yang ada hampir tak terbatas, CSS memungkinkan Anda untuk menerapkan berbagai macam style pada satu halaman HTML.

Ada berbagai rule yang harus diingat. Meskipun demikian, rule struktur cukup simpel dan sederhana.

Selector mengarah ke elemen HTML yang ingin Anda ubah tampilannya. Declaration block memuat satu atau lebih banyak deklarasi (declaration) yang dipisahkan dengan tanda titik koma.

Setiap deklarasi menyertakan nama dan value dari properti CSS, yang dipisahkan dengan tanda koma. Umumnya deklarasi CSS diakhiri dengan tanda titik koma, sedangkan declaration block dikelilingi oleh tanda kurung kurawal.

Mari kita lihat contoh di bawah ini:

Semua elemen <p> ditandai dengan warna biru dan hurufnya ditebalkan (bold).

<style>
p {
 color: blue;
 text-weight: bold;
}
<style>

Contoh lain, semua elemen <p> diposisikan di tengah (center-aligned), dengan lebar 16x, dan berwarna pink.

<style>
p {
   text-align: center;
   font-size: 16px;
   color: pink;
  
}
</style>
SHARE

LEAVE A REPLY

Please enter your comment!
Please enter your name here