CASCADING STYLE SHEETS (CSS)

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.

DESAIN WEB

DESAIN WEB

CASCADING STYLE SHEETS (CSS)

Presentasi serupa

Presentasi berjudul: "CASCADING STYLE SHEETS (CSS)"— Transcript presentasi:

Presentasi serupa

Tentang proyek

Tanggapan

DESAIN WEB

DESAIN WEB

Masuk

Otorisasi melalui jaringan sosial:

CASCADING STYLE SHEETS (CSS)

Presentasi serupa

Presentasi berjudul: "CASCADING STYLE SHEETS (CSS)"— Transcript presentasi:

Presentasi serupa

Tentang proyek

Tanggapan