CSS direction property

CSS direction property menentukan arah teks (penempatan setiap kata dalam teks pada setiap baris) dari arah kiri ke kanan atau dari kanan ke kiri. Perbedaan arah teks ditentukan melalui nilai css direction property. Sekalipun sepintas terlihat hampir sama dengan fungsi css text-align (left dan right), namun sebenarnya kedua css property ini mempunyai fungsi dan kegunaan berbeda.

Value/nilai css direction property

Tag <pre> - html pre tag

Tag pre berfungsi untuk menampilkan "pre-formatted text". Tag pre memungkinkan untuk menampilkan teks sesuai dengan spasi, tab, dan perpindahan baris setiap teks. Tag "pre" umumnya digunakan untuk menuliskan kode html seperti xHTML, kode php, javascript dan kode css. Beberapa pengaturan pada tag pre dapat dilakukan untuk mendapatkan tampilan output berbeda. Pengaturan bisa dilakukan dengan menambahkan beberapa attribute seperti class, id atau style. Jika pengaturan dilakukan melalui attribute id atau class anda dapat melakukannya dengan menambahkan beberapa properti css. Penambahan properti css secara langsung (inline css) dapat juga dilakukan namun terasa tidak praktis/simple.

Kode dasar tag pre

Tag code - html code tag

Tag "code" atau html "code" tag adalah sebuah tag html yang berfungsi mendefinisikan kode komputer. Kode yang ingin ditampilkan di halaman blog/web diletakkan di antara tag pembuka (<code>) dan tag penutup (</code>). Pada tag "code" dapat ditambahkan beberapa attribute html seperti : class, id, style, dir, lang, title, accesskey dan beberapa tag lain.
Penggunaan attribute style memungkinkan berbagai perubahan style pada tag "code". Beberapa kode css seperti background-color atau background-image memungkinkan anda memberi warna latar atau image latar. Properti css seperti color, font-size, font-style, font-family, display property (block atau inline-block), text-decoration property serta beberapa css roperty lainnya dapat juga ditambahkan (Specifies an inline CSS style for an element).
Jika menghendaki tag "code" yang lebih simple, namun ingin melibatkan beberapa css property guna mendapatkan style tertentu pada tag "code" (custom style), anda dapat memanfaatkan kode css dan sebuah id atau class.

Tag <b> - html "b" tag

Ada beberapa cara untuk membuat karakter/teks berbentuk tebal (bold), dan salah satu diantaranya adalah dengan memanfaatkan html tag "b". Karakter/teks yang hendak ditampilkan/dibuat tebal diletakkan diantara tag pembuka "b" dan tag penutup "b" yang bentuk kode htmlnya sbb:
<b>Text here</b>
Dapat juga ditulis dalam bentuk seperti berikut:
<B>Text here</B>
Dua cara berbeda di atas akan menghasilkan output yang sama seperti di bawah ini:
Text here! perhatikan teks disamping berbentuk tebal!

Tag <i> - html i tag

HTML tag "i" berfungsi untuk membuat karakter/teks berbentuk miring (italic). Hampir tak ada bedanya dengan html tag "em" (emphasis) yang juga mempunyai fungsi menampilkan karakter/teks miring. Sekalipun mempunyai fungsi dan kegunaan yang tak jauh berbeda, dalam web/blog disarankan untuk mengutamakan penggunaan html tag "em" dengan pertimbangan adanya perbedaan metode penulisan karakter "i" pada beberapa bahasa tertentu.

Beberapa sifat dasar tag <i> html i tag

tag <em> - html tag em

Seperti halnya metode penulisan teks pada umumnya, dalam web/blog juga mengenal beberapa variasi atau gaya penulisan karakter teks berbeda-beda. Beberapa yang sering dijumpai misalnya pada penulisan judul/title yang menggunakan tag h1 s/d h6 (heading) yang dibedakan melalui penggunaan ukuran font berukuran besar, sedang hingga kecil. Selain itu juga kita kenali penulisan karakter dengan bentuk tebal (menggunakan tag strong) yang bertujuan untuk menandai "sebuah teks yang dinyatakan penting". Satu lagi yang lain adalah karakter/teks dengan bentuk miring. Karakter seperti ini dibentuk melalui tag "em", dimana karakter/teks yang dibuat dalam bentuk miring dimaksudkan untuk memberi tekanan pada teks tertentu (renders as emphasized text).

Beberapa sifat dasar tag <em> html em tag

Tag <STRONG> - HTML strong tag

Tag strong atau html strong tag adalah sebuah elemen html yang berfungsi untuk menciptakan teks dengan karakter tebal (bold) dan dimaksudkan untuk menyatakan bahwa teks/kata/kalimat tersebut "penting".
Karakter "tebal" yang dibentuk dengan memanfaatkan "html strong tag" memang membuat "teks terlihat berbeda" sehingga menjadi mudah dikenali dibandingkan dengan teks lain disekitarnya.

Beberapa sifat dasar tag <strong> html STRONG tag

Kode CSS max-height property

CSS max-height property berfungsi untuk menentukan tinggi maksimal sebuah obyek/elemen html. Tinggi maksimal yang dikehendaki ditentukan melalui sebuah nilai dalam bentuk:

• px, em, pt, cm, ... etc (length)
• % (persen) » : prosentase tinggi obyek/elemen diperhitungkan thd elemen/obyek lain yang ditempati.
• inherit

Deklarasi max-height property

Kode CSS min height property

CSS Min height property tak jauh berbeda dengan CSS min-width property. Jika pada min-width property digunakan untuk menentukan lebar minimal sebuah obyek/elemen, maka min-height property digunakan untuk menentukan tinggi minimal obyek/elemen. Value/nilai min-height property akan membuat sebuah elemen/obyek mempunyai batas minimal tinggi tertentu (sesuai nilai yang digunakan) hingga ketinggian yang tidak terbatas (jika tinggi tidak dibatasi dengan css max-height property). Jika anda menghendaki elemen mempunyai batas tinggi maksimal tertentu, anda bisa menambahkan css overflow property (mislanya » overflow: auto).

Value/nilai CSS min-height property

Kode CSS max width property

Jika min-width property berfungsi menentukan lebar minimal bagi sebuah elemen, maka max-width property adalah sebaliknya. Berfungsi untuk menentukan (mengatur) batas lebar (width) maksimal sebuah elemen yang ukurannya ditentukan dalam nilai tertentu. CSS2 max-width property dapat digunakan pada semua elemen dengan nilai/value dalam satuan px (pixel), em, cm, ...etc (length), % (persen) dan inherit. Internet Explorer (IE) support terhadap max width property, kecuali IE-7 dan di bawahnya. Menggunakan max-width property memungkinkan dibuatnya sebuah elemen dengan ukuran lebar yang lebih fleksibel dimana jumlah konten didalamnya tak akan berpengaruh terhadap maksimal lebar yang telah ditentukan. Jika ukuran tinggi tak dibatasi, maka semakin banyak konten elemen akan bertambah besar dalam arah vertikal (semakin tinggi ukurannya). Jika konten semakin sedikit/mengecil, maka lebar elemen akan semakin menyempit (saat digunakan bersamaan dengan css display property dengan value "inline-block").

Deklarasi css max-width property

Kode CSS min width property

min width property berfungsi untuk menentukan "lebar minimal" sebuah elemen. Melalui property ini sebuah elemen akan selalu mempunyai lebar minimal sesuai nilai yang ditentukan. Dalam penggunaanya, css min-width property biasanya selalu digunakan secara bersamaan dengan max-width property. Hampir semua browser sudah mendukung css2 min-width property, termasuk IE-8 dan IE-9. Value/nilai dari min-width ditetapkan dalam px, em, cm (length), % (persen) dan inherit.

Deklarasi css min-width property

CSS line-height Property

Berfungsi untuk mengatur jarak antar baris teks. Nilai yang digunakan berupa angka (ekuivalen dengan satuan em), dalam satuan px, pt, em, cm, etc (length) dan % (persen). Nilai line-height dalam persen ditentukan berdasarkan ukuran font. Dalam property line-height tidak berlaku nilai negatif. Jika ingin membuat setiap baris lebih rapat atau hingga baris teks bertumpuk gunakan nilai yang semakin kecil.

Deklarasi line-height property

CSS text-transform Property

CSS text transform property berfungsi untuk merubah format teks secara otomatis melalui kode CSS. Ada 4 pilihan nilai yang bisa digunakan.

• Value » capitalize | uppercase | lowercase | none
• Initial » none
• Applies to » all elements
• Inherited » yes
• Percentage values » N/A

CSS Border Spacing Property

CSS border-spacing property digunakan pada elemen table dan berfungsi untuk mengatur jarak antara bagian elemen table (cell) dengan border table. Penggunaan spacing property hanya bisa digunakan untuk deklarasi border-collapse:separate; dan tidak untuk nilai yang lain (contoh:collapse).

Declaration

CSS word-spacing Property - Mengatur spasi/jarak kata

Jika untuk mengatur jarak/spasi antar karakter dal;am kata/teks/kalimat digunakan css letter-spacing property, maka untuk pengaturan jarak/spasi antar kata/teks dalam kalimat digunakan CSS word-spacing property. Word spacing property dapat bernilai positif atau negatif. Negatif untuk memperpendek jarak setiap kata, dimana semakin besar nilainya semakin rapat, sedang untuk memperlebar jarak setiap kata menggunakan nilai positif (semakin besar semakin lebar jarak tiap kata).

Fungsi dan Kegunaan CSS word-spacing-property

CSS letter-spacing Property

Letter spacing property berfungsi untuk mengatur spasi antar karakter. Ini mungkin akan sangat bermanfaat bagi anda ketika menggunakan teks/font berukuran besar (heading) seperti yang digunakan untuk blog title (nama blog), post title (judul posting) dan teks posting lain yang berukuran cukup besar. Membuatnya dalam nilai negative akan membuat teks menjadi lebih rapat sehingga teks dapat diperpendek dan ini sangat penting untuk mensiasati lebar kolom/ruang yang tersedia.

Fungsi dan Penggunaan

CSS vertical-align Property

Salah satu property dalam kode css adalah vertical-align. Mungkin kode css ini masih terasa asing bagi beberapa blogger karena memang sangat jarang digunakan. CSS vertical-align property berlaku pada elemen image dan digunakan bersama teks. Property vertical-align berfungsi mengatur penempatan teks secara vertical di sebelah kanan dan/atau kiri sebuah image. Ada beberapa posisi penempatan teks yang bisa dipergunakan dan pengaturannya dilakukan melalui beberapa nilai/value yang sudah ditentukan. Selain pada elemen image, vertical-align property juga bisa dipergunakan pada elemen table-cell.

Value/nilai dan deklarasi css vertical-align property

CSS text-align Property - Perataan Teks dg kode css

Blog/web sangat identik dengan posting, sedang posting sendiri adalah sebuah aktifitas blogger untuk membuat artikel/tulisan hingga diterbitkan. Mengetahui tentang perataan teks melalui fungsi kode css sangatlah penting sehingga posting yang rapi dapat tercipta. Diluar hal tersebut, mengetahui fungsi dan cara menggunakan kode css perataan teks (text-align property) akan meng-efektifkan penggunaan kode html selama posting.

Value text-align property:

Attibute Align

Attribute align adalah attribute dalam kode html yang fungsinya berkaitan dengan pengaturan perataan teks dan pengaturan posisi image. Untuk perataan teks, attribute align dapat digunakan pada semua blok elemen html yang bermuatan teks. Anda bisa menggunakan attribute ini pada tag DIV, tag p dan elemen heading (h1 s/d h6).

Attribute align pada teks

• align="right" » Membuat teks rata kanan.
• align="left" » Membuat teks rata kiri.
• align="justify" » Membuat teks rata kanan-kiri.
• align="center" » Membuat teks rata tengah.

Adding css3 transition on textarea

Untuk sementara ini, menambahkan css3 transition pada textarea akan beerfungsi secara optimal hanya ketika dibuka melalui Mozilla Firefox, Google Chrome dan Safari. Efek transisi  pada "resize" sungguh memberi sentuhan luarbiasa sekalipun sayangnya belum dapat dinikmati di Opera dan IE. Jika anda menggunakan Opera atau IE sekalipun "efek resize" tak mungkin terlihat, namun demikian tentu saja masih ada efek lain yang dapat dinikmati seperti pada transisi background dan warna teks. Menggunakan Mozilla, Google Chrome dan Safari tentu saja lebih disarankan agar semua efek baru textarea dapat dinikmati (install dengan yang terbaru!). Selain menggunakan kode css3 (transition property), beberapa kode css (css property) juga ditambahkan agar css3 transition berfungsi seperti yang diharapkan.

CSS3 Transition Property

Create textarea with background image

Membuat textarea dengan sebuah background image dapat dilakukan dengan 2 macam cara berdasarkan 2 pertimbangan. Kedua cara mengahruskan kita untuk menggunakan tag style dengan beberapa kode css (css property). Cara pertama dilakukan dengan menambahkan background image secara langsung pada elemen textarea. Cara ini cukup simple karena hanya perlu menambahkan "attribute class" pada tag textarea. Sayangnya, cara seperti ini membuat "icon resize" yang biasanya terlihat diujung kanan bawah box dan menjadi ciri khas textarea ketika dibuka di Mozzila, Goggle Chrome dan Safari menjadi hilang (tak terlihat). Cara yang kedua adalah dengan cara menambahkan tag div untuk membungkus tag textarea. Tag div inilah yang nantinya diberi background image sebagai latar belakang, sementara pada textarea ditambahkan background rgba dan icon resize agar textarea tetap terlihat sebagaimana mestinya.

Membuat background image pada textarea dg kode css sederhana

Creating beautiful textarea with CSS3

Dahulu kala..., ketika css3 belum lagi ada...., textarea harus diterima apa adanya dengan tampilan ala kadarnya. Jauh dari menarik karena tak banyak yang dapat dilakukan untuk membuatnya terlihat lebih cantik. Tetapi kini anda bisa saja tertipu oleh bentuk dan tampilannya. Dia bisa didandani menjadi sebuah box bagi teks yang sangat elegan dengan rupa bisa dirubah sesuai selera pengguna. Satu yang sangat penting untuk tetap membuatnya terlihat sebagai textarea adalah tetap menampilkan "tanda resize" diujung kanan bawah box sebagai sebuah ciri khusus textarea. Tanda khusus ini bisa diganti dengan sebuah icon kecil dengan bentuk serupa agar berbagai kode css baru bisa dimanfaatkan secara maksimal guna memperindah textarea. Kode CSS, khususnya css3 menjadi rahasia sekaligus kunci bagi perubahan tampilan textarea.

Textarea css3-1

Highlight All, Select All in Textarea

Banyak hal bisa dilakukan melalui textarea, seperti misalnya untuk link exchange atau tukar link. Textarea bisa juga digunakan untuk posting kode html, kode css atau javascript. Agar pembaca/pengunjung blog dapat dengan mudah mengcopy seluruh konten yang tersimpan dalam textarea anda dapat menambahkan fungsi highlight all/select all. Javascript yang sangat sederhana dapat ditambahkan untuk menciptakan fungsi tersebut. Javascript dapat disimpan terpisah, namun dapat juga dibuat terpadu dalam html textarea.

Highlight All/Select All tanpa "button select"

Tag Style, CSS Specific for IE (Internet Explorer)

Membicarakan tentang kode kode html dan Internet Explorer (IE) kadang terasa menyedihkan dan bahkan bikin stress atau sesekali emosi menyeruak. Yah...., bagaimana tidak...?! Setelah semua browser yang lain oke-oke saja tetapi ketika kita coba di IE ... e.... ternyata apa yang kita buat tak berfungsi sebagaimana yang diharapkan. Membuat kode yang dikhususkan bagi IE terpaksa harus dilakukan. Salah satu yang paling sering dibutuhkan adalah membuat kode css dalam tag style yang dikhususkan untuk IE.

Tag style - kode css khusus IE

HTML textarea tag

Belajar CSS, tutorial css, javascript, demo online, html editor online, html, xHTML, tutorial desain blog, tutorial css3

Textarea merupakan sebuah elemen yang secara khusus berfungsi sebagai area bagi teks. Dikatakan demikian karena elemen ini hanya menampilkan teks dan tidak bagi yang lain. Semua teks ditampilkan seperti apa yang tertulis, sehingga ketika anda bermaksud menampilkan sebuah image dalam bentuk kode HTML di textarea, maka yang akan terlihat bukanlah image yang diinginkan, melainkan kode HTML seperti yang dituliskan. Sebagai contoh anda bisa melihatnya di bawah ini:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIy8YCRcFO_z5t4Infs6zDAhdDyTZASiBLZGKR_rfxdP7Fi-cdXoJcBI5hcKYJhzkjMS_F7xKNk-tN-T75ujfcNDeMlLOHUmRoYGHrHoleJhhx9c14qG078bQT6tW8m2vcHFmVfe8-NxM/s400/gambar-harimau-02-400x300.jpg" width="400" height="300" alt="Singa Jantan" />

Textarea ditampilkan sebagai sebuah box dengan tinggi dan lebar yang dapat diatur melalui attribute rows (tinggi/height) dan cols (lebar/width) dengan nilai dalam bentuk angka.

Width Property

Belajar CSS, tutorial css, javascript, demo online, html editor online, html, xHTML, tutorial desain blog, tutorial css3

CSS width property lebih banyak menggunakan satuan px, namun demikian sebenarnya masih ada beberapa satuan lain yang dapat digunakan pada deklarasi width.

Value/nilai yang digunakan pada CSS width property

• inherit » Lebar elemen akan sesuai/sama besar dengan width elemen/box yang ditempatinya.
• auto » Perhitungan width dilakukan browser.
• px » satuan pixels (px) paling banyak digunakan pada desain blog/web.
• em » 1em ekuvalen dengan 16px
• cm... dll »

Opacity Property

Belajar CSS, tutorial css, javascript, demo online, html editor online, html, xHTML, tutorial desain blog, tutorial css3

Opacity effect atau efek transparansi (sering juga disebut blur efect) diciptakan melalui opacity property. Penyebutan sebagai efek transparansi atau blur effect disebabkan transparansi yang tercipta ketika opacity property digunakan. Anda bisa menggunakan efek opacity pada box, image atau obyek lain seperti teks. Meskipun opacity effect dapat digunakan tanpa melibatkan hover effect, namun pada kenyataannya lebih banyak desain blog/web yang menggabungkan fungsi css opacity property dan hover effect secara bersamaan. Dalam perkembangan terakhir, setelah css3 mendapat dukungan penuh dari beberapa browser besar, bahkan efek transparansi (transparency effect) ini bisa dibuat lebih atraktif dengan menambahkan css3 transition property, css3 animation property dan css3 transform property. Yang sangat perlu diperhatikan ketika menggunakan opacity property adalah "penggunaan kode (deklarasi css) yang berbeda untuk Internet Explorer (IE).

Adding class to set the position of image post

Menjadi seorang blogger yang sekaligus juga mengetahui bagaimana desain blog dibuat berikut kode yang digunakan menjadi sesuatu yang sangat menarik. Menjadi blogger memang "tak hanya sekedar bernilai sebuah posting", namun masih banyak hal lain yang juga sangat menantang dan seringkali bahkan membuat lebih banyak waktu tersita. Salah satunya adalah mencoba membuat berbagai kode baru dengan tujuan menciptakan posting dengan kode lebih sederhana namun mempunyai kualitas dan tampilan lebih baik. Image posting merupakan salah satu diantaranya dan melakukan itu dapat dilakukan dengan memanfaatkan property css. Tentu saja memahami kode css menjadi kunci segalanya dan itu hanya bisa terjadi dengan lebih banyak belajar css melalui tutorial css yang banyak tersedia di berbagai blog/web atau dari berbagai buku tentang css & kode html.

CSS display property

Dari nilai-nilai yang digunakan pada css display property, mungkin yang sedikit agak membingungkan adalah membedakan antara nilai "inline" dan "inline-block", terlebih ketika nilai "properti display" ini diterapkan dalam elemen berbeda. Melalui "tutorial dasar css" atau "tutorial basic css" dalam "Belajar Kode CSS & Design Blog" ini diharapkan bisa sedikit membantu untuk lebih memahami "display property" dan penggunaannya sehingga pemanfaatan kode sekaligus penataan desain blog dan posting dapat lebih optimal. Demo online yang digunakan (di halaman terbawah) diharapkan juga mampu menciptakan pemahaman yang lebih baik dan lebih cepat dengan mencoba melakukan berberapa test kode css dan html, termasuk didalamnya tentang css display property yang lain seperti misalnya "display:table", "display:table-row", "display:none", "display:run-in" atau "display:block".

Tag HTML h1 s/d h6 - html h1 to h6 tags

Tag h1 s/d h6 adalah elemen yang berfungsi untuk membuat "judul" diberbagai bagian blog dan lebih dikenal sebagai "heading". Elemen h1 s/d h6 ditetapkan dalam 6 tingkatan "heading" dengan ukuran font berbeda. Tag h1 merupakan elemen dengan font berukuran terbesar, kemudian diikuti tag h2 hingga h6. Dalam desain web, tag h1 lebih banyak digunakan sebagai pembentuk "blog title" atau untuk membuat "nama blog". Tag ini selanjutnya dipadukan dengan tag "a" hingga membentuk sebuah "link".
Sekalipun tanpa pengaturan secara khusus, semua browser secara otomatis akan menampilkan tag h1 s/d tag h6 (heading) dengan bentuk dan karakter tertentu (dg ukuran font tertentu sesuai tag yg digunakan), namun pengaturan ulang melalui kode css sangat penting dilakukan agar didapatkan bentuk dan karakter tag h1 s/d h6 yang sesuai dengan keinginan (ini menunjukkan betapa pentingnya belajar kode css sekaligus desain blog/web). Pengaturan terutama dilakukan pada ukuran font. Pengaturan yang berbeda juga dapat dilakukan saat tag h1 s/d h6 digunakan bersama dengan tag "a" untuk membuat link.

CSS position Property

Pengaturan posisi elemen html dapat dilakukan dengan menggunakan margin dan property left, top, right & bottom. Tutorial css tentang position property akan sangat membantu dalam memahami pengaturan posisi elemen html. Mempelajari pengaturan posisi elemen sekaligus juga akan membuat kita belajar css lebih detail tentang left, top, right dan bottom property serta hubungannya dengan position property.

CSS position Property

HTML <p> tag

HTML "p" tag ditandai dengan tag pembuka <p> dan tag penutup </p>, dimana tag "p" mendefinisikan sebuah fungsi paragraf dan tag ini secara khusus diperuntukkan sebagai "box bagi teks". Karena memang mendefinisikan sebuah paragraf, secara otomatis semua browser akan membuat perpindahan ruang (menciptakan margin dengan tag "p" dan tag lain berikutnya) sehingga pada halaman akan terlihat sebagai perpindahan alinea baru. Sekalipun tag "p" sudah mempunyai karakter yang bersifat khusus seperti di atas, namun jika dikehendaki dapat dilakukan perubahan melalui kode css. Kondidi seperti ini sebenarnya tidak hanya berlaku bagi tag "p" akan tetapi juga berlaku bagi semua tag yang lain seperti halnya tag "DIV".

Attribute Name dan id sebagai Link

Hyperlink (Link) tak hanya dapat menghubungkan sebuah dokumen html di halaman web/blog dengan dokumen html yang lain pada halaman berbeda (baik di blog/web yang sama atau berbeda), namun bisa juga digunakan untuk menghubungkan antar dokumen dalam satu halaman yang sama. Menggunakan link untuk tujuan seperti ini dapat dimanfaatkan untuk berpindah dari satu bagian ke bagian yang lain (misalnya perpindahan antar paragraf, top - bagian teratas halaman, atau ke bottom - bagian terbawah halaman).

Attribute Name

HTML DIV tag - Kode HTML tag DIV

Tag DIV adalah salah satu tag dalam kode html yang paling banyak digunakan. Tag DIV merupakan sebuah "wadah" bagi semua dokumen (teks, image dll) dan di dalam tag DIV biasanya berisi sekaligus beberapa elemen html/tag html. Dalam desain web/blog, tag DIV bahkan menjadi wadah (memuat) keseluruhan halaman-halaman blog yang didalamya juga berisikan tag div dan beberapa tag yang lain. Sekalipun tag DIV secara khusus mempunyai karakter/sifat bawaan seperti "display:block", namun sifat-sifat ini dapat dirubah menggunakan kode css.
Dalam penggunaanya, beberapa attribute atau properti css harus ditambahkan agar tag DIV mampu berfungsi sesuai dengan apa yng diharapkan. Dalam bentuk yang paling sederhana anda dapat membuat boks/kotak dengan memanfaatkan tag DIV.

Menggabungkan/Combining Image & Text Links

Menggunakan image link dan text link secara bersamaan memang jarang digunakan karena sebenarnya sebuah link bisa dibuat dalam bentuk image link atau text link, namun demikian mungkin saja pada kasus tertentu image link dan text link dirasakan perlu digunakan seara bersamaan dengan tujuan tertentu. Menggabungkan keduanya perlu menambahkan tag lain selain tag "a" agar image dan text links ditampilkan dengan cukup menarik. Anda bisa memanfaatkan tag "p", tag "div", tag "h1 s/d h6", tag "span" atau tag yang lain.

Kode dasar gabungan text link & image link

<a href="URL" title="Link title here!">
<img src="image.jpg" width="xx" height="xx" style="xx" />
Text Link here
</a>

Image Link - An image as a link

Membuat image sebagai link memang bisa dilakukan secara langsung menggunakan xHTML, namun demikian akan lebih praktis dan memudahkan blogger apabila "image link" tertentu dibuat dengan menggunakan bantuan kode css sehingga kode html yang digunakan menjadi lebih sederhana. Hal-hal seperti inilah yang membuat "arti pentingnya belajar css" untuk mendukung aktifitas ngeblog/blogging/posting.

Kode dasar membuat image sebagai link

<a href="URL" title="Link title here!"><img src="image.jpg" alt="text here" width="xx" height="xx" /></a>

Text Link - Using a text as a link

Belajar kode css memang tak ada habisnya, apalagi kini css sudah semakin jauh berkembang hingga css3 yang mampu membuat banyak fungsi baru yang jauh lebih menakjubkan karena mampu menggantikan beberapa peran javascript. Kemajuan baru kode css yang terus dipacu tak lepas dari upaya membuat kode css sebagai basis utama pengembangan desain blog/web. Perkembangan yang terakhir dari css3, bahkan sudah sampai pada titik dimana berbagai efek animasi dan 3 dimensi dalam berbagai rupa dapat diciptakan hingga blog/web semakin terlihat atraktif. Browser-browser besar juga saling berlomba untuk sesegera mungkin dapat mendukung penuh perkembangan yang terjadi pada kode css3. Sekalipun detik ini css3 begitu terasa dominan perannya, namun karena setiap perkembangan yang terjadi pada kode css adalah saling melengkapi, maka mempelajari css2 dan css tetap menjadi dasar untuk memahami dan membangun desain web/blog. Salah satu yang perlu kita ketahui adalah cara membuat text link (membuat teks sebagai link).

HTML Links

HTML links dikenal juga sebagai html "a" tags (tag "a") karena untuk membangun tag yang berfungsi sebagai hyperlink (link) digunakan tag "a". HTML links berfungsi untuk menghubungkan sebuah dokumen ke dokumen yang lain, dimana dokumen yang lain (baru) dapat berupa dokumen yang berada di dalam web/blog atau berada diluar blog (di blog/web lain). Dokumen baru dapat berupa teks, image, sekelompok teks atau image atau bisa juga gabungan teks, image dan unsur lainnya.

Bentuk link dalam kode html

CSS Styling Link

CSS styling link selalu menjadi kode yang dipastikan "selalu ada" dalam desain web/blog. Kode ini sangat penting dan selalu ditempatkan di bagian atas pada susunan kode css. Biasanya berada tak jauh dari syntax body. Penggunaan css styling link tak lepas dari 'digunakannya kode html tag "a" (html "a" tag) yang berfungsi untuk membuat link. Link sendiri berfungsi untuk membuat suatu hubungan dengan blog/web lain atau bisa juga dengan satu atau beberapa bagian didalam web/blog itu sendiri. HTML tag "a" dapat dengan mudah dikenali melalui berbagai ciri/tanda:

CSS text-decoration Property

CSS text-decoration property dapat dipergunakan pada semua elemen html teks. Fungsi properti css ini untuk membuat dekorasi teks. Sekalipun pada umumnya hanya digunakan pada teks link, namun sebenarnya css text-decoration dapat digunakan pada semua teks, baik berupa teks link ataupun teks biasa. Ada beberapa nilai teks-decoration property tetapi yang paling sering digunakan adalah "underline" (lebih banyak diaplikasikan pada teks link). Bentuknya berupa sebuah garis lurus mendatar (horizontal) tepat di bawah teks.

Custom Cursors - Buat Cursor Image/Icon

Jika mungkin anda ingin sesuatu yang berbeda dengan cursor di blog anda, dengan memanfaatkan cursor image atau cursor icon maka cursor default bisa langsung berubah menjadi cursor cantik dalam berbagai rupa. Semua tergantung selera! Anda bahkan bisa menggunakan foto profil sebagai cursor. Hanya perlu diperhatikan bahwa cursor image ini sekalipun dapat menggunakn image berukuran besar, namun sebaiknya gunakan saja yang berukuran relatif kecil sehingga tidak mengganggu pengunjung. Ya..., bisa-bisa jika kita tak berhati-hati malahan membuat pengunjung merasa malas karena terganggu tampilan icon cursor. Mengganti cursor dengan sebuah image atau icon dapat dilakukan menggunakan kode css (bersifat permanen) atau bisa juga melalui kode html (berlaku khusus pada elemen tertentu).

CSS Cursor Property

Berbagai macam cursor dapat digunakan di web/blog, namun sebaiknya setiap cursor digunakan berdasarkan urgensinya. merubah cursor tanpa aturan yang benar kadang-kadang justru membuat pengunjung merasa tak nyaman. Bukan sebuah hal positif yang diharapkan tentunya, terlebih jika hanya gara-gara cursor kemudian pengunjung buru-buru meninggalkan blog karena merasa risi. Setiap elemen dalam web/blog dapat menggunakan cursor yang berbeda. Menggunakan dan menampilkan cursor hanya perlu menambah sebuah property cursor berikut value/nilai sesuai bentuk cursor yang ingin digunakan. Anda bisa menggunakan properti cursor melalui kode css atau langsung ditanamkan pada tag html.

Menggunakan cursor property dg kode css

CSS Float Property

CSS Float Property berhubungan dengan pengaturan posisi sebuah obyek secara horizontal. Penggunaan css float property bukan hanya sekedar untuk kepentingan pengaturan posisi obyek/elemen saja, namun akan berkaitan dengan elemen lain disekitarnya. Penggunaan css float property selalu dibarengi dengan properti margin yang berfungsi untuk mengatur jarak obyek dengan elemen lain termasuk teks. Akan sangat berguna untuk penataan image/gambar dan elemen lain dalam desain blog/web maupun penataan halaman posting. Dalam penggunaanya, nilai yang banyak dimanfaatkan untuk pengaturan dan penataan blog/web adalah float:left dan float:right, sekalipun masih ada 2 nilai css float property yang lain (float:none dan float:inherit). Anda bisa melihat fungsi dan kegunaan css float propertypada "gambar monyet" di samping. CSS float property membuat gambar monyet berada di sebelah kanan halaman, sedangkan margin menciptakan jarak antara "gambar monyet" dengan teks disisi sebelah kiri dan bawahnya. CSS float property tersebut juga membuat teks naik sejajar dengan ujung teratas gambar. Hal seperti ini hanya dapat terjadi melalui penggunaan css float property. Anda akan melihat perbedaan ini melalui demo yang ditampilkan ujung terbawah posting.

CSS3 text-shadow Property

Membuat blog menjadi lebih indah dan menarik adalah sebuah tantangan. Kode css menjadi pilihan utama sebagai sebuah solusi dan belajar tentang kode css adalah kuncinya, terlebih property css3. Ya..., fenomena baru dalam perkembangan desain blog selain html5 adalah css3. Baru beberapa tahun belakangan ini css3 mengalami perkembangan yang signifikan dan terhitung sangat pesat karena keseimbangan yang diberikan browser untuk memberikan dukungan penuh secepat mungkin. Salah satu property css3 yang sudah support di semua browser dan menggunakan kode seragam adalah text-shadow property. Text-shadow berfungsi menciptakan efek bayangan pada teks (shadow effects) yang mampu menyuguhkan tampilan teks lebih menarik dengan berbagai alternatif pilihan bentuk shadow melalui pengaturan nilai/value text-shadow property.

Posisi shadow

Tag Iframe - html iframe tag

Mungkin pernah anda jumpai sebuah blog/web ditampilkan di dalam blog/web. Itulah fungsi tag iframe. Digunakan untuk menampilkan sebuah dokumen html di dalam dokumen html. Selain untuk menampilkan blog/web di dalam blog tentu saja iframe juga dapat digunakan untuk menampilkan dokumen html yang lain. Hal seperti ini seperti yang kita lihat di blogger/blogspot pada comment box. Comment editor adalah sebuah box yang dihasilkan melalui tag iframe. Didalamnya terdapat kode html lengkap sebagaimana sebuah desain web/blog, dimana digunakan tag pembuka dan penutup html, head, dan body.

Kode dasar tag iframe

Tag style - html style tag

Desain blog dibangun melalui kode html termasuk kode css di dalamnya. Kode css memegang peran luar biasa penting karena "jika diandaikan sebagai sebuah bangunan", kode css adalah kode "penentu bentuk, rupa dan tata ruang bangunan tersebut". xHTML adalah "kerangka bangunan", sedang kode css adalah "material/elemen yang membentuk dan mengatur segala elemen bangunan sehingga tercipta sebuah bangun yang tertata rapi dengan segala batas ruang dan pembagiannya serta menjadi material utama pengisi pernak-pernik penghias bangunan berikut ruangan". Kode css ini terwadahi dalam "tag style" dan pada umumnya diletakkan di dalam tag head, diantara tag pembuka (<head>) dan penutupnya (</head>). Jika ada tag style berikut dokumen css disimpan/diletakkan di dalam tag body (diantara <body> dan </body>), biasanya ini hanya dengan pertimbangan untuk memudahkan pengguna/blogger dalam menggunakan widget atau mengikuti panduan dalam tutorial blog/web. Pada beberapa kasus yang lain, penempatan tag style berikut kode css dilakukan untuk kepentingan demo yang terintegrasi dalam posting.

tag script - html script tag

Tag script selalu berhubungan dengan javascript, sedang javascript adalah salah satu elemen penting yang tak terpisahkan dari web/blog. Dengan kata lain tag script adalah salah satu tag html terpenting dalam desain web/blog dan sekaligus menjadi bagian yang tak terpisahkan dari blog/web. Tag script memuat dokumen dalam bentuk file text javascript. Dalam penggunaannya, umumnya file javascript disimpan diantara tag pembuka head (<head>) dan tag penutupnya (</head>), namun demikian tak menutup kemungkinan bahwa tag script berikut file javascript disimpan di dalam tag body di antara tag pembuka (<body>) dan penutupnya (</body>).

Contoh penulisan tag script

Attribute SRC - html src attribute

Attribute src (search) digunakan dalam sebuah tag kode html (html tag). Beberapa tag yang paling sering digunakan dalam blog/web dan menggunakan attribute src adalah tag script, tag iframe dan tag img. Value/nilai attribute src adalah URL (alamat file yang tersimpan dalam file hosting). Jika anda menggunakan file hosting diluar domain blog/web, maka URL harus ditulis secara lengkap, sedang bila file tersimpan dalam domain blog/web maka hanya perlu meuliskan folder & nama file.
Pada javascript, attribute src dituliskan dengan menyertakan attribute lain - script="tipe/javascript", sedang untuk iframe dan img bisa melibatkan beberapa attibute sekaligus.

Usemap Attribute

Usemap attribute adalah salah satu attribute css yang digunakan dalam tag img. Sekalipun jarang digunakan oleh blogger, attribute usemap dapat digunakan untuk beberapa keperluan khusus seperti misalnya memberikan keterangan pada titik-titik tertentu di senuah gambar/image, baik dalam bentuk image ataupun teks. Usemap juga bisa digunakan untuk menempatkan sebuah link. Pada penerapan yang berbeda, attribute usemap bisa juga digunakan untuk membuat daftar menu/cloud. Penggunaan usemap akan banyak ditemukan pada image yang digunakan sebagai peta/map, diamana setiap titik ditentukan melalui koordinat.

Attribute usemap dalam tag img

Tag image - html img tag

Kode html tag image (tag img) merupakan tag html yang paling sering digunakan dalam aktifitas blogger selain tag div, tag p, tag a, tag span, tag h1 s/d tag h3. Alasan mengapa tag img begitu seing digunakan adalah tingginya frekuensi penggunaan image sebagai salah satu materi posting. Bukan hal aneh karena image adalah salah satu media paling tepat untuk berkomunikasi dengan pembaca selain teks. Frekuensi penggunaan image sebagai salah satu bahan posting dan desain blog mengharuskan blogger untuk mengetahui lebih dalam tentang image, tag img serta beberapa property css yang berkaitan dengan penerbitan image dalam posting. Kode html tag img dalam penggunaan sederhana berisi attribute src dan alt dan width serta height.

CSS3 Border Radius Property

CSS3 border radius property berfungsi untuk membentuk border dengan sisi lengkung (rounded corners). Pada saat ini semua browser telah support terhadap border-radius property, bahkan semuanya sudah menggunakan kode standart. Jika pada masa sebelumnya untuk membuat sudut lengkung harus menggunakan background image, dengan hadirnya css3 border-radius property maka untuk membentuk sudut lengkung hanya perlu menambahkan kode "border-radius" yang nilainya dalam bentuk pixel (px), em, pt atau % (persen). Untuk penggunaan secara umum lebih banyak dalam satuan px karena dengan nilai ini semua browser menghasilkan output yang seragam.

Image

Unsur web/blog yang paling sering digunakan selain teks adalah image/gambar. Tidak hanya digunakan sebagai media visualisasi dalam posting, namun image memang mempunyai peran dan fungsi yang sangat besar terhadap desain blog/web berikut semua aktifitas seputar blog. Ada tiga jenis file image yang digunakan dalam web:

1. File image jpg/jpeg
   Image dalam bentuk file .jpg mempunyai kelebihan dalam detail warna. Paling lengkap dan paling bagus jika dibandingkan dengan file image yang lain. File image jpg juga dapat di kompres hingga ukuran yang jauh lebih kecil dari aslinya dengan kwalitas terjaga sehingga mempunyai efek positif terhadap kecepatan loading blog. Sifat-sifat seperti inilah yang membuat file jpg paling banyak digunakan sebagai bahan posting.
2. File image gif
   

Displays the cursor position with javascript

Javascript di bawah ini berfungsi untuk menampilkan posisi cursor pada setiap titik di halaman blog/web. Sekalipun sepertinya tak begitu dibutuhkan, namun script sederhana penunjuk posisi cusor ini sangat bermanfaat untuk aktifitas yang berkaitan dengan desain blog. Hampir semua titik di seluruh bagian blog dapat terdeteksi dengan akurasi yanga sangat baik sehingga bahkan anda dapat mengukur dimensi sebuah elemen dengan cukup mudah dan cepat. Jika anda ingin menampilkan titik koordinat sebuah elemen di halaman blog, javascript ini juga akan sangat bermanfaat sekalil. Sebagai contoh misalnya anda ingin menampilkan attribute "usemap" sebuah image.

CSS Text Property

Membicarakan tentang blog/web tentu tak akan pernah lepas dari properti "text" karena inilah media yang digunakan sebagai sarana komunikasi antara pemilik blog/web dan pengunjung selain image atau media yang lain. Menggunakan property text dalam web akan berkaitan erat dengan 3 css property lain.

1. color property
2. text-align property
3. text-transform property

Text Color

Warna teks dibentuk melalui color property. Berbagai macam warna dapat digunakan dimana nilai warna dapat menggunakan 3 pilihan kode warna.

Kode CSS

Kode css adalah salah satu elemen penting dalam desain web/blog. Melalui kode inilah segala sesuatu yang berkaitan dengan desain web/blog diatur. Pengembangan yang dilakukan terhadap kode css berlangsung secara terus-menerus dan dilakukan secara intensif sehingga pada perkembangannya kode css ini mempunyai peran yang sangat vital atau bahkan bisa dikatakan sebagai "soko guru" perkembangan dan pengembangan desin web/blog. Hasil pengembangan kode css menciptakan hasil nyata yang membuat kode ini berkembang dalam 3 versi, dimana versi terakhir yang disebut sebagai css3 mampu menggantikan berbagai fungsi yang pada masa sebelumnya hanya dapat dibuat menggunakan javascript. Melihat pesatnya perkembangan kode css3, bukan tak mungkin jika pada masa ke depan desain web/blog akan lebih banyak menyingkirkan peran javascript. Perkembangan terkini dari css3 adalah penggunaan css3 transition property, css3 transform property dan css3 animation property yang bahkan mampu menciptakan berbagai animasi dalam rupa 3 dimensi (3D).

CSS Outline Property

Sekalipun outline properties mempunyai value yang sama dengan border dan juga mampu memberikan hasil seperti layaknya border, namun anda harus berhati-hati saat menggunakan outline property. CSS outline property tak bisa dimasukkan sebagai bagian dari box, sekalipun outline selalu berada disekeliling box (posisinya berada setelah content, padding dan border). Dia seperti sebuah bayangan yang mampu menabrak apapun tanpa menggeser unsur/box/bidang yang ada disekelilingnya. Jika boleh dikatakan, outline property seperti sebuah elemen dengan absolute position.

Cara penulisan outline property

outline: style | color | width;

CSS Border Properties

CSS Border Properties menjadi satu unsur yang hampir tidak pernah lepas dari css box model. Border properties banyak dmanfaatkan untuk memperindah box, membedakan sebuah box dengan box lain serta memperjelas batas sebuah box. Ada tiga properti css border yang masing-masing mengatur ketebalan border, warna border dan style border. Masing masing dapat digunakan di ke-empat sisi box (top, right, bottom dan left).

• border-width property :
  border-width property berfungsi untuk mengatur ketebalan border. Ada beberapa satuan Value/nilai yang bisa dipergunakan seperti pixel, pt, em, thick, thin, medium dll.

CSS Padding Properties

Padding adalah bagian yang tak terpisahkan yang sangat penting dalam desain web/blog. Posisi padding berada antara border dan content (jika menggunakan border). Memanfaatkan padding adalah salah satu cara untuk dapat memperoleh penataan desain yang rapi dan menarik, selain menjadi batas pemisah antara content dengan unsur lain dalam blog/web. Dalam perhitungan, padding termasuk bagian dari ukuran sebuah box, setelah content dan border. Jika dibuat dalam bentuk perhitungan akan seperti ini:

Menghitung ukuran box

mybox{
      width:200px;
      height:100px;
      border:10px solid grey;
      padding:10px 15px 5px 70px;
      margin:25px 10px;
}

CSS Margin Properties

Properti css "margin" pada intinya berfungsi sebagai pengatur jarak sebuah box/kotak dalam desain web/blog dengan elemen lainnya agar sebuah blog/web dapat tertata dengan baik. Properti margin merupakan unsur terluar box setelah border, padding dan content. Nilai/value margin dapat menggunakan prosentase, auto, inherit, atau satuan lain dalam bentuk pixel (px), pt dan em. Secara umum satuan yang paling sering digunakan adalah pixel. Margin bersifat melingkupi sebuah box sehingga pengaturan margin dapat dilakukan dari 4 (empat) sisi berbeda.

• margin-top : untuk mengatur jarak dengan unsur lain disebelah atas.
• margin-right : untuk mengatur jarak dengan unsur lain disebelah kanan.
• margin-bottom : untuk mengatur jarak dengan unsur lain disebelah bawah.
• margin-left : untuk mengatur jarak dengan unsur lain disebelah kiri.

CSS Box Model

CSS Box Model adalah salah satu unsur dasar yang sangat penting dalam desain blog yang harus dipahami dengan baik. Hampir semua bagian blog/web dikenali sebagai "box atau kotak" yang didalamnya terdiri atas margin, border, padding dan content. Box atau kotak ini menjadi sangat akrab di telinga blogger bukan saja karena setiap saat selalu terdengar atau terbaca dan bahkan bersentuhan, namun memang istilah ini menjadi istilah pokok dalam dunia per-blogger-an. Anda pasti amat sering mendengar istilah kotak komentar atau comment box, kotak widget, kotak/boks posting, box edit html, kotak pencarian, serta beberapa istilah lain yang selalu diawali dengan kata boks/kotak. Box atau dalam bahasa Indonesia dikenal sebagai "kotak" atau "boks" terdiri atas 4 unsur:

Multiple Background Images

Menggabungkan beberapa image menjadi satu image tidak lagi harus dilakukan dengan menggunakan software image editing. Anda bisa memanfaatkan property css3 multiple background images. Dengan properti ini beberapa gambar image bisa digabungkan menjadi satu hingga menghasilkan sebuah image baru. Anda bahkan bisa juga menggabungkan image animasi gif ke dalamnya sehingga image baru yang nantinya dihasilkan tentu saja terlihat sebagai image animasi gif. Agar image bisa ditampilkan secara sempurna menurut keinginan, beberapa background-properti lain bisa ditambahkan kedalamnya sehingga posisi background, pengulangan background dan ukurannya bisa diatur.

Kode dasar multiple background images

background-image:url(image-1.jpg), url(image-2.gif), url(image-3.png), url(image-4.jpg);

Menggabungkan beberapa Background Property

Background Property menjadi sangat penting untuk dibahas secara khusus karena melalui background property ini beberapa properti background dapat dituliskan menjadi sebuah kode terpadu yang membuat penulisan kode css menjadi lebih efisien, praktis dan efektif. Anda dapat menggabungkan penulisan background-color property, background-image property, background-position property dan background-repeat property hanya dalam sebuah kode sehingga bentuknya menjadi lebih pendek.

Contoh beberapa kode background-property

background-color:red;
background-image:url(image.jpg);
background-repeat:no-repeat;
background-position:top center;
background-attachment:fixed;

Background Origin Property

Background origin property memungkinkan pengaturan background sebuah elemen/box agar bisa dimulai pada tiga ujung bagian berbeda. Border, padding dan content box. Agar background dapat berfungsi secara optimal, background size property harus dilibatkan di dalamnya. Penggunaan nilai/value % (persen) jadi pilihan paling tepat untuk memudahkan pengaturan. Jika ingin menambahkan property background lainnya, maka background position dapat digunakan selain tentu saja background-repeat property dan background-image property.

Kode Background origin property

• background-origin:border-box
• background-origin:padding-box
• background-origin:content-box

Background Clip Property

Background clip property merupakan salah satu property css3 yang sudah mendapat dukungan penuh secara sempurna dari browser besar seperti Opera, Mozilla Firefox, Safari, Google Chrome. Semua browser juga sudah menggunakan kode yang sama sehingga membuat pengguna lebih edisien saat menggunakan kode css. Background clip property berfungsi untuk mengatur posisi background yang didasarkan atas border, padding dan content. Pengaturan penentuan posisi dilakukan dengan 3 value berbeda.

Penulisan kode background clip property

• background-clip:border-box;
• background-clip:padding-box;
• background-clip:content-box;

Background Size Property

Kemajuan besar telah banyak dicapai pada kode css. Background size property adalah salah satu diantaranya. Sebuah property yang membuat designer blog atau blogger lebih mudah dalam mengaplikasikan image sebagai sebuah background image karena dengan properti baru ini ukuran image menjadi lebih fleksibel. Anda dapat merubah ukuran sebuah background image sesuka hati hanya dengan menambahkan value/nilai yang sesuai dengan ukuran yang diharapkan pada background-size property. Jika sebelumnya kita dipusingkan untuk menggunakan software pembuat gambar/image editing dengan sebaik mungkin agar mendapatkan ukuran background setepat mungkin, kini hal ini bisa sedikit diabaikan karena kesalahan ukuran background image yang tak terlalu fatal dapat kita koreksi melalui background size property.

Background Attachment Property

Background attachment property secara spesifik digunakan untuk pemasangan background image pada body. Background image yang digunakan bisa dibuat dalam bentuk berulang/repeat atau tunggal/tak berulang/no-repeat. Pada umumnya background attachment lebih banyak menggunakan background tunggal dengan ukuran besar yang memenuhi halaman blog/web. Background attachment mempunya tiga macam value/nilai.

Value/nilai background attachment

Ada dua nilai/value yang digunakan pada background attachment property.

• background-attachment:fixed;
• background-attachment:scroll;

Background Position Property

Background position property merupakan salah satu dari css background yang sangat penting saat background image property digunakan. Berfungsi untuk mengatur posisi background dalam arah vertical dan horizontal. Background position property biasa dipekerjakan bersama dengan background image property, background repeat property dan background size property, sekalipun yang paling sering adalah bersama background image property.

Value/nilai background position property

Ada 3 value yang sering digunakan untuk pengaturan posisi background.

Background Repeat Property

Properti background repeat berfungsi untuk menciptakan efek pengulangan pada penggunaan image sebagai background (background image property). Dengan fungsi tersebut background repeat property dimanfaatkan untuk melengkapi fungsi yang berlaku pada background image property. Sebuah background image dapat diatur untuk ditampilkan sebagai background tunggal atau background berulang.

Pengulangan background image

Ditinjau dari cara penulisan kode, fungsi dan kegunaannya, background repeat property dapat dibedakan menjadi:

Background Image Property

Background image merupakan salah satu background property yang cukup disukai karena mampu menghadirkan "sesuatu yang tak mampu diciptakan melalui background color property". Tak dapat dipungkiri karena memang hampir semua fungsi backgroud color dapat digantikan oleh background image, sedangkan background color tak mampu menggantikan hampir sebagian besar peran yang mampu diberikan oleh sebuah background image. Sebagai contoh adalah background image mampu menghadirkan sebuah background berupa gambar pemandangan pegunungan dengan detail lengkap disertai berbagai pohon dan gunung serta burung yang terlihat sedang terbang tak mungkin dibuat atau digantikan melalui background color property.

Background Color Property

Background color property merupakan efek background yang paling sering digunakan dan hingga saat ini dikembangkan dengan sangat intensif melalui css3. Berkat pengembangan tersebut penggunaannya menjadi semakin variatif dan dalam beberapa hal bahkan mampu menggantikan fungsi efek background yang sebelumnya harus menggunakan background image seperti yang terjadi pada background gradient. CSS3 background gradient pada saat ini banyak digunakan untuk menggantikan fungsi efek dari background gradient dari sebuah image. Kelebihan utama background color dibandingkan background image adalah pada beban yang jauh lebih ringan sehingga beban loading blog tak terlalu bertambah berat. Bahkan, banyak image kini bisa dibuat hanya dengan memanfaatkan kode css dan css3 yang melibatkan property backgrouns color, background gradient dan border-radius property.
Dalam penggunaanya ada beberapa jenis background color yang dapat dipergunakan dan hampir semuanya telah mendapat dukungan penuh dari browser ternama seperti Mozilla, Google Chrome, Safari, Opera dan IE.

CSS Background

CSS background berfungsi untuk membuat efek background pada sebuah elemen, dimana background dapat berupa background color (warna) ataupun background image (gambar). Property background color dan background image ini masih dapat diatur dengan beberapa background property lainnya sehingga sehingga background dapat dibentuk atau diatur sesuai keinginan.

CSS Background Property

Klik link di bawah ini untuk mengetahui bagaimana setiap background property bekerja. Setiap link memuat tutorial secara lengkap berikut demo.

1. background-color-property
2. background-image-property
3. background-repeat-property
4. background-position-property
5. background-attachment-property
6. background-size-property
7. background-clip-property
8. background-origin-property

Selector id dan class - id and class selectors

Ketika anda membuka kode yang digunakan dalam desain blog/web akan banyak menemukan kode html dengan selector id dan class. Kedua selector ini berfungsi untuk membentuk style khusus pada elemen html. Id dituliskan dalam bentuk id="xxx" sedang class dituliskan dalam bentuk class="xxx". Penulisan id dan class dalam elemen html berhubungan dengan penggunaan selector id dan class dalam kode css yang digunakan. Dalam kode css, selector id dituliskan sevagai "#" dan class sebagai ".".

Penggunaan selector id dan class

• Selector id digunakan secara khusus pada sebuah elemen tunggal yang berdifat unik. Sebuah elemen dengan id tertentu biasanya diikuti oleh beberapa elemen lain dengan class tertentu ataupun tanpa selector. Elemen dengan selector id bersifat atau mempunyai kekuatan tertentu yang tak dipengaruhi oleh id yang berbeda. Jika sebuah elemen dapat mempunyai beberapa class secara bersamaan, maka id hanya digunakan secara tunggal.

Syntax CSS

Dalam kode css dikenal istilah syntax. Sebuah syntax terdiri atas css selector dan satu atau beberapa buah deklarasi yang didalamya berisikan properti css dan nilainya (property and value). Untuk membangun desain blog/web bisa berisikan puluhan hingga ratusan syntax yang masing-masing membentuk fungsi dan kegunaan berbeda.

Contoh Syntax

h3{
      font-size:18px;
      color:red;
      font-weight:bold;
}

Desain dasar blog

Agar lebih mengetahui tentang blog, setiap blogger harus mengetahui desain dasar blog yang dikenal sebagai template atau theme. Mengetahui desain dasar blog akan membuat blogger tertarik untuk belajar lebih banyak tentang bagaimana sebuah blog dibuat hingga mempunyai bentuk dan tampilan yang sangat beraneka ragam. Mengetahui desain blog akan menuntun kita untuk mampu memaksimalkan setiap kode penyusun blog, kemampuan yang pada akhirnya akan membuat orang dapat melakukan berbagai perubahan desain agar blog ditampilkan lebih menarik dan kode penyusun blog juga dapat dipergunakan secara tepat dan efektif.

Cara & langkah membuat Blog di Blogger

Agar lebih mudah mempelajari desain blog dan kode css, anda harus mempunyai sebuah blog yang memberi kelonggaran melakukan berbagai editing kode. Blog tersebut dapat dibuat di blogger. Berbeda dengan di wordpress dan blogdetik yang masih banyak memberi batasan pada blogger untuk melakukan proses editing di template/theme, blogger benar-benar memberi kelonggaran yang sangat luar biasa hingga kita dapat mengakses desain blog hingga ke bagian terdalam antara tag pembuka dan penutup head serta tag pembuka dan penutup body.

Apakah yang dimaksud dengan blog atau web?

Memiliki blog atau web menjadi sebuah trend baru dikalangan pelajar, artis, mahasiswa dan banyak pengguna internet lainnya seperti pebisnis, pedagang atau bisa saja petani. Apapun bisa kita lakukan melalui web/blog. Anda bisa menulis artikel, membuat sebuah pengumuman (sekolah, universitas, yayasan dll), membuat sebuah polling atau bahkan juga berbagai aktifitas bisnis atau jual beli (bisnis/jual beli online).

Pengantar

Kemajuan dalam bidang elektronika khususnya digital berjalan dengan sangat cepat. Perkembangan tak lagi dihitung dalam jangka waktu bulan atau bahkan tahun. Kini, setiap detik selalu ada sebuah perkembangan baru yang sebelumnya sama sekali tak terbayangkan. Sebagai contoh adalah kemajuan dalam bidang telekomunikasi, khususnya HP. Jika beberapa tahun yang lalu anda hanya dapat menjumpai HP dalam ukuran jumbo (sebesar radio portable seukuran tas tangan), pada era sekarang bentuk dan ukuran HP bisa hanya sebesar sepertiga telapak tangan orang dewasa dengan tebal hanya beberapa milimeter.