Mengenal dan memahami CSS bagi pemula
CSS sangat tidak asing lagi di telinga para Blogger yang terus berjuang mengembangkan tampilan Blog dan/atau situs web mereka menjadi lebih profesional. CSS merupakan sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium (W3C) tahun 1996 dan terus mengalami perkembangan dari CSS1, CSS2 dan CSS3.
Konsep CSS memang gampang-gampang susah dipahami dan memerlukan banyak belajar dan latihan. Ternyata mempelajari CSS cukup menarik perhatian kalangan Blogger dan Saya mencoba sharing dasar-dasar CSS semoga menjadi acuan para pemula mempelajari dan memahaminya.
Pengertian
CSS kepanjangan dari Cascading Style Sheet, bila Anda mencari arti terjemahan CSS pada Google Translate, kira-kira seperti ini hasilnya:
Cascading: Mengatur
Style: gaya, ragam, macam
Sheet: lembar, helai, lapisan'
CSS secara nyata adalah sebuah cara/aturan bahasa kode berurutan yang mendeskripsikan sebuah dokumen yang ditulis dalam bahasa markup. Contoh bahasa Markup (HTML) sederhana:
<h1 style="color:red"> Chapter 1 </h1>
<h1> Chapter 1 </h1> (satu elemen HTML khusus bagian kepada atau header sebuah situs web)
style="color:red" adalah kode CSS-nya yang mendeskripsikan bahwa teks "Chapter 1" berwarna merah.
Cara penulisan
 |
| CSS Syntax wilbeblogger.com Sumber: http://tutorial.belajarweb.net/css/tutorial-css-dasar.html |
CSS memiliki bagian-bagian dan penamaan tersendiri dengan kode sebagai berikut:
h1 {
color: #FFFFFF
}
sebelum tanda '{}' disebut selektor pada contoh di atas adalah h1, yang diapit oleh '{}' disebut deklarasi yang terdiri dari 2 bagian, yaitu properti dan nilai. Sesuai kode di atas "color" adalah properti, dan #FFFFFF adalah nilai.
CSS dapat ditambahkan di dalam HTML melalui 3 cara, yaitu:
1. Cara Inline
Biasanya selalu menggunakan atribut "style" di dalam satu elemen HTML.
Contoh:
<h1> </h1> (satu elemen HTML)
<h1 style="color:red"> Chapter 1 </h1> (CSS dalam satu elemen HTML)
2. Cara Internal
Menggunakan elemen <style> di dalam halaman HTML elemen <head>
Contoh:
<!DOCTYPE HTML>
<html>
<head>
<style>
body {background-color:lightgrey;}
h1 {color:blue;}
p {color:green;}
</style>
</head>
<body>
<h1> Judul Blog </h1>
<p> Paragraf Blog </p>
</body>
</html>
3. Cara Eksternal
Menggunakan satu atau lebih file CSS Eksternal, digunakan untuk menetapkan gaya untuk banyak halaman. Anda dapat merubah seluruh situs web dengan merubah satu file! biasanya berupa link yang disisipkan pada <head>.
Contoh:
<!DOCTYPE HTML>
<html>
<head>
<link href="path/to/file.css" rel="stylesheet">
</head>
<body>
<h1> Judul Blog </h1>
<p> Paragraf Blog </p>
</body>
</html>
Dengan mengetahui 3 cara menambahkan CSS dalam HTML di atas, Anda dapat mencoba membuka HTML template situs web atau blog sendiri dan memahai berbagai macam CSS di dalamnya.
Sebagian besar CSS mengatur sebuah tampilan situs web dalam bahasa HTML atau XHTML, juga dapat digunakan dalam beberapa format XML juga. Format XML biasa digunakan untuk penyimpanan data singkat namun teratur dalam bentuk teks. Tentunya CSS berperan dalam mengatur kerapian data di dalam format XML itu sendiri.
CSS dalam HTML Template Blogger
Seperti halnya dengan template yang ada pada situs web demikian juga template bawaan blogger memiliki aturan khusus dalam menempatkan kode CSS-nya. Blogger memberikan cara yang cukup bersahabat untuk menambahkan CSS pada template blogger agar memungkinkan dalam mengubah tampilan sesuai selera blogger masing-masing.
Berikut ini langkah-langkah dalam menambahkan CSS pada template blogger:
Langkah 1: masuk pada akun blogger Anda
Langkah 2: pilih [template] >> Customize
Langkah 3: Pilih [Advance/tingkat lanjut] >> [Add CSS] >> isi sesuai kemampuan dan/atau copy paste CSS yang diinginkan.
Langkah 4: Apply to Blog
CSS yang ditambahkan pada template blogger bisa dengan cara inline dan internal, seperti beberapa kode CSS yang sudah saya tambahkan pada template blog saya:
Catatan:
CSS cara eksternal tidak dapat ditambahkan pada Blogger Template Designer karena dapat menimbulkan eror template blog Anda. Seperti:
<link href="path/to/file.css" rel="stylesheet">
Bila penambahan CSS Anda tidak melewati langkah-langkah di atas ada alternatif lain yang dapat membantu pula yaitu tinggal menyisipkan CSS pada blogger template caranya:
1. masuk pada akun blog
2. Pilih [Template] >> Edit Template
3. Klik Control F pada template blogger >> paste kode ]]></b.skin> >> search/cari, kemudian buat atau paste kode CSS tepat di atasnya.
4. Save
Pernahkah Anda menambahkan CSS pada Blog, namun tidak ngefek sama sekali? Memang hal ini dapat terjadi dan sangat biasa. CSS juga memiliki kelebihan dan kekurangan pula.
Kelebihan dan Kekurangan CSS
Kelebihan CSS:
Mengubah dan mengatur tampilan web sangat praktis dan mudah dengan CSS misalkan font, warna, ukuran teks, background, spasi antar paragraf, margin, padding, dan parameter lainnya.
Kekurangan CSS
Seringkali tidak support dengan browser. CSS blog atau situs web yang Anda kerjakan menggunakan browser Google Chrome belum tentu dapat diartikan sama dengan browser lainnya apalagi browser yang out of date. Namun dengan berkembangnya browser pada masa kini, semakin mampu menerjemahkan kode pada struktur data blog meliputi HTML, JavaScript, dan/atau CSS.
Ini cerita dan pengalaman Saya tentang belajar CSS, ditunggu saran dan pengalaman Anda seterusnya. Semoga bermanfaat dan selamat mencoba.
Sumber:
w3schools.com
wikipedia.org
