• Program Baru W3function

    Online Courses

    Premium tutorial pembelajaran tahap pembuatan website secara menyeluruh mulai dari desain grafis, desain web, pengembangan, publikasi website di internet sampai dengan tekhnik SEO

    Materi: Photoshop, HTML5, CSS3, jQuery, PHP, MySQL, Semantic template, Responsif desain

    Mendaftar
  • Paket Toko Online

    W3function Store ®

    Solusi paket website toko online murah dan berkualitas dengan fitur yang lengkap beserta tema design yang banyak dan menarik

    Selengkapnya
  • Desain dan Pengembangan Web

    Custom Project

    Kami mengerti jenis bisnis Anda berbeda dengan yang lain sehingga Anda membutuhkan website yang benar-benar mencitrakan bisnis anda. Apapun jenis website yang ingin Anda buat kami akan membuatnya bekerja untuk Anda

    Selengkapnya

Tutorial dan Penjelasan menggunakan Styling CSS ( Cascading Style Sheet) untuk Text, Fonts, Links, List dan Table

18‘11
February

noimg.jpg

Salah satu tingkat dasar dari CSS (Cascading Style Sheet) adalah mengetahui cara mengunakannya untuk Background, Text, Fonts, Links, Lists, dan Tables. Di artikel kali ini mari kita bahas satu persatu cara penggunaan style css tersebut

Style untuk Background

Properti CSS untuk background digunakan utuk membuat efek background (latar belakang) dari sebuah elemen HTML. Properti yang digunakan untuk membuat efek pada background adalah :

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

Properti background-color mendefinisikan warna dari sebuah elemen HTML. Untuk membuat warna background dari sebuah halaman web maka properti ini digunakan pada selector body HTML. contoh penggunaanya adalah sebagai berikut :

body {background-color:#000000;} 

Warna background dapat digunakan dengan :

  • nama dari warna dalam english seperti "black", "blue" dan sebagainya
  • nilai dari RGB (Red, Green, Blue) seperti (255,255,255)
  • nilai Hex dari warna seferti "#000000", "#FFFFFF" dan sebagainya (saya biasa menggunakan ini dan nilai warna saya ambil dari photshop)

Selain digunakan pada selector body, elemen html lainya juga bisa di beri properti ini. Di bawah ini merupakan contoh penggunaan background-color untuk beberapa elemen HTM

h1 {background-color:#000000;}
p {background-color:#000000;}
div {background-color:#000000;}

properti kedua dari background adalah background-image, properti ini menggunakan gambar untuk memberi background pada sebuah elemen. Penggunaan dari properti background-image adalah sebagai berikut :

body {background-image:url('gambar.gif');}

Pada opsi default gambar akan diulang terus sehingga background dengan gambar ini akan melatari isi dari elemen HTML. Jiga tidak ingin mengulang gambar background dan hanya ingin mengulang background secara horizontal atau vertical maka bisa kita gunakan properti background-repeat berikut contoh penggunaanya

/* Pengulangan gambar secara horizontal */
body {
	background-image:url('gambar.gif');
	background-repeat:repeat-x;
} 

/* Pengulangan gambar secara vertical */
body {
	background-image:url('gambar.png');
	background-repeat:repeat-y;
} 

/* Background tidak ada Pengulangan*/
body {
	background-image:url('gambar.jpg');
	background-repeat:no-repeat;
} 

Jika ingin mengatur posisi background gambar untuk tetap berada di tempatnya atau bisa di scroll maka kita bisa menggunakan properti background-attachment. cara penggunaanya adalah dengan memberi nilai scroll, fixed, atau inherit pada background-attachment seperti contoh berikut

body {
	background-image:url('gambar.png');
	background-attachment:fixed;
}

Properti terakhir dari css background adalah background-position, properti ini digunakan untuk mengatur posisi gambar background apakah di atas sebelah kanan, di atas sebelah kiri, di bawah sebelah kanan, di bawah sebelah kiri dan lain sebagainya. Nilai untuk properti background-position adalah sebagai berikut : left top, left center, left bottom, right top, right center, right bottom, center top, center center, center bottom, x% y%, xpos ypos, inherit. contoh penggunaanya adalah sebagai berikut

body {
	background-image:url('gambar.png');
	background-position:center top;
}

selain dengan penulisan kode pada contoh-contoh di atas untuk mempersingkat penulisan style background juga bisa seperti contoh di bawah

body {
	body {background:#ffffff url('gambar.png') no-repeat right top;}
}

Style untuk Text

Properti CSS untuk Text dan nilai dari masing-masing properti CSS untuk text adalah sebagai berikut

Deskripsi / Kegunaan Properti Nilai Properti
color Mengatur warna dari text Nilai untuk properti ini adalah warna seperti yang saya jelaskan diatas pada properti background-color
direction Mengatur arah dari Text ltr
rtl
line-height Mengatur jarak baris text normal
number
length
%
letter-spacing Untuk menambah atau mengurangi jarak spasi dari karakter text normal
length
text-align Mengatur alignment text dalam sebuah elemen HTML left
right
center
justify
text-decoration Menambah dekorasi/hiasan text none
underline
overline
line-through
blink
text-indent Memberi jarak untuk baris kalimat pertama dari text yang ada dalam elemen HTML length
%
text-shadow Digunakan untuk memberi bayangan pada text none
color
length
vertical-align Mengatur garis vertical dari suatu elemen baseline
sub
super
top
text-top
middle
bottom
text-bottom
length
%
white-space Mengatur bagaimana space putih didalam elemen HTML ditampilkan normal
pre
nowrap
word-spacing Menambah atau mengurangi spasi antar kata normal
length

Contoh penggunaan css pada text bisa di lihat di bawah

h1 {color:#00ff00;}
p.date {text-align:right;}
a {text-decoration:none;}

Bisa juga anda menggunakan beberapa variasi untuk mendekorasi tampilan heading paragraph seperti berikut:

h1 {text-decoration:blink;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:overline;}
  • h1 disebut sebagai selector atau tag elemen HTML yang di pilih untuk di format.
  • Color merupakan properti CSS
  • blue adalah nilai dari properti CSS
  • Setiap deklarasi atau statement CSS di buat didalam tanda kurawa {   }
  • Setiap properti diakhiri dengan tanda titik koma ;

Seperti halnya dalam penulisan kode program (PHP, Java, dan lainnya), JavaScript, atau tag HTML, dalam CSS kita juga bisa membuat comment yang tidak akan dieksekusi oleh browser. CSS comment di mulai dengan tanda /* dan di akhiri dengan tanda */

/* comment : membuat heading */

h1 { color :blue; font-size:18px; }

Untuk melakukan formating elemen-elemen HTML, selain menuliskan nama elemennya langsung seperti h1 (heading), div (divide), p (paragraph), CSS juga memperbolehkan kita untuk menspesifikasikan selector khusus yang disebut class dan id.

selector id digunakan untuk menempatkan style pada element yang unik (catatan penting : pada satu dokumen HTML tidak diperbolehkan elemen HTML memiliki selector id yang sama) attribut id dari elemen HTML di definisikan dengan tanda pagar #. contoh penggunaanya misalkan kita memiliki sebuah tag HTML sebagai berikut :

ini paragraph

definisi id diatas pada CSS akan ditulis sebagai berikut :
#parameter {
	text-align:center;
	color:red;
	font-size:12px;
	font-weight:bold;
}

Style untuk Font

Cara menuliskan style font pada CSS adalah sebagai berikut

#parameter {
	font-size:12px;
	font-weight:bold;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
/*penulisan pendek */
#parameter { font: normal medium bold "Trebuchet MS", Arial, Helvetica, sans-serif; }

Properti CSS untuk font dan nilai dari masing-masing properti CSS untuk font adalah sebagai berikut

Deskripsi / Kegunaan Properti Nilai Properti
font
Mengatur font untuk suatu elemen HTML atau keseluruhan elemen HTML font-style
font-variant
font-weight
font-size/line-height
font-family
caption
icon
menu
message-box
small-caption
status-bar
inherit
font-family
Mendefinisikan font family (kelompok font) untuk text family-name
generic-family
inherit
font-size
Mengatur ukuran font xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
length
%
inherit
font-style
Mengatur gaya dari font normal
italic
oblique
inherit
font-variant
Mengatur apakah text ingin di tampilkan secara small caps atau tidak normal
small-caps
inherit
font-weight
Mengatur ukuran bobot dari font normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900
inherit

Style untuk Links

Kita dapat menggunakan properti color, font, background dan sebagainmya untuk Style CSS Links. Kita bisa menggunakan varian style CSS berbeda tergantung pada situasi link tersebut misalkan gaya khusus pada saat di hover (link ditunjuk mouse), active (url link sama dengan halaman yang sedang di buka), visited (url link yang pernah dikunjungi) dan sebagainya.

dibawah ini beberapa contoh penggunaan Style CSS untuk Link <a href="link-url"></a>

a:link {color:#FF9900; text-decoration:none; }      /* link belum di kunjungi */
a:visited {color:#99FF00; text-decoration:underline; }  /* link yang sudah di kunjungi*/
a:hover {color:#FF0000; font-size: 20px; }  /* link yang ditunjuk mouse */
a:active {color:#000000; background-color:#FFF000; }  /* link yang di pilih */

Style untuk List

Pada HTML ada dua cara dalam membuat list (daftar) yaitu dengan cara unordered lists (daftar yang ditandai dengan bulatan hitam kecil sebagai penomorannya) dan ordered lists (daftar yang ditandai dengan huruf dan angka sebagai penomorannya).

contoh penulisan list pada HTML adalah sebagai berikut

  • daftar ke-satu
  • daftar ke-dua
  • daftar seterusnya

contoh menuliskan style untuk list pada CSS adalah sebagai berikut

ul.lingkaran {list-style-type: circle;}
ul.bulatan {list-style-type: square;}
ol.hurufromawi {list-style-type: upper-roman;}
ol.hurufkecil {list-style-type: lower-alpha;}

Nilai untuk style List - unordered lists dapat dilihat pada table di bawah

Nilai Keterangan
none Tidak ada penandaan
disc ditandai dengan lingkar bulatan
circle ditandai dengan lingkar bulatan hitam
square ditandai dengan tanda persegi

Nilai untuk style List - ordered lists dapat dilihat pada table di bawah

Value Description
armenian ditandai dengan nomor Armenian
decimal ditandai dengan nomor
decimal-leading-zero ditandai dengan nomor dengan awalan 0 di depannya (01, 02, 03)
georgian ditandai dengan nomo Georgia (an, ban, gan)
lower-alpha ditandai dengan huruf abjad kecil (a, b, c, d, e)
lower-greek ditandai dengan huruf yunani kecil (alpha, beta, gamma)
lower-latin ditandai dengan huruf latin kecil (a, b, c, d, e)
lower-roman ditandai dengan huruf romawi kecil(i, ii, iii, iv, v)
upper-alpha ditandai dengan huruf abjad besar (A, B, C, D, E) 
upper-latin ditandai dengan huruf latin besar (A, B, C, D, E)
upper-roman ditandai dengan huruf romawi besar (I, II, III, IV, V)

Adapun property untuk Sttyle list pada CSS adalah sebagai berikut

  Keterangan Nilai
list-style Mendeklarasikan pengaturan semua daftar properti list-style-type
list-style-position
list-style-image
inherit
list-style-image menggunakan image sebagai icon untuk penandaan URL
none
inherit
list-style-position menentukan posisi tanda pada daftar inside
outside
inherit
list-style-type Menentukan tanda yang akan digunakan pada daftar none
disc
circle
square
decimal
decimal-leading-zero
armenian
georgian
lower-alpha
upper-alpha
lower-greek
lower-latin
upper-latin
lower-roman
upper-roman
inherit

Style untuk Table

Untuk menentukan style border pada table dalam CSS kita bisa menggunakan property border, width, font dan lainnya. properti berikut ini beberapa contoh poperti yang bisa kita gunakan untuk table, tr, th, maupun td

table.ex1 {
    border-collapse:collapse;
    width:100%;
}
table,th,td{
    border: 1px solid black;
}
th,td{
	height:50px;
    vertical-align:bottom;
    padding:5px;
}

Anda juga mungkin suka dengan artikel ini :

  1. Penjelasan menggunakan Styling CSS untuk Model Persegi Kolom - Box Model : Border, Padding, Margin, Outline
  2. Pengertian dan Tutorial Dasar CSS untuk Pemula (Newbie)
  3. Tutorial Membuat Desain Website Responsif Bagian 2 - Content Website dan Tampilan Iklan Responsif
  4. Daftar Referensi tag HTML dan HTML5 Beserta Kegunaannya
  5. Belajar Cara Membuat Website Tanpa Table (tableless) dengan Photoshop dan Dreamweaver Bagian 2

Komentar

  • emkate (27 Aug 2013 01:39:02)

    Sangat membantu sekali buat saya. Terima kasih banyak atas postingannya. Sedikit tambahan: lebih bagus lagi kalau disertakan contoh tampilannya (view-result). Thanks

  • jamal cyber (25 Aug 2013 03:23:02)

    wah thanks gan sangat membantu

  • tips kesehatan (23 Apr 2013 04:10:33)

    lha ini yang saya cari dari kemaren.. akhirnya ketemu juga.. posting lagi mas.. yang lebih banyak heheh.. biar betah bacanya.. :)

  • peddy (26 Feb 2013 10:10:06)

    sangat detail banget om...keren saya pasti sering ne berkunjung kesini,,makasih yah?

  • toto sumarto (21 Jul 2012 03:27:18)

    manteb gan infonya,trims

» Muat Komentar Sebelumnya (10 komentar) loading

Kode?

Telusuri dan Beritahu saya apabila ada komentar baru.

loading

Usulan Kontribusi dan Saran

Kami sangat terbuka dengan berbagai saran dan kontribusi positif dari Anda. Kami ingin membuat halaman blog di w3function.com ini terbuka untuk banyak penulis, sehingga kita bisa bersama-sama mendiskusikan banyak topik yang lebih luas dan lebih menarik lagi. Apabila Anda memiliki artikel yang ingin Anda kontribusikan untuk w3function.com mohon email kami.

Pemberitahuan Disclaimer © Copyright

Semua isi termasuk di dalamnya semua artikel dan gambar adalah hak cipta w3function.com, kecuali ada statement khusus yang di cantumkan (kontributor). Mohon tidak menyalin isi atau mempublikasikan kembali tanpa seizin w3function.com dan atau kontributor artikel lain

Semua sumber download dari w3function.com adalah untuk tujuan edukasi semata, bukan untuk tujuan komersial atau lainnya kecuali ada statement khusus yang di cantumkan.

Social Stuff