Scribd
Unggah
52 tayangan

Tutorial Css

Dokumen tersebut memberikan tutorial mengenai penggunaan CSS untuk mengubah tampilan teks dan link pada halaman web. Beberapa teknik yang diajarkan antara lain mengubah warna teks, menghilangkan garis bawah pada link, memberi warna latar belakang, dan menambahkan efek hover. Selain itu juga diajarkan cara membuat menu navigasi top menggunakan CSS.

Diunggah oleh

kurniawan yoga
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
52 tayangan

Tutorial Css

Dokumen tersebut memberikan tutorial mengenai penggunaan CSS untuk mengubah tampilan teks dan link pada halaman web. Beberapa teknik yang diajarkan antara lain mengubah warna teks, menghilangkan garis bawah pada link, memberi warna latar belakang, dan menambahkan efek hover. Selain itu juga diajarkan cara membuat menu navigasi top menggunakan CSS.

Diunggah oleh

kurniawan yoga
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 17

TUTORIAL

HTML CSS
Langkah Tepat menjadi Web Designer Handal,
menguasai HTML & CSS, jalan membuat halaman
website cantik dan menarik

www.ilmuwebsite.com

Bagian 18. Lebih Dalam


Bekerja dengan CSS

1
Bagian 18. Lebih Dalam
Bekerja dengan CSS
Buat dokumen html dengan kode html seperti di bawah ini.

<!DOCTYPE html>
<html>
<head>
<title>belajar web</title>
</head>
<body>
A:Ternyata css itu <B>asik</B>,kita bisa menjadikan tampilan <B>web</B>
kita jadi <B>indah</B>.<br>
B:ya, Benar sekali itu, dengan css <B>tampilan web</B> yang tadinya
<I>garing</I>, menjadi lebih <B>hidup</B>.
</body>
</html>

Dari tampilan di atas ada beberapa teks dengan cetak tebal dan teks dengan cetak
miring. Karena di dalam code html tersebut ada terdapat tag <B> ... </B> yang
berfungsi untuk membuat teks tebal dan tag <I> ... </I> untuk membuat teks miring.
Jika kita ingin memberi warna pada teks tebal dan teks miring di atas maka kita
perlu menambahkan tag <font> ... </font> pada dokumen html tersebut. Untuk lebih
jelasnya lihat kode di bawah ini:

<!DOCTYPE html>
<html>
<head>
<title>belajar web</title>
</head>
<body>
A:Ternyata css itu <B><FONT COLOR="BLUE">asik</FONT></B>,kita bisa
menjadikan tampilan <B><FONT COLOR="BLUE">web</FONT></B> kita jadi
<B><FONT COLOR="BLUE">indah</FONT></B>.<br>

2
B:ya, Benar sekali itu, dengan css <B><FONT COLOR="BLUE">tampilan
web</FONT></B> yang tadinya <I>garing</I>, menjadi lebih <B><FONT
COLOR="BLUE">hidup</FONT></B>.
</body>
</html>

Untuk mewarani teks yang bercetak tebal diatas kita memerlukan beberapa tag
<font> dengan atribut colornya.

Sekarang kita lihat kode di bawah:

<!DOCTYPE html>
<html>
<head>
<title>belajar web</title>
<style type="text/css">
b{
color:blue;/*merubah warna teks*/
}
</style>
</head>
<body>
A:Ternyata css itu <B>asik</B>,kita bisa menjadikan tampilan <B>web</B>
kita jadi <B>indah</B>.
B:ya, Benar sekali itu, dengan css <B>tampilan web</B> yang tadinya
<I>garing</I>, menjadi lebih <B>hidup</B>.
</body>
</html>

Dari kode diatas maka kita dapat lihat hasilnya akan sama dengan contoh
sebelumnya, yakni semua teks bercetak tebal berubah warnanya menjadi biru.
Nah sekarang kita bandingan kode html yang menggunakan css dengan yang tidak
menggunakan css. Hasilnya kode yg menggunakan css lebih sedikit dibandingkan
kode yang tidak menggunakan css.

3
Membuat Transition Effect pada Link

Efek transisi ini maksudnya adalah efek perubahan property satu warna ke warna lainnya
secara gradual dalam waktu tertentu dalam artian detik. Kaitannya dengan transisi pada
link maka efek transisi link adalah perubahan satu warna ke warna lainnya pada link atau
link dengan background-nya ketika link tersebut berada dalam hover state atau roll over
(ketika link dihampiri mouse) ataupun roll out (ketika link dijauhi mouse).
Untuk lebih jelasnya kita coba buat dokumen html yang isi nya sebuah link. Berikut adalah
kodenya:

<!DOCTYPE html>
<html>
<head>
<title>belajar web</title>
</head>
<body>
<a href="http://www.ilmuwebsite.com">Ilmu Website</a>
</body>
</html>

Dari kode diatas kita memiliki sebuah dokumen html yang isinya adalah link menuju
website Ilmu Website.

Bagaimana jika kita ingin merubah tampilan teks link agar lebih menarik. Nah untuk
merubahnya kita bisa gunakan css. Sekarang kita coba ubah style gambar tersebut dengan
css.

Pertama tambahkan tag <style>...</style> diantara tag <header>...</header>, kemudian


diantara masukan code cssnya di antara tag <style>...</style>. Untuk lebih jelasnya lihat
kode dibawah ini:

<!DOCTYPE html>
<html>
<head>
<title>belajar web</title>

<style type="text/css">

4
a{
color:red;/*merubah warna teks*/
}
</style>

</head>
<body>
<a href="http://www.ilmuwebsite.com">Ilmu Website</a>
</body>
</html>

Dari kode diatas artinya kita bermaksud ingin merubah style/tampilan teks link pada
halaman browser menjadi warna merah.

Selanjutnya kita hilangkan garis bawah pada teks link tersebut. Untuk menghilangkan garis
bawah kita cukup menambahkan properties text-decoration pada kode css tersebut, untuk
lebih jelasnya lihat gambar dibawah ini:

<!DOCTYPE html>
<html>
<head>
<title>belajar web</title>
<style type="text/css">
a{
color:red;/*merubah warna teks*/
text-decoration:none;/*menghilangkan underline*/
}
</style>
</head>
<body>
<a href="http://www.ilmuwebsite.com">Ilmu Website</a>
</body>
</html>

Kemudian kita berikan warna background pada teks link untuk memberikan warna
background kita cukup tambahkan properties background-color pada kode css tersebut,
untuk lebih jelasnya lihat kode dibawah ini.

5
<!DOCTYPE html>
<html>
<head>
<title>belajar web</title>
<style type="text/css">
a{
color:red;
text-decoration:none;
background-color:green;/*memberi warna background pd
teks*/
}
</style>
</head>
<body>
<a href="http://www.ilmuwebsite.com">Ilmu Website</a>
</body>
</html>

Sekarang kita tambahkan effect pada link tersebut. berikut adalah kode lengkapnya untuk
menambahkan effect hover pada teks link

<!DOCTYPE html>
<html>
<head>
<title>belajar web</title>
<style type="text/css">
a{
color:red;
text-decoration:none;
background-color:green;
}

a:hover{
color:green;
background-color:red;
text-weight:bold;/*membuat teks tebal*/
}
</style>

</head>
<body>
<a href="http://www.ilmuwebsite.com">Ilmu Website</a>
</body>
</html>

6
Dari kode diatas kita menambahkan efect pada link, efect tersebut akan berkerja pada saat
pointer mouse Anda diarahkan mengenai teks link, sehingga berubah warna. Inilah yang
dinamakan dengan mouse hover.

Membuat Top Menu

Sering kita melihat dalam sebuah website terdapat top menu, sekarang bagaimana cara
membuat top menu dalam dokumen html.
Pertaman kita buat dulu dokumen html yang isinya adalah list dari menu yang ingin kita
buat, perhatikan kode di bawah ini:

<!DOCTYPE html>
<html>
<head>
<title>belajar web</title>

</head>
<body>
<div id="menu">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">PRODUCT</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>
</div>
</body>
</html>

Setelah selesai membuat list selanjutnya kita ubah style dari teksnya. Berikut ada kode
untuk merubah style dari teks link

<!DOCTYPE html>
<html>
<head>

7
<title>belajar web</title>
<style>
#menu ul li a{
color:red;
text-decoration:none;
padding:0px 5px 0px 5px;/*meberi jarak antar teks*/
font:15pt cambria;/*mengatur format teks dgn size 15pt
dan jns font cambria*/
font-weight:bold;
}
</style>

</head>
<body>
<div id="menu">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">PRODUCT</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>
</div>
</body>
</html>

Selanjutnya kita tambahkan efek hover pada list menu tersebut, berikut adalah kode css
untuk menambahkan efek hover pada teks link.

<!DOCTYPE html>
<html>
<head>
<title>belajar web</title>
<style>
#menu ul li a{
color:red;
text-decoration:none;
padding:0px 5px 0px 5px;/*meberi jarak antar teks*/
font:15pt cambria;/*mengatur format teks dgn size 15pt
dan jns font cambria*/
font-weight:bold;
}

8
#menu ul li a:hover{
color:blue;
background-color:red;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">PRODUCT</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>
</div>
</body>
</html>

Kemudian tambahkan kode berikut ini untuk merubah tampilan list menjadi sejajar ke
samping:

<!DOCTYPE html>
<html>
<head>
<title>belajar web</title>
<style>
#menu ul li a{
color:red;
text-decoration:none;
padding:0px 5px 0px 5px;/*meberi jarak antar teks*/
font:15pt cambria;/*mengatur format teks dgn size 15pt
dan jns font cambria*/
font-weight:bold;
}

#menu ul li a:hover{
color:blue;
background-color:red;
}

#menu ul li{

9
display:inline;/*membuat tampilan list sejajar ke
samping*/
padding:0px 2px 0px 2px;
background-color:blue;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">PRODUCT</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>
</div>
</body>
</html>

Selanjutnya kita tambahkan fungsi global reset css, dimana fungsi reset css ini sebenarnya
berguna untuk mengatasi prilaku berbeda pada setiap default browser. Kita tentu
mengetahui tidak semua yang ditampilan pada halaman web pada browser modern selalu
sama, ini karena setiap element default pada user agent memiliki nilai yang berbeda-beda.
Global Reset CSS ini tentu memudahkan desainer untuk memberi starting value yang sama
pada setiap browser sebelum mengeksekusi nilai css yang sebenarnya. Berikut adalah
kodenya:

/* RESET */
html, body, div, span, applet, object, iframe,
h1, h3, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0; padding: 0; outline: 0; font-size: 100%;
vertical-align: baseline; background: transparent;
height: auto; border-top-width: 0;

10
border-bottom-width: 0; border-left-width: 0;}
blockquote:before, blockquote:after,q:before, q:after
{content: none;}
blockquote, q {quotes: none;}
:focus {outline: 0;}
.clear {clear: both;display: block;height: 1px;overflow:
hidden;margin: 0;padding: 0;}
ins {text-decoration: none;}
del {text-decoration: line-through;}
table {border-collapse: collapse;border-spacing: 0;}
ol, ul {list-style: none;}
ol, ul {list-style: none;}
body {background-color: #ffffff;background-position: center
center;}
/* RESET */

Ok, proses pembuatan top menu sudah selesai, mudah bukan. Untuk lebih jelasnya
dibawah ini merupakan kode lengkap untuk pembuatan top menu

<!DOCTYPE html>
<html>
<head>
<title>belajar web</title>
<style>
/* RESET */
html, body, div, span, applet, object, iframe,
h1, h3, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0; padding: 0; outline: 0; font-size: 100%;
vertical-align: baseline; background: transparent;
height: auto; border-top-width: 0;
border-bottom-width: 0; border-left-width: 0;}
blockquote:before, blockquote:after,q:before, q:after
{content: none;}
blockquote, q {quotes: none;}
:focus {outline: 0;}
.clear {clear: both;display: block;height: 1px;overflow:
hidden;margin: 0;padding: 0;}
ins {text-decoration: none;}
del {text-decoration: line-through;}

11
table {border-collapse: collapse;border-spacing: 0;}
ol, ul {list-style: none;}
ol, ul {list-style: none;}
body {background-color: #ffffff;background-position:
center center;}
/* RESET */

#menu ul li a{
color:red;
text-decoration:none;
padding:0px 5px 0px 5px;/*memberi jarak antar teks*/
font:15pt cambria;/*mengatur format teks dgn size 15pt
dan jns font cambria*/
font-weight:bold;
}

#menu ul li a:hover{
color:white;
background-color:red;
}

#menu ul li{
display:inline;/*membuat tampilan list sejajar ke
samping*/
padding:0px 2px 0px 2px;
background-color:blue;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">PRODUCT</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>
</div>
</body>
</html>

12
Membuat Menu Dropdown

Suatu menu dropdown biasanya disediakan ketika website terdiri dari banyak menu
halaman. Keuntungan dari penggunaan menu dropdown ini adalah desain halaman menjadi
lebih menarik serta meningkatkan kemudahan pengguna untuk menjelajahi web site.
Sekarang kita mulai mencoba membuat menu drop down, pada dasarnya menu drop down
dibuat dengan menggunakan list yang memiliki sublist. Berikut adalah proses pembuatan
menu drop down.
Peretama yang harus dilakukan adalah membuat dokumen html.

<!DOCTYPE html>
<html>
<head>
<title>Belajar WEB</title>
<link rel="stylesheet" type="text/css" href="styledropdown.css">
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">Menu</a>
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</li>
<li><a href="#">Artikel</a>
<ul>
<li><a href="#">Artikel 1</a></li>
<li><a href="#">Artikel 2</a></li>
<li><a href="#">Artikel 3</a></li>
<li><a href="#">Artikel 4</a></li>
</ul>
</li>
<li><a href="#">Contact</a>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Phone</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>

13
Selanjutnya buat file stylenya didokumen baru dengan nama styledropdown.css
Kemudian kita akan hilangkan list style pada list menu tersebut, berikut adalah kode untuk
menghilangkan list stylenya. Kode dibawah ini di masukan kedalam sile style.css

#menu ul {
list-style: none;/*menghilangkan list style*/
}

#menu ul artinya kita akan mengatur style suatu elemen yang berada didalam elemen yg
diberi id dalam hal ini id menu.
Kemudian kita buat menu menjadi sejajar kesamping,

#menu li{
float:left;
}

#menu li artinya hampir sama dengan #menu ul, hanya saja ini digunakan untuk mengatur
list-list menu itu sendiri, yaitu Menu 1, Menu 2, dan Menu 3.
float: left artinya kita membuat menu-menu tersebut berjajar horizontal dari kiri.

Selanjutnya kita sembunyikan sublist dari menu tersebut, berikut adalah kodenya:

#menu ul ul{
visibility:hidden;/*menyembunyikan element*/
width:150px;
}

#menu ul ul artinya hampir sama dengan #menu ul namun struktur ini berfungsi untuk
mengatur bagian list sub menu yang berada didalam bagan list menu utama.
visibility:hidden ini berfungsi untuk menghilangkan bagian list sub menu (ul yang kedua
width:150px berfungsi untuk membuat lebar bagan list sub menu tersebut sebesar 150px.

14
Agar sub menu tersebut muncul ketika menu utama disorot, maka kita tambahkan kode css
seperti dibawah ini:

#menu ul li:hover ul, #menu ul a:hover ul{


visibility:visible;
}

Kode ccs diatas berfungsi agar bagian list sub menu akan terlihat ketika pointer berada di
atas menu utama serta di atas link yang ada pada bagan list sub menu tersebut.

Selanjutnya kita akan mengatur style pada menu, berikut adalah kode untuk mengatur style
pada menu:

#menu li a {
height: 30px;
width: 150px;
display: block;
color: black;
border:1px solid #000000;
background-color:#dfdfdf;
text-decoration: none;
text-align: center;
padding-top:5px;
}

Selanjutnya kita beri style pada teksnya. Berikut adalah kode untuk memberikan style pada
teksnya.

#menu ul li a{
color:black;
background-color:#dfdfdf;
font:20px cambria;
border-left:1px solid black;
border-right:1px solid black;
text-decoration:none;
}

Kemudian kita beri efect hover pada menu tersebut, berikut adalah kodenya:

15
#menu ul li a:hover{
color:white;
background-color:black;
text-shadow:none;
}

Koding lengkapnya file css styledropdown.css adalah sebagaiberikut

#menu ul {
list-style: none;/*menghilangkan list style*/
}

#menu li{
float:left;
}

#menu ul ul{
visibility:hidden;/*menyembunyikan element*/
width:150px;
}

#menu ul li:hover ul, #menu ul a:hover ul{


visibility:visible;
}

#menu li a {
height: 30px;
width: 150px;
display: block;
color: black;
border:1px solid #000000;
background-color:#dfdfdf;
text-decoration: none;
text-align: center;
padding-top:5px;
}

#menu ul li a{
color:black;
background-color:#dfdfdf;
font:20px cambria;
border-left:1px solid black;

16
border-right:1px solid black;
text-decoration:none;
}

#menu ul li a:hover{
color:white;
background-color:black;
text-shadow:none;
}

Selanjutnya untuk membuat tampilan menu lebih rapi tambahkan kode global reset css
dalam file style tersebut.

17

Anda mungkin juga menyukai