Assalamualaikum warahmatullahi wabarokatuh 😊
Pada artikel sebelumnya kita udah bahas tentang html.
Gimana tampilan nya saat di run di browser??
Kalo masih kurang cantik tampilan nya mari kita bahas tentang CSS 😉
A. Definisi
CSS (Cascading Style Sheets) adalah stylesheet yang digunakan untuk mengatur tampilan dan layout halaman web. Dengan menggunakan CSS, pengembang dapat memisahkan antara konten pada halaman web dan tampilannya. CSS terdiri dari kumpulan aturan atau deklarasi yang diterapkan pada elemen HTML untuk menentukan bagaimana elemen tersebut harus ditampilkan di halaman web.
B. Sejarah perkembangan CSS
Sejak pertama kali diperkenalkan pada tahun 1996, CSS telah mengalami perkembangan yang signifikan. Pada awalnya, CSS digunakan secara terbatas dan hanya mendukung beberapa fitur, seperti warna, font, dan tata letak. Namun seiring berjalannya waktu, CSS menjadi semakin kompleks dan mendukung fitur-fitur yang lebih canggih seperti animasi, transisi, dan responsif.
C. Macam macam CSS
Ada beberapa macam CSS yang dapat digunakan dalam pengembangan web:
a. Inline CSS
Inline CSS adalah CSS yang diterapkan langsung pada elemen HTML menggunakan atribut style. Contohnya seperti ini:
<p style="color: red;">Teks merah</p>
Meskipun inline CSS dapat digunakan untuk mengubah tampilan elemen secara cepat, namun tidak disarankan untuk digunakan secara terus-menerus karena dapat mempersulit pemeliharaan kode.
b. Internal CSS
Internal CSS adalah CSS yang didefinisikan di dalam tag <style> di dalam elemen <head> pada halaman web. Contohnya seperti ini:
<head>
<style>
p {
color: red;
}
</style>
</head>
Internal CSS memungkinkan pengembang untuk memisahkan antara konten dan tampilan pada halaman web, namun hanya berlaku untuk halaman web tertentu saja.
c. External CSS
External CSS adalah CSS yang didefinisikan di dalam file terpisah dengan ekstensi .css dan dihubungkan dengan halaman web menggunakan tag <link> di dalam elemen <head>.
Contohnya seperti ini:
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
External CSS memungkinkan pengembang untuk menggunakan satu file CSS untuk mengatur tampilan dan layout pada seluruh halaman web. Selain itu, penggunaan external CSS juga memudahkan pemeliharaan kode.
D. Contoh lain penggunaan CSS
Selain itu, CSS juga memiliki beberapa fitur yang berguna dalam pengembangan web, antara lain:
a. Box Model: digunakan untuk mengatur dimensi dan tata letak elemen HTML.
b. Flexbox: digunakan untuk membuat tata letak yang fleksibel dan responsif pada elemen HTML.
c. Grid: digunakan untuk membuat tata letak yang kompleks dan responsif pada elemen HTML.
d. Animasi dan Transisi: digunakan untuk membuat efek animasi dan transisi pada elemen HTML.
e. Media Queries: digunakan untuk mengubah tampilan halaman web berdasarkan ukuran layar atau perangkat yang digunakan oleh pengguna.
Dalam pengembangan web modern, CSS menjadi semakin kompleks dan mendukung fitur-fitur yang lebih canggih. Oleh karena itu, pengembang web harus terus mempelajari dan mengikuti perkembangan teknologi CSS agar dapat membuat halaman web yang menarik dan responsif.
Komentar
Posting Komentar