Re_Kazed - Programming
Halo sobat Kazers! Welcome back!
Dalam kesempatan kali ini saya akan coba berbagi tentang ilmu coding, yup! Pengertian CSS, Jenis-jenis CSS serta cara mudah membuat dan menggunakannya dalam coding HTML. Jadi dibaca sampai selesai ya!
CSS merupakan singkatan dari Cascading Style Sheet, yang diartikan dalam bahasa Inggris ke bahasa Indonesia yaitu Lembar bergaya susun (Google Translate). Jadi singkatnya CSS adalah coding pada HTML yang memberikan sebuah gaya atau bentuk supaya terlihat lebih tertata dan menarik.
Untuk aplikasi penerapannya, saya sendiri menyarankan agar menggunakan Visual Studio Code atau Sublime Text, belajar dari pengalaman, hehe.
Untuk yang belum punya aplikasi di atas silakan bisa di download di link berikut :
Langsung saja, jenis CSS dibagi tiga, apa sajakah itu? Berikut jenis-jenisnya :
1. Embedded CSS
<html>
<head>
<title>Embedded CSS</title>
<style>
p {
font-size: 20px;
color: blue;
text-align: center;
}
</style>
</head>
<body>
<p>Semua tag p diformat menggunakan css embedded</p>
<p>Semua tag p diformat menggunakan css embedded</p>
</body>
</html>
Untuk memulai silakan copy Coding Embedded CSS di atas dan simpan di aplikasi coding seperti aplikasi yang saya share sebelumnya sebelum kita masuk ke penjelasan, jadi kan mudah, ada referensi biar cepat paham ... (modus)
Apa sudah? Oke, mari lanjutkan!
Sebelumnya kita juga harus mengerti dan memahami apa kata ‘Embedded’ itu sendiri. Menurut Google Translate, Embedded memiliki arti Tertanam, atau Tertancap. Apa maksudnya itu? Mari kita balik lagi pada coding barusan.
Dalam coding, yang disebut dengan CSS adalah <style>, dan ditutup </style>. Yang di mana style memiliki arti gaya. Itu memberi kemungkinan untuk coding style memberi sentuhan gaya pada tampilan HTML yang sebelumnya sangat datar.
Jika kalian menemukan tag style di antara tag Head (seperti contoh di atas) atau di manapun kecuali di letak file yang terpisah atau bersatu dengan garis yang ingin di edit maka itulah embedded. Cukup simpel, dalam embedded coding tidak harus di dekatkan dengan tag yang ingin di edit, cukup diletakkan sembarang di antara <HTML> , dan hanya perlu dipanggil dengan inisialnya untuk menampilan. Contoh, CSS di atas berhuruf depan ‘p’ yang mana <p> merupakan paragraf. Maka bila ada coding paragraf dalam HTML itu, semuanya akan berubah sesuai apa yang diperintahkan pada CSS embedded di sekitarnya.
Namun CSS embedded tidak sekaku itu, jika ada dua paragraf atau <p> dalam html itu dan tidak ingin gaya yang sama, maka buatlah 2 coding CSS embedded, hanya ada perbedaan kecil yaitu kalian harus memberi tanda khusus <type=”. . .”> pada <p> saat memanggil CSS -nya.
Kita contohkan sederhana,
- Jika ada CSS embedded p{ }, maka dalam pemanggilan coding HTML cukup dengan <p> . . . </p>
- Namun jika ada CSS embedded p [type=”lain”], maka dalam pemanggilan coding HTML harus ditulis <p type=”lain”> . . . </p>
Contoh HTML :
<html>
<head>
<title>Embedded CSS</title>
<style>
p {
font-size: 20px;
color: blue;
text-align: center;
}
p[type=”lain”] {
font-size: 30px;
color: red;
text-align: left;
}
</style>
</head>
<body>
<p>Tag p pertama diformat menggunakan css embedded</p>
<p type=”lain”>Tag p kedua diformat menggunakan css embedded</p>
</body>
</html>
Itulah bagaimana cara memberi 2 style pada 2 tag yang sama, jika ingin 3 atau lebih, bisa lakukan hal yang sama dengan mengganti type nya saja. Jika sudah mengerti pasti mudah lah, apa lagi yang impiannya jadi ahli programer, tentu harus betah sama yang kaya begini, dan lagi pula ini tingkat dasar banget loh, jadi harus tahu yang ini di luar kepala, dan itu perlu niat, tapi kalian pasti bisa! :D
2. Inline CSS
<html>
<head>
<title>Inline CSS</title>
</head>
<body>
<p>
Tag p ini tidak menggunakan style / css
</p>
<p style="font-size:20px; color:blue; text-align:center">
Tag p ini diformat dengan ukuran 20pt warna biru dan posisi tengah
</p>
</body>
</html>
Dan selanjutnya silakan copy kembali coding di atas untuk contoh CSS Inline. :D
Nah jika sudah mari kita masuk penjelasannya!
Kata ‘Inline’ memiliki arti ‘Dalam Garis’ itu menandakan bahwa CSS inline terletak di dalam garis sebuah HTML. Jadi CSS inline tidaklah terpisah seperti embedded, jika ada sebuah tag, misal paragraf, maka style CSS berada dalam tag <p> tersebut dan ditulis tidak sampai mencapai kurung penutup ‘>’ dari tag <p> tersebut. Contohnya seperti: <p style="font-size:20px; color:blue; text-align:center"> . . . </p>
CSS Inline bisa digolongkan adalah cara yang lebih mudah supaya tidak pusing saat mencari CSS yang tertempel pada tag tersebut yang entah nyimpannya di mana (misalnya jika program yang anda buat lebih dari 1000 baris) dan tidak perlu membuat < ... type=”...”> meski membuat banyak tag yang sama. Namun jika terlalu menumpuk akan membuat pusing juga, jadi untuk kerapihan yang lebih terjaga, saya pribadi lebih memilih embedded atau linked.
Dari program yang saya buat jelas terlihat kan mana yang menggunakan CSS dan mana yang tidak?
3. Linked CSS
<html>
<head>
<title>Linked CSS</title>
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
<p>Semua tag p diformat menggunakan css linked.</p>
</body>
</html>
Oke lanjut ke Linked CSS, siapkan lembar kerja baru kalian Kazers!
Dan ayo kita mulai!
Mulai dari pengertiannya, ‘Linked’ memiliki arti Terkait atau Terhubung. Dilihat dari pengertiannya terdapat kata kait atau hubung yang memberi penjelasan kalau CSS ini perlu di arahkan secara benar dan harus dihubungkan sebelum digunakan. Ya, Linked memiliki cara yang berbeda dengan CSS lainnya, yang mana Linked memisahkan diri dari HTML yang akan diberi gaya olehnya.
Contoh seperti HTML yang saya buat di atas, kalian mungkin bingung kenapa tidak ada apapun yang terjadi meski sudah di buka di browser. Yup, di atas terdapat coding <link> yang menandakan ini mengambil Ike dari luar, dan bertipe text/css yang artinya jenis file yang akan diambil itu berformat CSS, kemudian ada href yang memiliki arti di mana letak file tersebut harus diambil, contoh seperti saya di atas, saya menggunakan format href=”NamaFolder/NamaFileCSS.css” itu artinya selain saya membuat HTML ini, dalam folder yang sama saya juga membuat folder lain dan berisikan CSS yang akan digunakan, dan bila mau kalian juga bisa mengikutinya kok, atau tidak perlu pakai nama folder dan langsung ke nama file juga bisa saja, asalkan tunjukkan tempat yang benar dan file CSS harus satu file dengan HTML yang kalian buat.
Nah untuk kalian yang masih mengikuti tutor saya di atas silakan buat folder di tempat di mana anda akan Save file HTML yang kalian copy dari atas. Buat folder bernama “style”, huruf pada coding dan nama folder harus sama persis. Sekarang buat file project baru dengan format file css dan simpan dengan nama ‘style’ di folder barusan, copy coding di bawah pada file css :
p {
font-size: 20px;
color:blue;
text-align: center;
}
Save dan seharusnya file di dalam menjadi style.css. Maka coba jalankan file html yang tadi. Bagaimana? Apa tulisan dalam html itu sudah berubah? jika sudah selamat! anda berhasil mencoba semua Jenis-jenis CSS. Untuk membedakan setiap CSS supaya tidak tertukar cukup pahami arti dari nama setiap CSS tersebut. Dan done!
Terima kasih telah mampir dan selamat berkarya sobat Kazers! :D
Tapi TUNGGU!!!
Mungkin ada yang heran kenapa isi dari css hanya selalu itu itu saja, sebenarnya tidak, banyak kode css yang bisa kita gunakan seperti contoh di bawah ini :
Begitulah contohnya... Bagaimana? Banyak kan? terasa asing ya? :v
Tapi tidak akan saya share di sini macam macam coding tersebut, karena sudah keluar bahasan, jadi gimana kalau saya adakan posting tentang itu lain kali sobat kazers? Setuju?? Komen ya, nanti saya bakal adakan kalau banyak yang komen, hehe :v
Sampai jumpa lain waktu!!