Mari pelajari pengertian css, fungsi, dan macam macam css di dalam code html.
Pengembangan website menggunakan HTML atau PHP saja belum cukup. Anda membutuhkan CSS yang dapat mengatur seluruh tampilan situs web sehingga terlihat lebih menarik dan sesuai dengan kebutuhan pengguna. Itulah mengapa Anda perlu tahu pengertian CSS.
Anda wajib mengetahui mengenai CSS akan sangat berguna dalam proses pengembangan situs web. Apalagi saat ini hampir setiap situs web menggunakan CSS sebagai alat untuk mengatur berbagai tampilan di dalamnya. Tidak! Pada artikel kali ini kami akan membahas selengkap mungkin belajar CSS mulai dari pengertian css dan fungsi.
Pengertian Css
CSS adalah kepanjangaan dari Cascading Style Sheets yang berguna untuk proses pembuatan situs web dengan mengatur elemen yang tertulis dalam markup bahasa.
CSS dipakai untuk mendesain halaman depan atau tampilan website ( front end ). CSS pegangan tampilan dan ‘rasa’ dari halaman website.
Ada banyak hal yang dapat Anda lakukan menggunakan CSS dibandingkan dengan bahasa pemrograman inti seperti HTML dan PHP. Ketika menggunakan CSS, Anda dapat mengatur warna teks, jenis huruf, baris antar paragraf, ukuran kolom, dan jenis latar belakang yang dipakai.
Tidak hanya itu CSS juga bisa untuk mendesain tata letak , variasi tampilan di berbagai perangkat yang berbeda, dan berbagai efek yang dipakai di situs web.
CSS sangat mudah dipelajari, tapi juga powerful karena dapat mengontrol tampilan dari dokumen HTML. Mulai dari yang simpel sampai kompleks. Tidak heran jika saat ini CSS hampir dipakai di berbagai situs web untuk dikombinasikan dengan HTML maupun PHP.
Fungsi CSS
Namun, jika menambahkan CSS, hasilnya akan menjadi lebih cantik seperti ini:
CSS tentu tidak hanya mengatur tombol saja. Anda dapat mendesain berbagai macam tampilan menggunakan CSS sehingga sesuai dengan kebutuhan.
3 Macam CSS di Dalam kode HTML
Saat belajar CSS kamu perlu mengetahui tiga macam penempatan CSS yang dapat dipakai ke dalam baris kode HTML, yaitu external , internal , atau inline . Bagian ini akan membahas tiga macam CSS ini dengan lebih detail.
Inline CSS penempatan CSS yang langsung dilakukan di dalam konten HTML. Penempatan CSS secara inline hanya akan mempengaruhi satu bagian baris kode. Berikut adalah contohnya.
CSS Sebaris
Inline CSS penempatan CSS yang langsung dilakukan di dalam konten HTML. Penempatan CSS secara inline hanya akan mempengaruhi satu bagian baris kode. Berikut adalah contohnya.
<h1 style=”font-size:30px;color:blue;”>Cek beritama utama ini!</h1>
CSS di atas hanya akan mempengaruhi paragraf yang spesifik dalam satu file .html dan muncul dengan warna biru ( biru ) ukuran font 30px.
CSS eksternal
CSS eksternal adalah penempatan baris kode CSS menggunakan file .css. Cata ini dapat digunakan untuk mendeklarasikan sebagian besar pengaturan tampilan situs web secara keseluruhan.
Cara ini lebih sederhana dan simpel daripada menambahkan baris kode di setiap elemen HTML yang ingin Anda atur tampilannya.
Jika menggunakan penempatan secara eksternal, Anda harus menambahkan header untuk memanggil file .css di dalam file HTML seperti contoh di bawah ini.
<head>
<link rel=”stylesheet” type=”text/css” href=fileCSSAnda.css”>
</head
Baris kode di atas akan menghubungkan file .html dengan eksternal style sheet (CSS). Pada contoh di atas file CSS menggunakan nama ‘fileCSSAnda.css’ yang dapat Anda sesuaikan dengan letak file CSS di direktori situs web. Ketika file HTML sudah terhubung dengan file CSS maka seluruh pengaturan CSS akan diterapkan di dalam kode HTML.
CSS Internal
Lalu, bagaimana penempatan CSS menggunakan cara internal? CSS internal sekilas mirip dengan CSS inline, yaitu tipe penulisan tanpa file CSS terpisah.
Namun dalam penggunaan CSS secara internal, baris kode HTML dituliskan di bagian atas (header) file HTML. Cara ini akan sangat cocok digunakan untuk menciptakan halaman web dengan tampilan yang berbeda. Dengan kata lain, CSS ini bisa dipakai untuk menciptakan tampilan yang unik.
Baris kode CSS secara internal contohnya seperti di bawah ini.
<head>
<style>
Body { background-color:blue; }
P { font-size:20px; color:mediumblue; }
</style>
</head>
Baris kode di atas akan menerapkan background dengan warna biru, paragraf berukuran 20px, dan font ‘medium blue’ ke dalam satu halaman HTML.
Di antara tiga jenis penempatan CSS, cara eksternal merupakan cara yang paling efektif untuk mengimplementasikan CSS ke dalam situs web. Cara ini juga paling populer atau sering dipakai oleh banyak pengembangan situs web dibandingkan dengan cara yang lainnya. Sedangkan cara internal dan inline juga bisa dipakai untuk menambahkan format konten yang khusus atau berbeda dengan konten yang lainnya.
Sekian, Terima Kasih
Komentar
Posting Komentar