CSS menyediakan properti yang cukup lengkap dalam memformat teks. Mulai dari mengatur warna teks, posisi teks, dekorasi teks dan sebagainya dapat disetting melalui CSS. Selain itu kita juga bisa mentransformasikan teks dan mengatur spasi antar huruf dan kata pada teks melalui CSS. Bahkan mengatur arah teks (text direction) juga bisa dilakukan dengan CSS.

Ada 13 properti yang bisa digunakan untuk memformat teks, yaitu color, text-align, text-decoration, text-transform, text-indent, text-shadow, letter-spacing, word-spacing, line-height, vertical-align, white-space, direction dan unicode-bidi.

Berikut ini penjelasan masing-masing properti tersebut :

1. color

Adalah Adalah properti CSS yang digunakan untuk memformat warna teks.

Ada tiga cara dalam menentukan nilai warna, yaitu :

• menggunakan nama warna seperti red, blue, green dan sebagainya
• menggunakan kode heksa warna seperti #ff0000 untuk warna merah dan #0000ff untuk warna biru, dan seterusnya.
• menggunakan nilai RGB seperti rgb(255,0,0) untuk warna merah, rgb(0,0,255) untuk warna biru dan seterusnya.

Contoh penggunaan CSS color :

body {
    color: #e0ffff;
}

Kita bisa berlatih CSS color disini >>

2. text-align

Adalah properti CSS yang digunakan untuk mengatur alignment text horizontal. Alignment teks bisa diset left, right, center dan justify.

Left berarti teks rata kiri, right berarti rata kanan, center berarti rata tengah dan justify berarti rata kiri kanan.

Contoh penggunaan CSS text-align :

p {
   text-align: center;
}

Kita bisa berlatih CSS text-align disini >>

3. text-decoration

Adalah properti CSS yang digunakan untuk mengeset dan membuang dekorasi teks.

Ada empat nilai yang bisa ditetapkan pada properti text-decoration, yaitu :

• none, berfungsi membuang semua dekorasi teks.
• underline, berfungsi membuat teks bergaris bawah.
• line-through, berfungsi membuat teks bergaris tengah
• overline, berfungsi membuat teks bergaris atas.

Contoh penggunaan CSS text-decoration :

a {
   text-decoration: underline;
}

Kita bisa berlatih CSS text-decoration disini >>

4. text-transform

Adalah properti CSS yang digunakan untuk mentransformasi huruf pada teks.

Ada 3 nilai yang bisa ditetapkan pada properti text-transform, yaitu :

• uppercase, berfungsi mengubah semua huruf menjadi huruf besar
• lowercase, berfungsi mengubah semua huruf menjadi huruf kecil
• capitalize, berfungsi mengubah huruf paertama pada setiap kalimat menjadi huruf besar.

Contoh penggunaan CSS text-transform :

.besar {
   text-transform: uppercase;
}

Kita bisa berlatih CSS text-transform disini >>

5. text-indent

Adalah properti CSS yang digunakan untuk mengatur posisi menjorok sebuat teks (inden teks)

Contoh penggunaan CSS text-transform :

p {
   text-indext: 50px;
}

Kita bisa berlatih CSS text-indent disini >>

6. text-shadow

Adalah properti CSS yang digunakan untuk membuat efek bayangan pada teks.

Contoh penggunaan CSS text-shadow :

h1 {
    text-shadow: 1px 1px #ff6a54;
}

Kita bisa berlatih CSS text-shadow disini >>

7. letter-spacing

Adalah properti CSS yang digunakan untuk mengatur jarak antar huruf pada teks.

Contoh penggunaan CSS letter-spacing :

h1 {
     letter-spacing : 2px;
}

Kita bisa berlatih CSS letter-spacing disini >>

8. word-spacing

Adalah properti CSS yang digunakan untuk mengatur jarak antar kata pada teks.

Contoh penggunaan CSS word-spacing :

h1 {
     word-spacing : 2px;
}

Kita bisa berlatih CSS word-spacing disini >>

9.line-height

Adalah properti CSS yang digunakan untuk mengatur tinggi tiap baris teks.

Contoh penggunaan CSS line-height :

p {
     line-height : 150%;
}

Kita bisa berlatih CSS line-height disini >>

10.vertical-align

Adalah properti CSS yang digunakan untuk mengatur alignment sebuah elemen pada teks. Nilai properti ini bisa diset text-top yaitu elemen rata atas dengan teks atau text-bottom yaitu elemen rata bawah dengan teks. Secara default vertical-align diset text-bottom.

Contoh penggunaan CSS vertical-align :

img {
     vertical-align : text-top;
}

Kita bisa berlatih CSS vertical-align disini >>

11.white-space

Adalah properti CSS yang digunakan untuk menetapkan aksi penanganan terhadap white space sebuah teks. NIlai properti white-space bisa diset wrap dan nowrap. Secara default white-space akan ditangani dengan cara nowrap.

Contoh penggunaan CSS white-space :

p {
     white-space : wrap;
}

Kita bisa berlatih CSS white-space disini >>

12. direction

Adalah properti CSS yang digunakan untuk mengatur arah penulisan teks. Arah penulisan diisi ltr (left to right) atau rtl (right to left). Secara default arah penulisan adalah ltr yaitu dari kiri ke kanan.

Contoh penggunaan CSS direction :

h1 {
     direction : rtl;
}

Kita bisa berlatih CSS direction disini >>

13. unicode-bidi

Adalah properti CSS yang digunakan untuk mengatur bidirectional unicode karakter pada teks. unicode-bidi biasanya digunakan sepasang dengan CSS direction.

Contoh penggunaan CSS unicode-bidi:

h1 {
     direction : rtl;
     unicode-bidi: bidi-override;
}

Kita bisa berlatih CSS unicode-bidi disini >>

Lihat indeks artikel Tutorial CSS Dasar >>

Referensi :

• //www.w3schools.com/css/css_text.asp

Background adalah latar belakang elemen pada halaman html. Background bisa diterapkan pada body (keseluruhan halaman) atau bisa diterapkan untuk elemen yang lebih kecil seperti paragraf atau bahkan untuk satu teks atau satu huruf saja. Background bisa berupa warna tunggal atau berupa gambar (image).

Ada enam properti yang bisa digunakan untuk mengatur background, yaitu :

1. background-color,
2. background-image
3. background-repeat
4. background-position
5. background-attachment
6. background (penggabungan beberapa properti dalam satu deklarasi)

Dan berikut ini penjelasan masing-masing properti tersebut.

1. background-color

Adalah properti CSS yang digunakan untuk mengatur warna background.

Ada tiga cara dalam menentukan nilai warna, yaitu :

• menggunakan nama warna seperti red, blue, green dan sebagainya
• menggunakan kode heksa warna seperti #ff0000 untuk warna merah dan #0000ff untuk warna biru, dan seterusnya.
• menggunakan nilai RGB seperti rgb(255,0,0) untuk warna merah, rgb(0,0,255) untuk warna biru dan seterusnya.

Contoh penggunaan CSS background-color :

body {
    background-color: #e0ffff;
}

Kita bisa berlatih CSS background-color disini >>.

2. background-image

Adalah properti CSS yang digunakan untuk mengatur background berupa gambar (image). File gambar yang akan diterapkan pada background ditulis pada atribut URL. Secara default, gambar akan ditampilkan secara berulang secara horisontal dan vertikal untuk memenuhi area elemen yang ditetapkan.

Contoh penggunaan CSS background-image :

body {
    background-image: url("bg.gif");
}

Kita bisa berlatih CSS background-image disini >>.

3. background-repeat

Adalah properti CSS yang digunakan untuk mengatur perulangan background-image. Secara default, background-image akan diulang secara vertikal dan horizontal.

Dengan CSS background-repeat ini kita bisa mengatur perulangan dengan beberapa nilai sebagai berikut :

• no-repeat, artinya background image tidak akan di ulang.
• repeat-x, artinya background image akan diulang secara horizontal
• repeat-y, artinya background image akan diulang secara vertikal.

Contoh penggunaan CSS background repeat :

body {
    background-image: url("bg.gif");
    background-repeat: repeat-x;
}

Kita bisa berlatih CSS background-repeat disini >>.

4. background-position

Adalah properti CSS yang digunakan untuk mengatur posisi background image pada elemen html. posisi background image bisa diset left, right, top dan bottom. Salah satu fungsi dari penempatan background image agar tidak mengganggu tampilan teks pada halaman html.

Contoh penggunaan CSS background-position :

body {
    background-image: url("bg.gif");
    background-repeat: repeat-x;
    background-position : right top;
}

Kita bisa berlatih CSS background-position disini >>.

5. background-attachment

Adalah properti CSS yang digunakan untuk mengatur bagaimana background itu disematkan dalam halaman. Apakah fix atau ikut scroll bersama elemen. Secara default properti background-attachment akan diset scroll.

Ada beberapa nilai yang bisa dipakai untuk backdround-attachment :

• scroll , background ikut discroll bersama dengan elemen.
• fixed, background fix jadi saat elemen di scroll, posisi background tetap.
• local, background ikut discroll bersama dengan isi dari elemen
• initial, nilai diset sesuai nilai inisial dari elemen diatasnya.
• inherit, nilai diwarisi dari elemen diatasnya.

Contoh penggunaan CSS background-attachment :

body {
    background-image: url("bg.gif");
    background-repeat: repeat-x;
    background-position : right top;
    background-attachment: fixed;
}

Kita bisa berlatih CSS background-attachment disini >>.

6. background

Adalah properti yang bisa diisi dengan nilai dari kelima properti diatas. Jadi properti background bisa dikatakan sebagai penggabungan dari kelima properti background sebelumnya. Cara ini dipakai untuk mempersingkat penulisan.

Contoh penggunaan CSS background-attachment :

body {
     background: #ff00ff url("bg.png") no-repeat right top;
}

Pada contoh terlihat ada penumpukan antara background color dan background image. Ini digunakan untuk mencegah kekosongan background jika load image dinon-aktifkan oleh user atau image gagal dimuat karena suatu sebab tertentu. Jadi jika image tidak tampil akan diganti dengan background warna.

Kita bisa berlatih CSS background disini >>.

Kesimpulan :

Yang perlu diperhatikan dalam menerapkan background adalah jangan sampai background membuat teks tidak jelas terbaca.

Lihat indeks artikel Tutorial CSS Dasar >>

Referensi :

• //www.w3schools.com/css/css_background.asp
• //www.w3schools.com/cssref/pr_background-attachment.asp

Selector pada CSS berfungsi untuk memilih elemen html yang di-style sesuai dengan deklarasi pada selector tersebut. Pada tulisan sebelumnya kita telah mengenal selector CSS menggunakan elemen-elemen html seperti paragraf (p) dan heading (h1). Selector CSS dengan nama elemen ini juga berlaku untuk elemen yang lain seperti link (a), list (ul dan ol), table dan yang lainnya.

Kemudian muncul pertanyaan bagaimana jika kita akan menerapkan style yang berbeda untuk elemen yang sama? Misalnya paragraf pertama dibuat margin 10px lalu paragraf kedua dibuat margin 20px. Jawabannya, kita bisa menggunakan selector Id dan Class.

Menggunakan Selector Id pada CSS

Selector Id digunakan untuk memilih satu elemen unik pada html. Cara menggunakan selector Id adalah dengan menambahkan attribut id pada elemen html tertentu. Id ini harus unik dalam satu page, jika kita bisa menerapkan CSS kepada satu elemen yang dimaksud (unique element).

Cara penulisan selector Id

Untuk menuliskan selector Id kita menggunakan karakter hash (#). Kemudian nama Id ditulis tepat setelah tanda # tanpa spasi. Deklarasi CSS untuk ID ini ditulis diantara kurung kurawal seperti pada selector elemen.

Kemudian pada elemen html tertentu kita taruh atribut “id” dengan nama yang sama dengan id pada CSS tadi. Atribut id ini juga digunakan untuk pemrograman Javascript, jadi bisa saling pakai Id.

Contoh penggunaan selector Id

 <html>  
 <head>  
 <title>Contoh Selector Id CSS</title>  
 </head>  
   
 <style>  
 h1 {  
   font-size: 20px;  
 }  
        
 #top {  
      color: red;  
 }  
   
 #bottom {  
   color: blue;  
 }  
   
 </style>  
   
 <body>  
 <h1>Contoh Penggunaan Selector Id</h1>  
 <p id="top">Paragraf paling atas warna merah</p>  
 <p>Paragraf ditengah tidak di-style</p>  
 <p id="bottom">Paragraf paling bawah warna biru</p>  
 </body>  
 </html>  

Pada contoh diatas, kita mempunyai dua buah id, yaitu “top” dan “bottom”. Pada CSS, paragraf dengan id “top” kita buat warna merah dan paragraf dengan id “bottom” kita buat warna biru.

Kemudian pada tag <p> untuk paragraf paling atas kita tambahkan attribut id=”top” dan pada paragraf paling bawah kita tambahkan atribut id=”bottom”.

Dan berikut ini hasil tampilan dari contoh penggunaan selector Id diatas :

Menggunakan Selector Class pada CSS

Selector Class digunakan untuk memilih elemen html yang memiliki sifat atau perilaku yang sama dalam satu halaman. Selector Class ini bisa digunakan untuk beberapa elemen dalam satu halaman. Penerapan selector Class sebaiknya memperhatikan kesamaan elemen-elemen pada halaman html.

Sebagai contoh kita akan menerapkan style pada paragraf yang berada diantara paragraf pertama dan paragraf terakhir pada contoh diatas. Kemudian kita buat class “midle” untuk mendefinisikannya. Jadi setiap paragraf dengan class “midle” akan dikenakan style yang kita buat.

Cara penulisan selector class

Penulisan selector class pada CSS diawali dengan huruf titik (.) atau dot. Kemudian nama class ditulis tepat setelah tanda titik. Deklarasi CSS untuk Class ini ditulis diantara kurung kurawal seperti pada selector elemen dan selector id.

Kemudian pada elemen html tertentu kita taruh atribut “class” dengan nama yang sama dengan nama class pada CSS tadi.

Contoh penggunaan selector class

 <html>  
 <head>  
 <title>Contoh Selector Class CSS</title>  
 </head>  
   
 <style>  
 h1 {  
   font-size: 20px;  
 }  
        
 #top {  
      color: red;  
 }  
   
 #bottom {  
   color: blue;  
 }  
   
 .midle {  
   color: green;  
 }  
   
 </style>  
   
 <body>  
 <h1>Contoh Penggunaan Selector Id</h1>  
 <p id="top">Paragraf paling atas warna merah</p>  
 <p class="midle">Paragraf ditengah warna hijau</p>  
 <p class="midle">Paragraf ditengah warna hijau</p>  
 <p id="bottom">Paragraf paling bawah warna biru</p>  
 </body>  
 </html>  

Pada contoh diatas kita menambahkan sebuah selector class dengan nama “midle” dan diset dengan warna hijau. Kemudian untuk semua paragraf yang ditengah kita taruh atribut class=”midle”.

Dan berikut ini hasil tampilan dari contoh penggunaan selector class diatas :

Perbedaan selector id dan selector class

Untuk memahami perbedaan penggunaan selector id dan selector class pada css perlu digaris bawahi bahwa id itu unik dan hanya ada satu dalam satu halaman html. Sedangkan class bisa lebih dari satu yang penting mempunyai kesamaan anta elemen dalam satu class.

Jika kita sengaja atau tidak sengaja menggunakan id untuk beberapa elemen memang css akan tetap bisa bekerja, namun tetap dianjurkan untuk menggunakan class khususnya jika dalam halaman tersebut juga ada javascript-nya.

Lihat indeks artikel Tutorial CSS Dasar >>

Referensi :

• //www.w3schools.com/cssref/css_selectors.asp

CSS adalah singkatan dari Cascading Style Sheet. CSS berfungsi sebagai pengendali komponen pada elemen sebuah website. CSS menentukan tampilan sebuah website melalui nilai-nilai properti style yang disetting pada tiap-tiap elemen dalam website tersebut.

Latar belakang penggunaan CSS

Penggunaan CSS didasari oleh kebutuhan akan tampilan sebuah website. Sebagaimana diketahui bahwa selain isi, tampilan sebuah website merupakan faktor yang tidak kalah pentingnya. Tampilan website yang baik akan membuat pengunjung nyaman dalam membaca dan mengakses isi sebuah website. Hal ini tentu positif bagi perkembangan website tersebut.

Tata letak website yang baik merupakan susunan dari tiap-tiap bagian secara baik dan proporsional. Sebagai contoh saat kita mengatur jarak antar bagian melalui margin dan padding, juga saat mengatur penggunaan font, ukuran font dan warna font.

Cara Membuat CSS

Dalam membuat CSS ada empat hal utama yang perlu diketahui, yaitu:

1. Selector, adalah bagian atau elemen website yang akan diatur stylenya.
2. Deklarasi, merupakan pernyataan yang menetapkan style yang berisi Properti dan Nilai.
3. Properti, adalah parameter tampilan yang akan kita atur.
4. Nilai, merupakan ukuran yang itetapkan pada parameter properti.

Contoh membuat CSS untuk paragraf :

p {
    margin: 10px;
}

Penjelasan contoh diatas :

1. p merupakan selector untuk elemen paragraf
2. {…}, merupakan deklarasi, dalam hal ini berisi margin: 10px;
3. margin, merupakan properti untuk mengatur jarak dengan elemen lain.
4. 10px, merupakan nilai yang ditetapkan untuk properti margin.

Dalam sebuah deklarasi kita bisa menyetting beberapa properti sekaligus, seperti contoh berikut ini :

p {
    margin: 10px;
    padding: 5px;
    font-size: 10px;
}

Cara Penulisan CSS

Untuk menggunakan CSS ada tiga cara yang bisa dilakukan yaitu dengan cara Inline CSS, Embedded CSS dan External CSS.

1. Inline CSS

Adalah penulisan CSS didalam elemen html secara langsung. Jadi dalam hal ini kita tidak memerlukan penulisan selector karena sudah langsung tertuju pada elemen yang dimaksud. Sebagai gantinya, kita menggunakan tag style=”…” pada elemen tersebut.

Contoh penulisan Inline CSS:

<p style="margin:10px;">

Penjelasan dari kode diatas adalah, kita menetapkan properti margin sebesar 10px untuk elemen paragraf (p). Diantara tanda petik dua (“) kita bisa menyisipkan beberapa deklarasi properti dan nilai sekaligus dengan cara masing-masing deklarasi tetap diakhiri dengan tanda titik koma (;).

2. Embedded CSS

Adalah penulisan CSS secara tersendiri namun berada dalam satu file html. Cara ini membutuhkan selector dalam penulisannya. Beberapa kode CSS ditulis didalam tag <style>…</style>. kita bisa menuliskan beberapa selector beserta deklarasi properti dan nilai didalam tag <style> ini.

Contoh penulisan Embedded CSS dalam sebuah file html:

 <html>  
 <head>  
 <title>Contoh Embedded CSS</title>  
 </head>  

 <style>  
   p {  
     margin: 10px;  
   }  
   h1 {  
     font-size: 15px;  
   }  
 </style>  

 <body>  
 <h1>Judul dengan font 15px</h1>  
 <p>Ini adalah paragraf pertama</p>  
 <p>Ini adalah paragraf kedua</p>  
 </body>  
 </html>  

Pada contoh embeddes CSS diatas kita menetapkan font untuk heading h1 sebesar 15px dan margin antar paragraf sebesar 10px.

3. Eksternal CSS

Ini adalah cara paling efektif dan banyak dipakai oleh kebanyakan website saat ini. Dengan eksternal CSS kita menaruh kode-kode CSS didalam sebuah file tersendiri lalu membuat link didalam file html menuju file CSS yang telah dibuat. Cara ini lebih efisien dan mempermudah pekerjaan mendesain dan mengelola sebuah website.

Contoh penulisan Eksternal CSS :
– Pertama kita membuat kode berikut ini pada file .css, lalu menyimpannya misalnya dengan nama style.css

  
   p {  
     margin: 10px;  
   }  
   h1 {  
     font-size: 15px;  
   }  

– Kemudian kita buat file html berikut ini yang menggunakan css dari file style.css lalu disimpan misalnya dengan nama index.php

 <html>  
 <head>  
 <title>Contoh Embedded CSS</title>  
 <link rel="stylesheet" type="text/css" href="style.css">  
 </head>  
   
 <body>  
 <h1>Judul dengan font 15px</h1>  
 <p>In adalah paragraf pertama</p>  
 <p>In adalah paragraf kedua</p>  
 </body>  
 </html>  

Pada contoh diatas kita menggunakan CSS yang sama daricontoh sebelumnya, hanya saja kali ini kita memisahkan kode-kode css didalam fle tersediri, yang kita beri nama style.css.

Kemudian pada bagian head dari file index.html kita taruh link menuju file css dengan kode <link rel=”stylesheet” type=”text/css” href=”style.css”>. Hasil tampilan dari contoh ini sama dengan contoh sebelumnya,

Keuntungan dari cara ini adalah kita bisa lebih mudah mengelola CSS untuk banyak halaman secara sekaligus. Selain itu proses membuka website untuk halaman kedua dans eterusnya menjadi lebih ringan karena tidak perlu loading ulang css.

Untuk membuat file CSS dapat menggunakan aplikasi teks editor untuk pemrograman web seperti pada pembuatan script HTML dan PHP.

Lihat indeks artikel Tutorial CSS Dasar >>

Referensi :

• //id.wikipedia.org/wiki/Cascading_Style_Sheets
• //www.w3schools.com/css/css_intro.asp