Belajar CSS Dasar
Cascading Style Sheet (CSS) sudah didukung oleh hampir semua Browser, karena CSS telah distandarkan oleh World Wide Web Consortium (W3C).
Ada 4 cara memasang kode CSS ke dalam kode HTML / Halaman Web, caranya:
1. Inline Style Sheet (Memasukkan kode CSS langsung di Tag HTML).
2. Internal Style Sheet (Embed atau memasang kode CSS ke dalam bagian <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 langsung Script CSS ke dalam Tag HTML yang diinginkan. Cara ini sebaiknya HANYA digunakan jika kita mau memformat suatu Elemen satu kali saja. Kenapa kata "Hanya" saya tekankan, karena penulisan yang baik menurut Google yang mempunyai platfom Browser seperti Chrome, untuk Satu Format lebih baik menggunakan 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, lalu diikuti dengan Syntax Property dan Value.
<p style="property:value;">.
2. Internal Style Sheet
Selain dengan cara pertama, kita bisa juga dengan menaruh kode CSS diantara Tag <head> dan </head>. Artinya Style Sheet nya berada pada file yang bersangkutan namun diletakkan khusus pada suatu tempat 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 menurut Google, yaitu bilamana kode 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 karena letaknya di bagian atas dari halaman dan akan mempercepat proses halaman itu sendiri.
Tulisan dengan cara seperti ini telah disukai Google, dan kita juga lebih mudah dalam pengembangan dan merubahnya jika diperlukan. Misalkan saja code CSS yang begitu kompleks dan banyak di Implentasikannya seperti cara Pertama diatas, maka akan membuat pusing bagi Editor codenya dan sama sekali tidak disukai pihak Google selaku salah satu pengembang platfom Browser Chrome.
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 memiliki satu set kode CSS yang digunakan 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 kode ini <link rel='stylesheet' type='text/css' href='css/style.css'>. Kode tersebut adalah contoh pemanggilan file External CSS yang berada pada Folder CSS dan filenya bernama 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 bisa seperti contoh poin dua atau yang lain sesuai kebutuhan.
Contoh isi file style.css:
Penulisan atau cara seperti ini yaitu External Style Sheet akan mempermudah dalam pengembangan web, koreksi bug dan baik di implementasikan untuk kode kode yang panjang.
4. Import CSS
Kita bisa juga dengan cara meng-Import CSS ke dalam suatu file CSS yang lain menggunakan 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 contoh Import file CSS didalam file style.css:
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 memiliki Performa atau kecepatan lebih cepat dibandingkan dengan Import, karena pada link load kode CSS dilakukan secara Pararel, sedangkan pada Import Load kode CSS dilakukan secara Serial atau berurutan.
Sampai disini dulu kita Belajar CSS. Semoga Artikel ini yang membahas tentang Belajar CSS, Belajar CSS Dasar, Belajar CSS Fundamental, Belajar CSS Mudah Di Pahami bermanfaat.
