CSS [part 2]


Cascading Style Sheet (CSS)
Latihan Membuat Web Untuk Pemula


Elemen elemen CSS

► Mengatur format font (huruf)

FungsiPropertyNilaiContoh
Style huruffont-stylenormal<style type="text/css">
.text {
  font-style: italic;
}
h2 {
  font-style: oblique;
  font-weight: bold;
}
</style>
italic
oblique
Tebal huruffont-weightnormal
bold
bolder
lighter
Ukuran huruffont-sizen px n pt<style type="text/css">
p {
  font-size: 11px;
  padding-left: 20px;
}
</style>
Kapitalisasitext-transformcapitalize<style type="text/css">
#kedip {
  font-size: 10pt;
  text-transform: uppercase;
  text-decoration: blink;
}
h3 {
  text-transform: lowercase;
}
</style>
uppercase
lowercase
Dekorasi texttext-decorationblink
line-through
overline
underline
Jenis huruffont-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 :
  1. Menggunakan nama warna
    Contoh :
    body {
      color: blue;
      background-color: green;
    }
  2. 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)
    }
  3. Menggunakan angka heksadesimal yang dimulai dengan karakter # dan diikuti enam angka heksadesimal sebagai pengaturan warna.
    Contoh :
    /* memberi warna merah */
    body {
      color: #FF0000;
    }

► border

FungsiPropertyNilaiContoh
Memberikan borderborderdotted<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 borderborder-widththin
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 namePurpose
:linkKetika link masih normal
:hoverKetika kursor diarahkan ke atas link
:activeKetika link di klik
:visitedKetika 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 namePurpose
:first-letterMenambah style khusus pada huruf pertama
:first-lineMenambah 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 :



.:: Semoga bermanfaat ::.



*.:｡✿ Don't forget to come back again ✿.｡.:*






Visit Wahyudi Blog !

Oleh at
Labels:

Tidak ada komentar:

Posting Komentar

Plisss...
Jangan nyepam (spam), jangan promosi (apapun itu), jangan SARA, jangan OOT...

Mohon kerja samanya, berikan komentar yang berbobot dan bermanfaat bagi semua... ^^

Langganan: Posting Komentar (Atom)

Artikel Unggulan

Panduan Makan Sehat bagi Generasi Z: Tips Mudah untuk Menjaga Energi dan Kesehatan

Menjaga Kesehatan dan Energi saat Berlatih: Nutrisi Penting untuk Atlet Generasi Z Gaya hidup aktif dan olahraga merupakan hal yang sangat p...

Paling Populer dalam Sebulan