Anda di halaman 1dari 12

BELAJAR CSS

Membuat rounded corners menggunakan CSS


Apa itu Rounded corners? Untuk lebih jelasnya perhatikan gambar di bawah ini:

Kita dapat melihat bahwa setiap sudutnya memiliki lengkungan yang rapi. Biasanya untuk membuat lengkungan tersebut kita menggunakan gambar (image), namun kita dapat membuat rounded corners tersebut dengan hanya menggunakan CSS. Bagaimana caranya? ikuti langkahlangkah berikut ini. Inilah kehebatan dari CSS, dengan hanya menggunakan tag elemen HTML [...] Kita dapat melihat bahwa setiap sudutnya memiliki lengkungan yang rapi. Biasanya untuk membuat lengkungan tersebut kita menggunakan gambar (image), namun kita dapat membuat rounded corners tersebut dengan hanya menggunakan CSS. Bagaimana caranya? ikuti langkahlangkah berikut ini. Inilah kehebatan dari CSS, dengan hanya menggunakan tag elemen HTML b dengan CSS diatur agar berupa blok (display:block) dan membuat warna latar belakang blok tersebut sesuai dengan halaman web kemudian memanipulasi posisinya dengan menggunakan margin. Yang pertama kita lakukan adalah membuat pengaturan div untuk halaman dan judul serta paragraf:
#halaman {width:80%; margin: 0 auto; } #judul {margin:0px;background:#fff; } .judul-teks {height:60px;margin:0px;color:#FFF;background:#090; } p {margin:0px; padding-left:20px;}

Berikut ini adalah kode pengaturan CSS untuk membuat Rounded corners (garis lengkung) pada setiap sudut div:
.line1, .line2, .line3, .line4 {display:block;background:#090;} .line1 {height:1px; margin:0 5px;} .line2 {height:1px; margin:0 3px;} .line3 {height:1px; margin:0 2px;} .line4 {height:2px; margin:0 1px;}

Sekarang kita akan membuat kodenya di dalam dokumen html, buka notepad salin kode berikut kemudian simpan ke komputer anda dengan nama css_test1.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html> <head> <title>Test CSS</title> <style type="text/css"> <!-#halaman {width:80%; margin: 0 auto; } p {margin:0px; padding-left:20px;} #judul {margin:0px;background:#fff; } .judul-teks {height:60px;margin:0px;color:#FFF;background:#090; } .line1, .line2, .line3, .line4 {display:block;background:#090;} .line1 {height:1px; margin:0 5px;} .line2 {height:1px; margin:0 3px;} .line3 {height:1px; margin:0 2px;} .line4 {height:2px; margin:0 1px;} --> </style> </head> <body> <div id="halaman"> <div id="judul"> <b class="line1"></b><b class="line2"></b><b class="line3"></b><b class="line4"></b> <div class="judul-teks"> <p>Testing membuat rounded corners dengan CSS</p> </div> <b class="line4"></b><b class="line3"></b><b class="line2"></b><b class="line1"></b> </div> </div> </body> </html>

Selanjutnya dengan browser kita buka file tersebut, maka hasilnya adalah seperti ini. Kemudian sekarang kita akan menambah div untuk konten, jika menggunakan warna latar yang berbeda kita harus membuat pengaturan CSS tersendiri untuk lengkungan atau Rounded cornersnya, namun jika sewarna anda bisa membuatnya tanpa perubahan. Kita akan membuat dengan latar yang berbeda sehingga kita harus membuat pengaturan CSS tersendiri dengan nama class yang berbeda, tambahkan kode berikut di dalam style CSS:
#konten { margin-top: 14px;margin-bottom: 14px;float: left; width: 100%; background:#fff;} .konten-teks { height: 100%;color:#000; background:#ccc;} .line1a, .line2a, .line3a, .line4a {display:block;background:#ccc;} .line1a {height:1px; margin:0 5px;} .line2a {height:1px; margin:0 3px;} .line3a {height:1px; margin:0 2px;} .line4a {height:2px; margin:0 1px;}

Dan kode berikut ini kita tambahkan ke dalam tag elemen body:
<div id="konten"> <b class="line1a"></b><b class="line2a"></b><b class="line3a"></b><b class="line4a"></b>

<div class="konten-teks"> <p>Berikut adalah cara membuat rounded corners tanpa menggunakan gambar (image). Inilah kehebatan dari CSS, dengan hanya menggunakan tag elemen HTML b dengan CSS diatur agar berupa blok (display:block) dan membuat warna latar belakang blok tersebut sesuai dengan halaman web kemudian memanipulasi posisinya dengan menggunakan margin. Hasilnya adalah seperti yang anda lihat sekarang.</p> </div> <b class="line4a"></b><b class="line3a"></b><b class="line2a"></b><b class="line1a"></b> </div>

Atau anda bisa menyalin kode berikut, sebagai kode komplitnya setelah di masukkan ke dokumen html, simpan file tersebut dengan nama css_test2.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Test CSS</title> <style type="text/css"> <!-#halaman {width:80%; margin: 0 auto; } p {margin:0px; padding-left:20px;} #judul {margin:0px;background:#fff; } .judul-teks {height:60px;margin:0px;color:#FFF;background:#090; } .line1, .line2, .line3, .line4 {display:block;background:#090;} .line1 {height:1px; margin:0 5px;} .line2 {height:1px; margin:0 3px;} .line3 {height:1px; margin:0 2px;} .line4 {height:2px; margin:0 1px;} #konten { margin-top: 14px;margin-bottom: 14px;float: left; width: 100%; background:#fff;} .konten-teks { height: 100%;color:#000; background:#ccc;} .line1a, .line2a, .line3a, .line4a {display:block;background:#ccc;} .line1a {height:1px; margin:0 5px;} .line2a {height:1px; margin:0 3px;} .line3a {height:1px; margin:0 2px;} .line4a {height:2px; margin:0 1px;} --> </style> </head> <body> <div id="halaman"> <div id="judul"> <b class="line1"></b><b class="line2"></b><b class="line3"></b><b class="line4"></b> <div class="judul-teks"> <p>Testing membuat lengkungan pada sudut div dengan CSS</p> </div> <b class="line4"></b><b class="line3"></b><b class="line2"></b><b class="line1"></b> </div> <div id="konten"> <b class="line1a"></b><b class="line2a"></b><b class="line3a"></b><b class="line4a"></b> <div class="konten-teks">

<p>Berikut adalah cara membuat garis lengkungan pada setiap sudut div tanpa menggunakan gambar (image). Inilah kehebatan dari CSS, dengan hanya menggunakan tag elemen HTML b dengan CSS diatur agar berupa blok (display:block) dan membuat warna latar belakang blok tersebut sesuai dengan halaman web kemudian memanipulasi posisinya dengan menggunakan margin. Hasilnya adalah seperti yang anda lihat sekarang.</p> </div> <b class="line4a"></b><b class="line3a"></b><b class="line2a"></b><b class="line1a"></b> </div> </div> </body> </html>

Kembali kita buka file tersebut dengan menggunakan browser, maka hasilnya adalah seperti ini. Berikut adalah contoh komplit dengan header, konten, navigasi dan footer. Preview Jadi intinya adalah setelah kita mengatur layoutnya, kita cukup menyelipkan kode untuk membuat rounded corners (lengkungan) tersebut di antara div awal dan div akhir. Untuk melihat atau jika ingin mendownload contoh-contoh dari layout template yang menggunakan rounded corner ini maupun layout template yang biasa anda bisa mendapatkannya di free css templates.

Pengaturan List menu dengan CSS


Pengaturan List menu dengan CSS Tag elemen untuk membuat List di dalam dokumen HTML adalah: <ul> digunakan untuk list yang tidak berurutan (unordered list) kemudian, <ol> digunakan untuk list yang berurutan kemudian diikuti <li > adalah list menu yang akan ditampilkan (list item). Untuk lebih jelasnya perhatikan contoh berikut ini:
<ul> <li>Menu A </li> <li>Menu B </li> <li>Menu C </li> </ul>

Hasil yang akan ditampilkan di browser:


y y y

Menu A Menu B Menu C

<ol> <li>Menu A </li> <li>Menu B </li> <li>Menu C </li> </ol>

Hasil yang akan ditampilkan di browser:


1. Menu A 2. Menu B 3. Menu C

Didalam CSS ada beberapa perintah untuk mengontrol tampilan dari list style, diantaranya adalah: list-style-type: contoh tipe; adalah untuk mengubah bentuk bullet yang ada di depan dari list menu. list-style-image: url(contoh.jpg); adalah untuk mengubah bentuk bullet dengan gambar. list-style-position: posisi; adalah untuk memposisikan list menu: inside dan outside. Contoh untuk mengubah bullet menjadi berbentuk lingkaran:
<ul style="list-style-type:circle"> <li><a href="#">Menu A </a></li> <li><a href="#">Menu B </a></li> <li><a href="#">Menu C </a></li> </ul> o o o

Menu A Menu B Menu C

Contoh untuk mengubah bullet menjadi berbentuk kotak:


<ul style="list-style-type:square"> <li><a href="#">Menu A </a></li> <li><a href="#">Menu B </a></li> <li><a href="#">Menu C </a></li> </ul>   

Menu A Menu B Menu C

Jika menggunakan CSS tersendiri anda bisa menuliskan seperti berikut:


li { list-style-type: square; }

Namun ini adalah penulisan pengaturan secara global, dimana setiap yang ada diantara tag elemen "li" didalam dokumen akan mengikuti pengaturan diatas, jadi jika ingin membuat pengaturan yang lebih spesifik anda bisa menggunakan id (#) atau class (.), contoh:
<ul id="menu"> <li><a href="#">Menu A </a></li> <li><a href="#">Menu B </a></li> <li><a href="#">Menu C </a></li> </ul>

Jadi di dalam file CSS anda bisa menuliskan:


#menu li { list-style-type: square; }

Berikut adalah tabel dari list style kode disertai dengan contohnya masing-masing, sebagian mungkin tidak akan ditambilkan di browser, karena ini tergantung dari language atau simbol yang disupport oleh browser yang kita gunakan:
Kode didalam CSS Kode di dalam HTML <ul style="list-style-type:none"> <li>Menu 1</li> <li>Menu 2</li> </ul> <ul style="list-style-type:disc"> <li>Menu 1</li> <li>Menu 2</li> </ul> Tampilan di browser

List style type


li {list-style-type: none;}
y y

Menu 1 Menu 2

li {list-style-type: disc;}

y y

Menu 1 Menu 2

<ul style="list-style-type:circle"> <li>Menu 1</li> li {list-style-type: circle;} <li>Menu 2</li> </ul> <ul style="list-style-type:square"> <li>Menu 1</li> li {list-style-type: square;} <li>Menu 2</li> </ul> <ul style="list-style-type:decimal-leading-zero"> li {list-style-type: decimal- <li>Menu 1</li> <li>Menu 2</li> leading-zero;} </ul>

o o

Menu 1 Menu 2

 

Menu 1 Menu 2

y y

Menu 1 Menu 2

li {list-style-type: decimal;}

<ul style="list-style-type:decimal"> <li>Menu 1</li> <li>Menu 2</li> </ul> <ul style="list-style-type:lower-roman"> <li>Menu 1</li> <li>Menu 2</li> </ul>

1. Menu 1 2. Menu 2

li {list-style-type: lowerroman;}

i.

ii.

Menu 1 Menu 2

<ul style="list-style-type:none"> li {list-style-type: upper- <li>Menu 1</li> roman;} <li>Menu 2</li> </ul> <ul style="list-style-type:lower-alpha"> <li>Menu 1</li> <li>Menu 2</li> </ul>

I.

II.

Menu 1 Menu 2

li {list-style-type: loweralpha;}

a. Menu 1 b. Menu 2

<ul style="list-style-type:none"> li {list-style-type: upper- <li>Menu 1</li> alpha;} <li>Menu 2</li> </ul> <ul style="list-style:lower-greek"> <li>Menu 1</li> <li>Menu 2</li> </ul> <ul style="list-style-type:lower-latin"> <li>Menu 1</li> <li>Menu 2</li> </ul>

A. Menu 1 B. Menu 2

li {list-style-type: lowergreek;}

y y

Menu 1 Menu 2

li {list-style-type: lowerlatin;}

a. Menu 1

b. Menu 2

<ul style="list-style-type:upper-latin"> li {list-style-type: upper- <li>Menu 1</li> <li>Menu 2</li> latin;} </ul> li {list-style-type: armenian;} <ul style="list-style-type:armenian"> <li>Menu 1</li> <li>Menu 2</li>

A. Menu 1

B. Menu 2

y y

Menu 1 Menu 2

</ul> <ul style="list-style-type:georgian"> <li>Menu 1</li> <li>Menu 2</li> </ul> <ul style="list-style:hebrew"> <li>Menu 1</li> <li>Menu 2</li> </ul> <ul style="list-style-type:cjk-ideographic"> <li>Menu 1</li> <li>Menu 2</li> </ul> <ul style="list-style-type:hiragana-iroha"> <li>Menu 1</li> <li>Menu 2</li> </ul> <ul style="list-style-type:katakana"> <li>Menu 1</li> <li>Menu 2</li> </ul>

li {list-style-type: georgian;}

y y

Menu 1 Menu 2

li {list-style-type: hebrew;}

y y

Menu 1 Menu 2

li {list-style-type: cjkideographic;}

y y

Menu 1 Menu 2

li {list-style-type: hiragana-iroha;}

y y

Menu 1 Menu 2

li {list-style-type: katakana;}

y y

Menu 1 Menu 2

List style position


li {list-style-position: inside;} <ul style="list-style-position:inside"> <li>Menu 1</li> <li>Menu 2</li> </ul> <ul style="list-style-position:outside"> <li>Menu 1</li> <li>Menu 2</li> </ul>
y y

Menu 1 Menu 2

li {list-style-position: outside;}

y y

Menu 1 Menu 2

List style image


li {list-style-image: url(contoh.jpg);} <ul style="list-style-image: url(contoh.jpg"> <li>Menu 1</li> <li>Menu 2</li> </ul>
y y

Menu 1 Menu 2

Belajar CSS
CSS adalah singkatan dari Cascading Style Sheets, yang berfungsi untuk mengontrol tampilan dari sebuah halaman website. Ada 3 cara untuk memasukkan CSS ke dalam dokumen HTML yaitu: 1. Dengan menambahkan langsung di tag dokumen html, sebagai contoh:
<p style="color:blue">Membuat tulisan warna biru</p> <p style="font-family:arial;font-size:150%;color:green">Membuat jenis font, ukuran dan warna</p> <p style="color:yellow;background-color:red;width:60px;text-align: center">Test</p> <p style="font-style:italic;">Membuat tulisan miring</p>

Maka hasil dari style diatas adalah sebagai berikut: Membuat tulisan warna biru

Membuat jenis font, ukuran dan warna


Test Membuat tulisan miring 2. Dengan menaruhnya di dalam header dokumen html. Sebagai contoh kita akan membuat CSS untuk mengontrol tampilan paragraf di dokumen html, cara penulisannya adalah sebagai berikut:
<style> <!-p { color:green;font-family:arial;font-size:120%;} --> </style>

Kemudian kita masukkan style tersebut di antara tag <head> dan </head> :
<html> <head> <style> <!-p { color:green;font-family:arial;font-size:120%;} --> </style> </head> <body> <p>Saat ini saya sedang belajar CSS</p> <p>Pengaturan paragraf dengan menggunakan CSS di dalam header dokumen html</p>

<p>Dengan contoh ini, maka setiap paragraf atau yang berada diantara <p>dan</p>akan memiliki format yang sama</p> </body> </html>

Preview 3. Kemudian yang ketiga adalah dengan membuat file CSS tersendiri yang tespisah dari dokumen html, secara umum yang terakhir ini adalah yang paling sering digunakan. Untuk menghubungkan dokumen html dengan CSS tersebut kita cukup menambahakan yang berikut ini di header dokumen html:
<link rel="stylesheet" href="style.css" type="text/css">

Sehingga di dokumen html akan terlihat seperti berikut ini:


<html> <head> <title>Titel websiteku</title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> </body> </html>

Untuk mengetahui lebih lanjut tentang bagaimana CSS mengontrol sebuah halaman website, berikut kita akan membuat sebuah halaman website sederhana yang menggunakan CSS. Buka Notepad kemudian salin kode berikut, dan simpan file tersebut dengan nama csstest.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Titel websiteku</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="halaman"><!-- div id halaman dimulai --> <div id="judul"><!-- div id judul dimulai --> <h1 class="judul">Disini judul websiteku</h1> <h2 class="sub-judul">Disini sub-judul websiteku</h2> </div><!-- div id judul berakhir --> <div id="konten"><!-- div id konten dimulai --> <div class="kiri"><!-- div class kiri dimulai --> <p>Disini navigasi bagian kiri</p> </div><!-- div class kiri berakhir --> <div class="tengah"><!-- div class tengah dimulai --> <p>Disini konten websiteku</p> </div><!-- div class tengah berakhir --> <div class="kanan"><!-- div class kanan dimulai --> <p>Disini navigasi bagian kanan</p> </div><!-- div class kanan berakhir -->

</div><!-- div id konten berakhir --> <div class="footer"><!-- div class footer dimulai --> <p>Disini Footer websiteku</p> </div><!-- div class footer berakhir --> </div><!-- div id halaman berakhir --> </body> </html>

Preview Yang berada diantara < dan > hanya sebagai keterangan agar lebih mudah dimengerti, anda bisa menghapusnya. Sekarang buka file tersebut dengan browser, maka kita akan melihat halaman yang polos dengan tulisan seadanya. Sekarang salin CCS berikut kemudian simpan ke folder yang sama dengan csstest.html dengan nama style.css
#halaman {/* "id" dilambangkan dengan "#" */ width: 800px; margin: 0 auto;/* agar dokumen berada ditengah */ padding: 0 auto; } #judul { width: 100%; height: 100px; background: #5F9EA0; margin: 0;/* pengaturan sisi bagian luar */ padding: 0;/* pengaturan sisi bagian dalam */ } #konten { width: 100%; margin: 0; padding: 0; } .kiri {/* "class" dilambangkan dengan "." */ width: 25%; height: 300px; float: left; background: #ADD8E6; } .tengah{ width: 50%; height: 300px; float: left; background: #FDF5E6; } .kanan{ width: 25%; height: 300px; float: right; background: #ADD8E6; } .footer{ height: 40px;

background: #8FBC8F; clear: both; } .judul { color: Red; padding: 10px 0 0 10px; /* penulisan untuk semua sisi: atas kanan bawah kiri */ } .sub-judul { color: #ff0; padding: 0 10px 10px; } p { padding-left: 10px;/* penulisan untuk satu sisi saja */ }

Yang berada diantara /* dan */ hanya sebagai keterangan agar lebih mudah dimengerti, anda bisa menghapusnya. Sekarang buka file csstest.html dengan browser anda. Preview Itulah kira-kira secara dasar cara kerja dari CSS untuk mengontrol halaman website. Untuk melakukan eksperimen lebih lanjut dan untuk mengetahui perintah-perintah CSS lainnya anda bisa mendownload CSS editor TopStyle Lite. Dengan program tersebut buka file CSS diatas kemudian lakukan perubahan-perubahan dan refresh browser untuk melihat hasilnya.