CASCADING STYLE SHEETS (CSS) CSS merupakan bagian untuk membuat dynamic HTML. CSS mendeskripsikan bagaimana tampilan document HTML di layar CSS digunakan untuk membuat special efek Aturan penulisan : Nilai untuk property tidak boleh dalam tanda petik. contoh : color : green; Nama property bersifat case sensitive. Cara penulisan ada 3 (eksternal style sheet, internal style sheet, inline style sheet)
ATURAN PENULISAN CSS 1. External Style Sheet Bentuk : <link rel=“stylesheet” type=“text/css” href=“css_files.css”> dimana : <link, merupakan tag pembuka diakhiri dengan tanda “>” rel=“stylesheet”, menerangkan halaman aman ini akan dikenai efek style sheet type=“text/css”, file yang dipanggil berupa css href=“css_files.css”, alamat dokumen stylesheet yang dipanggil File: efek.css <HTML> <HEAD> <TITLE>Desain Web</TITLE> <LINK REL="STYLESHEET" TYPE="text/css" HREF="efek.css"> </HEAD> <BODY> <H1>DESAIN WEB</H1> <P>Latihan Desain Web Dengan CSS </BODY> </HTML> body{ color: green; background: white; font-family: arial; }
ATURAN PENULISAN CSS 2. Internal Style Sheet Bentuk umum : <style type=“text/css”> …definisi style… </style> <HTML> <HEAD> <TITLE>Desain Web</TITLE> <STYLE type="text/css"> body { color: white; background: green; font-family : arial; } </STYLE> </HEAD> <BODY> <H1>BROWSER</H1> <P>Browser adalah aplikasi untuk mengakses web </BODY> </HTML>
ATURAN PENULISAN CSS 3. Inline Style sheet <HTML> <HEAD> <TITLE>Desain Web</TITLE> </HEAD> <BODY style="color: white; background: green; font-family : arial;" > <H1>BROWSER</H1> <P>Browser adalah aplikasi untuk menjalankan web </BODY> </HTML>
MEMBUAT BACKGROUND PADA CSS 1. Background warna <HTML> <HEAD> <TITLE>Menggunakan Background Warna</TITLE> <STYLE type="text/css"> body {background-color : #99CCFF} h2 {background : green} h3 {background-color : transparent} p {background : rgb(240,248,255)} </STYLE> </HEAD> <BODY> <h2>Header 2, Background Hijau</h2> <h3>Header 3, Bakground Transparan</h3> <p>Background pada paragraph</p> </BODY> </HTML>
MEMBUAT BACKGROUND PADA CSS 2. Background gambar Properties Value Keterangan background-image url Alamat gambar yang dituju background-repeat repeat repeat-x repeat-y no-repeat Diulang dalam halaman Diulang sumbu x Diulang sumbu y Tampil 1 gambar Background-position top left top center top right center left center center center right bottom left bottom center bottom right x-% y-% x-pos y-pos Atas kiri halaman Atas tengah halaman Atas kanan halaman tengah kiri halaman Pusat halaman tengah kanan halaman bawah kiri halaman bawah tengah halaman bawah kanan halaman Pakai nilai %
MEMBUAT BACKGROUND IMAGE PADA CSS <HTML> <HEAD> <TITLE>Menggunakan Background Gambar</TITLE> <STYLE type ="text/css"> BODY { background-image: url(“bg.jpg"); background-repeat: repeat-x; } </STYLE> </HEAD> <BODY> Background Berulang pada Sumbu X </BODY> </HTML>
MEMBUAT BACKGROUND IMAGE PADA CSS <HTML> <HEAD> <TITLE>Menggunakan Background Gambar</TITLE> <STYLE type = "text/css"> BODY {background-image:url (“logo.jpg"); background-repeat: no-repeat; background-position: center center; } </STYLE> </HEAD> <BODY> Background di Pusat Halaman </BODY> </HTML>
PENGATURAN HALAMAN MENGGUNAKAN MARGIN <HTML> <HEAD> <TITLE>Pengaturan Margin</TITLE> <STYLE type="text/css"> BODY { margin-top : 1cm; margin-right : 2cm; margin-bottom : 1cm; margin-left : 2cm; } </STYLE> </HEAD> <BODY> Pengaturan Batas Halaman (atas 1cm, kanan 2cm,bawah 1cm, kiri 2cm) </BODY> </HTML>
PENGATURAN HALAMAN MENGGUNAKAN PADDING <HTML> <HEAD> <TITLE>Pengaturan Margin</TITLE> <STYLE type="text/css"> BODY { padding-top : 10%; padding-right : 20%; padding-bottom : 40%; padding-left: 20%; } </STYLE> </HEAD> <BODY> Text ini berada di tengah halaman , karena di lakukan pengaturan halaman dengan menggunakan padding atas 10%, kanan 20%,bawah 40%,dan kiri 20%. </BODY> </HTML>
FORMAT TEKS Properties Value Keterangan Pengaturan warna color green, dll Pengaturan Spasi (jarak antar karakter) letter-spacing Normal Length Ukuran standar HTML Ukuran panjang (cm,px) Perataan Text text-align left right center justify text-decoration none underline overline line-through blink Bentuk standar Bergaris bawah Bergaris atas Text dicoret Text berkedip Pengaturan text indentasi text-indent length % Dengan cm, px Dengan persentase Pengubahan Bentuk Karakter text-transform capitalize uppercase lowercase
<HTML> <HEAD> <TITLE>Format Text </TITLE> <STYLE type ="text/css"> p {color : green; letter-spacing: 0.5cm} h1 {letter-spacing: -2px} h2 {text-align: center} h3 {text-align: left} h4 {text-align: right} </STYLE> </HEAD> <BODY> <p>Pengaturan Spasi Pada Paragraph </p> <h1>Header 1</h1> <h2>Header 2, Di tengah</h2> <h3>Header 3, Di kiri</h3> <h4>Header 4, Di kanan</h4> </BODY> </HTML>
<HTML> <HEAD> <TITLE>Format Text </TITLE> <STYLE type="text/css"> em {text-decoration : overline} h2 {text-decoration: blink} h3 {text-decoration: underline} a {text-decoration: none} </STYLE> </HEAD> <BODY> <em>Bentuk Overline</em> <h2>Header 2, Bentuk Line-through</h2> <h3>Header 3, Bentuk Underline</h3> <p><a href="coba.htm">Penggunaan Dalam Link</a></p> </BODY> </HTML>
<HTML> <HEAD> <TITLE>Format Text </TITLE> <STYLE type="text/css"> p.besar {text-transform: uppercase} p.kecil {text-transform: lowercase} </STYLE> </HEAD> <BODY> <p class="besar"> pengubahan kedalam huruf besar </p> <p class="kecil"> PENGUBAHAN KEDALAM HURUF KECIL </p> </BODY> </HTML>
PENGATURAN FONT Properties Value Keterangan Jenis Font font-family arial, dll Ukuran Huruf Font-size Small Medium Large Length % Kecil Menengah Besar Besar font (pt,px) Persentase Pengaturan gaya pada font font-style normal italic oblique Ketebalan huruf font-weight bold 100 ~ 900
<HTML> <HEAD> <TITLE>Pengaturan Font</TITLE> <STYLE type="text/css"> p.italic { font-size :200% ; font-style: italic; } p.normal{ font-family : verdana ; font-style: normal; p.oblique {font-style: oblique} </STYLE> </HEAD> <BODY> <P class="italic">Menggunakan Style Italic</P> <P class="normal">Menggunakan Style Normal </P> <P class="oblique">Menggunakan Style Oblieque</P> </BODY> </HTML>
<HTML> <HEAD> <TITLE>Pengaturan Font</TITLE> <STYLE type="text/css"> p.normal { font-family : verdana ; font-weight: normal; } p.thick font-weight: bold; p.thicker font-family : times ; font-weight: 900; </STYLE> </HEAD> <BODY> <p class="normal"> Desain Web </p> <p class="thick"> Desain Web </p> <p class="thicker"> Desain Web </p> </BODY> </HTML>
PENGATURAN TABEL <HTML> <HEAD> <TITLE>Pengaturan Table spec</TITLE> <STYLE type="text/css"> TH { color : #FFFFFF; background-color : #336699; border-width: 1px ; border-style:solid; border-color :red ; font-size: 9pt; } TD { color : red; background-color : #E6E6FA; border-color :blue ; </STYLE> </HEAD>
<BODY> <table width="468" border="0" cellpadding="5" cellspacing="0"> <tr> <th width="112"> Nama </th> <th width="91"> No Test </th> <th width="96"> Nilai </th> <th width="137”> Keterangan </th> </tr> <tr> <td> Ali </td> <td> 001 </td> <td> 78 </td> <td> Lulus </td> <tr> <td> Amir </td> <td> 002 </td> <td> 43 </td> <td> Mengulang </td> <tr> <td> Adi </td> <td> 003 </td> <td> 85 </td> </table> </BODY> </HTML>
HYPERLINK Selector Keterangan a:link Keadaan awal pemicu link aktif a:visited Keadaan pemicu link setelah dikunjungi a:active Keadaan pemicu yang sedang aktif a:hover Kejadian pada pemicu link saat mouse digerakkan diatasnya <HTML> <HEAD> <TITLE>Pengaturan Hyperlink</TITLE> <STYLE type="text/css"> A:link {text-decoration: none} A:visited {text-decoration: none} A:active {text-decoration: none} A:hover { font-weight:none; color: red; background-color:blue;} </STYLE> </HEAD> <BODY> <a href="coba.htm">Klik disini</a> </BODY> </HTML>
TUGAS Buatlah web pribadi anda menggunakan css. Lengkapi dengan tombol fasilitas menu: HOME : Informasi sekilas tentang diri anda. PENDIDIKAN : Pendidikan yang telah anda tempuh, termasuk pelatihan dan training yang pernah diikuti. JADWAL KULIAH : Gunakan pemakaian tabel dengan css seperti diatas. AKTIVITAS : Pengalaman organisasi yang pernah anda ikuti selama kuliah atau di luar. Tambahkan menu atau informasi lain, untuk menambah nilai anda.