CSS [part 2]

Playwebstar

Cascading Style Sheet (CSS)

Latihan Membuat Web Untuk Pemula

Playwebstar

Elemen elemen CSS

► Mengatur format font (huruf)

Fungsi	Property	Nilai	Contoh
Style huruf	font-style	normal	<style type="text/css"> .text { font-style: italic; } h2 { font-style: oblique; font-weight: bold; } </style>
		italic
		oblique
Tebal huruf	font-weight	normal
		bold
		bolder
		lighter
Ukuran huruf	font-size	n px n pt	<style type="text/css"> p { font-size: 11px; padding-left: 20px; } </style>
Kapitalisasi	text-transform	capitalize	<style type="text/css"> #kedip { font-size: 10pt; text-transform: uppercase; text-decoration: blink; } h3 { text-transform: lowercase; } </style>
		uppercase
		lowercase
Dekorasi text	text-decoration	blink
		line-through
		overline
		underline
Jenis huruf	font-face		<style type="text/css"> .judul { font-family: Garamound, Sans-serif, Times New Roman; } </style>

Sebagai catatan. Khusus untuk elemen font-face. Contoh di atas jenis huruf sebagai pilihan adalah Garamound, bila di komputer user tidak memiliki jenis font itu, akan ditampilkan jenis Sans-serif, apabila tidak ada juga, maka akan ditampilkan dengan jenis Times New Roman. Karena jenis huruf tergantung dari font yang terinstal di komputer user.

► Pengaturan warna

ada tiga cara dalam pengaturan warna :

Menggunakan nama warna
Contoh :
body {
color: blue;
background-color: green;
}
Menggunakan nilai desimal untuk warna merah, hijau, dan biru dan masing masing memiliki interval 0 sampai 255.
Contoh :
/* memberi warna merah */
body {
color: rgb(255,0,0)
}
Menggunakan angka heksadesimal yang dimulai dengan karakter # dan diikuti enam angka heksadesimal sebagai pengaturan warna.
Contoh :
/* memberi warna merah */
body {
color: #FF0000;
}

► border

Fungsi	Property	Nilai	Contoh
Memberikan border	border	dotted	<style type="text/css"> .box { border: dotted; border width: 1px; } #kotak { border: solid; border-color: red; } </style>
		dashed
		solid
		double
		groove
		ridge
		inset
		outside
Mengatur lebar border	border-width	thin
Mengatur lebar border	border-width	medium

► CSS Pseudo-class

CSS pseudo-class digunakan untuk menambahkan efek khusus pada beberapa selector. Umumnya CSS pseudo-class ini diterapkan pada link, yaitu perbedaan warna saat link dalam keadaan normal, ketika kita mengarahkan pointer pada sebuah link, atau ketika link tersebut mendapat perlakuan (di-klik) oleh user.

Pseudo name	Purpose
:link	Ketika link masih normal
:hover	Ketika kursor diarahkan ke atas link
:active	Ketika link di klik
:visited	Ketika link sudah pernah dikunjungi

Format penulisan pseudo class secara umum :

selector:pseudo-class {property:value}

Pseudo-class bisa juga dikombinasikan dengan class :

a.red:visited {color:#FF0000}
<a class="red" href="css_syntax.asp">
    CSS Syntax
</a>

Untuk latihan ketikkan script berikut dan simpan dengan nama "style-04.html"

<html>
    <head>
        <title>
            pseudo class
        </title>
        <style type="text/css">

            /* link normal warna merah */
            a:link {color:#FF0000}

            /* link sudah diakses warna hijau */
            a:visited {color:#00FF00}

            /* kursor di atas link warna ungu */
            a:hover {color:#FF00FF}

            /* ketika di klik warna biru */
            a:active {color:#0000FF}

        </style>
    </head>
    <body>
        <a href="style-01.html">Halaman 1</a>
        <a href="style-02.html">Halaman 2</a>
        <a href="style-03.html">Halaman 3</a>
        <a href="style-04.html">Halaman 4</a>
    </body>
</html>

Hasil dari script di atas :

► CSS Pseudo-elemen

Pseudo-elemen digunakan untuk menerapkan style pada suatu elemen (bukan secara keseluruhan), misalnya huruf pertama dari sebuah paragraf atau baris pertama suatu paragraf.

Pseudo name	Purpose
:first-letter	Menambah style khusus pada huruf pertama
:first-line	Menambah style khusus pada baris pertama

Format penulisan pseudo elemen sama dengan format penulisan pseudo class.
Untuk latihan ketikkan script berikut dan simpan dengan nama "style-05.html"

<html>
    <head>
        <title>
            Pseudo Elemen
        </title>
        <style type="text/css">

            /* huruf pertama */
            h2:first-letter {
                color: #FF0000;
                font-size: 32px;
            }

            /* baris pertama */
            p:first-line {
                font-weight: bold;
            }

            /* huruf pertama dan
               selector class */
            p.berita:first-letter {
                font-size: 32px;
            }

        </style>
    </head>
    <body>
        <h2>
            Judul
        </h2>
        <p>
            Contoh paragraf baris pertama<br />
            ini adalah baris kedua
        </p>
        <p class="berita">
            Contoh paragraf baris pertama<br />
            ini adalah baris kedua
        </p>
    </body>
</html>

Hasil dari script di atas :

► CSS Box Model (konsep penggunaan div)

Elemen elemen pada halaman HTML sebenarnya terdiri dari banyak kotak (box model). Dalam mendesain layout sebuah halaman web, kita biasa menggunakan tabel karena prosesnya yang mudah dan simpel. Tetapi kekurangan dari tabel adalah proses pembuatan tabel ketika sebuah halaman web mulai dibuka pada browser sedikit memakan waktu. Untuk itu, kita bisa mengatasi hal tersebut dengan menggunakan div untuk membuat layout sebuah halaman web.

Hal dasar yang perlu kita ketahui ketika membuat elemen ini adalah: margin, border, dan padding. Untuk lebih jelasnya perhatikan ilustrasi gambar berikut.

Margin

Border

Padding

Content

Penjelasan :

Margin : Jarak antara tepi elemen dengan area luar (jarak antar elemen)
Border : Garis atau batas tepi dari elemen
Padding : Jarak antara isi elemen dengan garis batas/tepi elemen
Content : Isi dari elemen

Perlu kita ketahui, ketika kita menentukan ukuran (panjang dan tinggi) suatu elemen menggunakan CSS, kita sebenarnya menentukan ukuran dari area isi (content). Untuk mengetahui ukurang sebenarnya dari elemen tersebut, kita harus menambahkan ukuran padding, border, dan margin. Misalnya, panjang total dari elemen di bawah adalah 300px.

width: 250px;
padding: 10px;
border: 5px solid gray;
margin: 10px;

Penghitungannya :	250px (width)
	+ 20px (padding kanan dan kiri)
	+ 10px (border kanan dan kiri)
	+ 20px (margin kanan dan kiri)
	= 300px

Untuk latihan ketikkan script berikut dan simpan dengan nama "style-06.html"

<html>
    <head>
        <style type="text/css">

            div.ex {
                width: 220px;
                padding: 10px;
                border: 5px solid gray;
                margin: 0px;
            }

            hr {
                margin: 0px;
            }

        </style>
    </head>
    <body>
        <hr width="250px" />
        <br />
        <div class="ex">
            Panjang garis di atas 250px.<br />
            Panjang total elemen ini juga 250px.
        </div>
    </body>
</html>

Hasil dari script di atas :

Jika kita ingin menentukan ukuran margin atau padding yang berbeda di tiap sisi (kiri, kanan, atas, bawah), kita bisa mendefinisikan tiap sisi satu satu (margin-top, margin-left, margin-bottom, margin-right). atau cara lain adalah mendefinisikan langsung satu baris, contoh :

a.	margin:25px 50px 75px 100px;	Margin atas 25px
		Margin kanan 50px
		Margin bawah 75px
		Margin kiri 100px

b.	margin:25px 50px 75px;	Margin atas 25px
		Margin kanan dan kiri 50px
		Margin bawah 75px

c.	margin:25px 50px;	Margin atas dan bawah 25px
		Margin kanan dan kiri 50px

d.	margin:25px;	Semua ukuran margin 25px

Untuk latihan ketikkan script berikut dan simpan dengan nama "style-07.html"

<html>
    <head>
        <style type="text/css">

            div.container {
                width: 100%;
                margin: 0px;
                border: 1px solid gray;
                line-height: 150%
            }

            div.header,div.footer {
                padding: 0.5em;
                color: white;
                background-color: gray;
                clear: left;
            }

            h1.header {
                padding: 0;
                margin: 0;
            }

            div.left {
                float: left;
                width: 160px;
                margin: 0;
                padding: 1em;
            }

            div.content {
                margin-left: 190px;
                border-left: 1px solid gray;
                padding: 1em;
            }

        </style>
    </head>
    <body>
        <div class="container">
            <div class="header">
                <h1 class="header">
                    Penggunaan div
                </h1>
            </div>
            <div class="left">
                <p>
                    Latihan membuat web sederhana
                    menggunakan HTML dan CSS.
                </p>
            </div>
            <div class="content">
                <h2>
                    Konsep Penggunaan div
                </h2>
                <p>
                    Elemen elemen pada HTML sebernya terdiri 
dari banyak kotak (box model). Namun kita mencoba menggunakan 
div untuk membuat layout sebuah halaman web.
                </p>
                <p>
                    Konsep penggunaan div sebagai pengganti 
table. penggunaan div mempercepat waktu loading sebuah 
halaman web.
                </p>
            </div>
            <div class="footer">
                Wahyudi Blog
            </div>
        </div>
    </body>
</html>

Hasil dari script di atas :

Contoh penerapan style menggunakan external style sheet
Untuk latihan ketikkan script CSS berikut dan simpan dengan nama "style.css"

body {
    background-color: #CCCCCC;
    margin-left: 15px;
    margin-top: 20px;
    font-family: "Trebuchet MS", Arial Helvetica;
    color: #FFFFFF;
}

b, i {
    color: #00FFFF;
    text-decoration: underline;
}

.atas {
    background-color: #003399;
    letter-spacing: -1px;
    font-size: 25px;
    padding-left: 15px;
}

.credit {
    color: #333333;
    font-size: 11px;
    background-color: #F4F4F4;
}

.samping {
    padding-left: 0px;
    padding-top: 15px;
    background-color: #6699CC;
}

#isi {
    background-color: #333333;
    padding-left: 20px;
    padding-top: 15px;
}

#box {
    border: solid;
    border-color: #FFFF00;
    background-color: #0033FF;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 16px;
    width: 150px;
    margin-bottom: 20px;
}

/* link sebelum diakses */
a:link {
    color: #FFFFFF;
    text-decoration: none;
    letter-spacing: -1px;
}

/* link saat kursor berada di atasnya */
a:hover {
    color: #000066;
    text-decoration: underline;
    letter-spacing: 1px;
}

/* link saat diklik */
a:active {
    color: yellow;
    letter-spacing: +2px;
    text-decoration: overline;
}

/* link yang telah dikunjungi */
a:visited {
    color: black;
    text-decoration: line-through;
}

Kemudian ketikkan script HTML berikut dan simpan dengan nama "home.html"

<html>
    <head>
        <title>
            External Style Sheet
        </title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h1>
            BIODATA
        </h1>
        <table width="620" height="315" border="0">
            <tr>
                <td height="52" colspan="2" class="atas">
                    Wahyudi K N
                </td>
            </tr>
            <tr>
                <td width="174" height="201" class="samping" 
valign="top">
                    <ul>
                        <li>
                            <a href="halamandepan.html">
                                Halaman depan
                            </a>
                        </li>
                        <li>
                            <a href="profil.html">
                                Profil
                            </a>
                        </li>
                        <li>
                            <a href="galeri.html">
                                Galery Foto
                            </a>
                        </li>
                    </ul>
                </td>
                <td width="430" id="isi" valign="top">
                    <center>
                        <div id="box">
                            About Me !
                        </div>
                    </center>
                    <table>
                        <tr>
                            <td>
                                Nama 
                            </td>
                            <td>
                                : 
                            </td>
                            <td>
                                Wahyudi Kusumo Nugroho
                            </td>
                        </tr>
                        <tr>
                            <td>
                                TTL  
                            </td>
                            <td>
                                : 
                            </td>
                            <td>
                                Yogyakarta, 01 Januari 2009
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Alamat 
                            </td>
                            <td>
                                :
                            </td>
                            <td> 
                                Jalan sana sini No.123 Yogyakarta
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Telp 
                            </td>
                            <td>
                                : 
                            </td>
                            <td>
                                (0274) 123456
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center" class="credit">
                    &copy; 2009 Wahyudi Blog<br />
                    http://viruspintar.blogspot.com
                </td>
            </tr>
        </table>
    </body>
</html>

Dan hasil dari script di atas adalah :