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

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 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

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

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).

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".

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

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.

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.

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 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.