Belajar Css Gampang Di Pahami
Senikoding.com - CSS kepanjangan dari Cascading Style Sheet. Yang berfungsi untuk mengatur format atau tampilan dalam halaman Website. Sebuah Website sanggup terdiri dari berpuluh puluh bahkan beratus ratus halaman. Jika setiap kita mengubah halaman website tersebut kita harus mengubah formatnya satu per satu maka akan sangat merepotkan. Namun kalau kita memakai CSS maka hal tersebut bukan lagi sebuah masalah, alasannya dengan CSS kita sanggup menyimpan format dan mengguankannya kapan pun dan dimana pun kita inginkan.
Seperti terbantunya kita dengan Formatting dan Style dalam menciptakan Document Office, maka Style Sheet juga sangat penting dalam menciptakan halaman HTML yang dinamis. Memang dalam memakai Style Sheet bkan suatu keharusan dalam menciptakan Web, namun kalau mempunyai Website dengan halaman yang sangat banyak, kita akan kesulitan dalam debugging, perbaikan, dan perawatan. Sehingga Belajar CSS sangat penting.
Dengan Style Sheet, kita sanggup menciptakan Efek efek tertentu untuk konten Website. Misalnya saja kita ingin agar bab header dari Tabel di Web selalu ber Size/Ukuran 20px, dan color/warna Merah, maka definisikan untuk Style tersebut pada tag <TH>. Dengan demikian seluruh tabel yang didefinisikan akan mempunyai Format yang sama.
Belajar CSS Dasar
Cascading Style Sheet (CSS) sudah didukung oleh hampir semua Browser, alasannya CSS telah distandarkan oleh World Wide Web Consortium (W3C).
Ada 4 cara memasang arahan CSS ke dalam arahan HTML / Halaman Web, caranya:
1. Inline Style Sheet (Memasukkan arahan CSS pribadi di Tag HTML).
2. Internal Style Sheet (Embed atau memasang arahan CSS ke dalam bab <head>).
3. External Style Sheet (Include file CSS).
4. Import CSS file.
Ayo kita bahas Belajar CSS dari poin pertama, yaitu:
1. Inline Style Sheet
Cara ini merupakan penulisan pribadi Script CSS ke dalam Tag HTML yang diinginkan. Cara ini sebaiknya HANYA digunakan kalau kita mau memformat suatu Elemen satu kali saja. Kenapa kata "Hanya" saya tekankan, alasannya penulisan yang baik berdasarkan Google yang mempunyai platfom Browser menyerupai Chrome, untuk Satu Format lebih baik memakai teknik Inline Style Sheet ini.
Contoh:
<!DOCTYPE html> <html> <head> <title>Latihan CSS</title> </head> <body> <p style="color:red;">Contoh Paragraf berwarna Merah</p> </body> </html>
Kode diatas akan memformat paragraf Tag <p> berwarna Merah.
Penulisan cara ini dimulai dengan kata style, kemudian diikuti dengan Syntax Property dan Value.
<p style="property:value;">.
2. Internal Style Sheet
Selain dengan cara pertama, kita sanggup juga dengan menaruh arahan CSS diantara Tag <head> dan </head>. Artinya Style Sheet nya berada pada file yang bersangkutan namun diletakkan khusus pada suatu daerah Header / Kepala yaitu antara Tag <head> dan </head>.
Penulisan CSS dengan cara ini diawali dengan Tag <style> dan diakhiri dengan Tag </style> dibagian Head nya.
Bagaimana pengelompokan penulisan CSS yang baik dengan cara ini berdasarkan Google, yaitu bilamana arahan CSS tersebut panjang dan atau memformat lebih dari satu Elemen.
Contoh:
<!DOCTYPE html> <html> <head> <title>Latihan CSS</title> <style> body {font-family:arial;} h1 {font-size:20px; color:black; background-color:gray;} p {color:red; font-size:14px;} </style> </head> <body> <h1>Latihan CSS</h1> <p>Contoh Paragraf berwarna Merah</p> </body> </html> Didalam Tag <head> ada Tag <style>, Tag itu merupakan implementasi atau uraian dari code code CSS yang diletakkan di dalam Header suatu Website. Code CSS tersebut akan meLoad terlebih dahulu alasannya letaknya di bab atas dari halaman dan akan mempercepat proses halaman itu sendiri.
Tulisan dengan cara menyerupai ini telah disukai Google, dan kita juga lebih gampang dalam pengembangan dan merubahnya kalau diperlukan. Misalkan saja code CSS yang begitu kompleks dan banyak di Implentasikannya menyerupai cara Pertama diatas, maka akan menciptakan pusing bagi Editor codenya dan sama sekali tidak disukai pihak Google selaku salah satu pengembang platfom Browser Chrome.
Baca juga: Belajar CSS Dasar Lanjutan Praktis Dipahami
3. External Style Sheet
Code CSS External ditulis dalam suatu file terpisah yang disimpan dengan ekstensi ".css" tanpa tanda petik dua. Kemudai file CSS yang terpisah nantinya akan di panggil atau di Load pada halaman yang memerlukannya atau menggunakannya. Dengan cara ini kita hanya perlu mempunyai satu set arahan CSS yang dipakai untuk semua halaman Website kita.
Contoh:
<!DOCTYPE html> <html> <head> <title>Latihan CSS</title> <link rel='stylesheet' type='text/css' href='css/style.css'> </head> <body> <h1>Latihan CSS</h1> <p>Contoh Paragraf berwarna Merah</p> </body> </html>
Perhatikan arahan ini <link rel='stylesheet' type='text/css' href='css/style.css'>. Kode tersebut yaitu pola pemanggilan file External CSS yang berada pada Folder CSS dan filenya berjulukan style.css.
Dengan cara tersebut pemanggilan file CSS didalam website. Maka halaman terkait akan terload Code CSS yang berada pada file style.css.
Isi dari file style.css sanggup menyerupai pola poin dua atau yang lain sesuai kebutuhan.
Contoh isi file style.css:
body {font-family:arial;}
h1 {font-size:20px; color:black; background-color:gray;}
p {color:red; font-size:14px;}
Penulisan atau cara menyerupai ini yaitu External Style Sheet akan mempermudah dalam pengembangan web, koreksi bug dan baik di implementasikan untuk arahan kode yang panjang.
4. Import CSS
Kita sanggup juga dengan cara meng-Import CSS ke dalam suatu file CSS yang lain memakai Tag Import.
Contohnya:
<!DOCTYPE html> <html> <head> <title>Latihan CSS</title> <link rel='stylesheet' type='text/css' href='css/style.css'> </head> <body> <h1>Latihan CSS</h1> <p>Contoh Paragraf berwarna Merah</p> </body> </html>
Didalam file style.css nantinya Import file CSS yang lain akan diload.
Berikut pola Import file CSS didalam file style.css:
@import url("style2.css");
body {font-family:arial;}
h1 {font-size:20px; color:black; background-color:gray;}
p {color:red; font-size:14px;}
Didalam file style2.css terdapat Code code CSS yang di load dalam file style.css.
Namun perlu diperhatikan bahwa penggunaan "link" atau cara External Style Sheet mempunyai Performa atau kecepatan lebih cepat dibandingkan dengan Import, alasannya pada link load arahan CSS dilakukan secara Pararel, sedangkan pada Import Load arahan CSS dilakukan secara Serial atau berurutan.
Ilustrasi gambarnya menyerupai ini:
 | |||
| Gbr1. Ilustrasi Load External CSS |
Gambar1. yaitu Ilustrasi Load dengan External Style Sheet (Pararel).
 |
| Gbr2. Ilustrasi Import CSS |
Gambar2. yaitu Ilustrasi Load dengan Import File (Serial).
Sampai disini dulu kita Belajar CSS. Semoga Artikel ini yang membahas wacana Belajar CSS, Belajar CSS Dasar, Belajar CSS Fundamental, Belajar CSS Praktis Di Pahami bermanfaat.
Nantikan Tips dan Informasi lainnya :).
- Salam -