Cascading Style Sheet

Cascading Style Sheet

CSS (Cascading Style Sheet) Manfaat: • • • •

Memperindah tampilan halaman website. Mempermudah mengubah secara keseluruhan warna dan tampilan. Memformat ulang situs Anda secara cepat. Menghemat kode dan waktu dalam mendesain tampilan website.

NEXT

CSS (Cascading Style Sheet) Konsep: • Pewarisan (inheritance) • Selektor-Kontekstual (Contextual Selector) • Kelas (classes)

BACK

NEXT

CSS (Cascading Style Sheet) Ketentuan Mendasar • •

Penulisan script CSS terletak diantara tag … Perintah CSS terdiri dari dua elemen dasar, yaitu: selector dan declaration.

<TITLE>….. <STYLE TYPE=text/css> selector { declaration } ……..

BACK

NEXT

CSS (Cascading Style Sheet) Tag Komentar …… <style type=text/css> …aturan-aturan css disini… /* masukkan komentar Anda dalam blok ini */ …………………

BACK

NEXT

CSS Pewarisan (inheritance) Text CSS_01 <style type=text/css> b { color:lime } Universitas Narotama Surabaya
Fakultas Ilmu Komputer

Catatan: Untuk declaration color dapat juga menggunakan kode heksa

BACK

NEXT

CSS Selektor-Kontekstual (Contextual Selector) Text CSS_01 <style type=text/css> b,i { color:blue; text-decoration:underline; } Universitas Narotama Surabaya
Fakultas Ilmu Komputer Catatan: selector ini kesemuanya untuk bold+italic text

BACK

NEXT

CSS (Cascading Style Sheet) Perbedaan CSS pewarisan (inheritance) dengan CSS Selektor-Kontekstual (Contextual Selector) !!! Pewarisan (inheritance) CSS Inheritance <style type=text/css> b { color:blue; text-decoration:underline } i { color:blue; text-decoration:underline } Universitas Narotama Surabaya
Fakultas Ilmu Komputer

Selektor Kontekstual (Contextual Selector) Selektor-Kontekstual <style type=text/css> b,i { color:blue; text-decoration:underline; } Universitas Narotama Surabaya
NEXT

CSS (Cascading Style Sheet) Aturan CSS berdasarkan case to case CSS_01 Universitas Narotama Surabaya
Fakultas Ilmu Komputer

TIDAK EFEKTIF

BACK

NEXT

CSS (Cascading Style Sheet) Text CSS_02 <style type=text/css> i { color:#ff3333 } Universitas Narotama Surabaya

BACK

NEXT

CSS (Cascading Style Sheet) Text CSS_03 <style type=text/css> u { color:#3333CC } Universitas Narotama Surabaya
Fakultas Ilmu Komputer

BACK

NEXT

CSS (Cascading Style Sheet) Text CSS_04 <style type=text/css> h3 { color:#009900 }

BACK

NEXT

CSS (Cascading Style Sheet) Text CSS_05 <style type=text/css> h2 { color:#009900 } h3 { color:#FF3333 }
Sistem Informasi

Sistem Komputer
BACK

NEXT

CSS (Cascading Style Sheet) Text CSS_07 <style type=text/css> b,i { color:blue; text-decoration:underline; font-family:Tahoma; } Universitas Narotama Surabaya

text-decoration: - underline (tampil garis dibawah text) - overline (tampil garis diatas text) - line-trough (tampil garis melalui text) - none (non-efek)

BACK

NEXT

CSS (Cascading Style Sheet) Text CSS_08 <style type=text/css> b,i { color:blue; text-decoration:underline; font-family:Tahoma; font-size: 28px; } Universitas Narotama Surabaya
Fakultas Ilmu Komputer BACK

NEXT

CSS (Cascading Style Sheet) •

Soal (1) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS:

PREVIEW

BACK

NEXT



PREVIEW

BACK

NEXT



PREVIEW

END

CSS (Cascading Style Sheet) Text CSS_09 <style type=text/css> i { color:blue; text-decoration:underline; font-family:Tahoma; font-size:14px; font-weight:bold; } Universitas Narotama Surabaya

font-weight: - normal - bold

NEXT

CSS (Cascading Style Sheet) Text CSS_10 <style type=text/css> p { color:blue; font-family:Tahoma; font-size:14px; font-weight:bold; font-style:italic; }
Universitas Narotama Surabaya
BACK

NEXT

CSS (Cascading Style Sheet) Text font-variant: small-caps (mengganti semua kar.lower-case dengan kar.upper-case) none (tanpa efek)

CSS_11 <style type=text/css> p { color:blue; font-family:Tahoma; font-size:14px; font-weight:bold; font-variant:small-caps; }
Universitas Narotama Surabaya

Catatan: font-variant tidak berlaku pada browser Netscape

BACK

NEXT

CSS (Cascading Style Sheet) Text text-transform: capitalize (Kar.pertama huruf besar) uppercase (Semua kar. huruf besar) lowercase (Semua kar. Huruf kecil)

CSS_12 <style type=text/css> p { color:blue; font-family:Tahoma; text-transform:lowercase; }
UNIVERSITAS NAROTAMA SURABAYA

BACK

NEXT

CSS (Cascading Style Sheet) Text CSS_13 <style type=text/css> p { color:blue; font-family:Tahoma; letter-spacing:10px; }
UNIVERSITAS NAROTAMA

letter-spacing = mengendalikan jumlah spasi antar karakter

BACK

NEXT

CSS (Cascading Style Sheet) Text CSS_14 <style type=text/css> p { color:blue; font-family:Tahoma; text-indent:30px; }
UNIVERSITAS NAROTAMA

text-indent = membuat indent untuk awal paragraf

BACK

NEXT

CSS (Cascading Style Sheet) Body CSS_15 <style type=text/css> body { background-color:blue; }

BACK

NEXT

CSS (Cascading Style Sheet) Body CSS_16 <style type=text/css> body { background-image: url(bg.jpg); }

BACK

NEXT

CSS (Cascading Style Sheet) Catatan: Nilai list-style-type: disc -> efek lingkaran circle -> efek persegi empat square -> efek lingkaran yang transparan decimal -> 1,2,3,…dst lower-roman -> i,ii,iii,…dst upper-roman -> I,II,III,…dst lower-alpha -> a,b,c,…dst upper-alpha -> A,B,C,…dst None -> Tanpa Efek

BACK

NEXT

CSS (Cascading Style Sheet) Bullet & Numbering CSS_17 <style type=text/css> li { list-style-type:square; font-weight:bold; }

Sistem Informasi

Sistem Komputer

BACK

NEXT



PREVIEW

BACK

NEXT



PREVIEW

BACK

NEXT



PREVIEW

END

CSS (Cascading Style Sheet) Link Link Properties: • A:link • A:hover • A:active

NEXT

CSS (Cascading Style Sheet) Link Definisi style link: • • •

A:link -> memberikan efek pada saat normal (unlink) A:hover -> memberikan efek pada saat mouse pointer diatas A:active -> memberikan efek setelah event click

object

BACK

NEXT

CSS (Cascading Style Sheet) Link CSS_18 <style type=text/css> a { color: #000000; /* kode warna hitam */ text-decoration: none; } a:hover { color : #FF9900; /* kode warna orange */ text-decoration : underline; } Link 1

Link 2 PREVIEW

BACK

NEXT

CSS (Cascading Style Sheet) Link CSS_19 <style type=text/css> a { color: #000000; } /* kode warna hitam */ a:hover { color : #FF9900; } /* kode warna orange */ a:active { color: #006699; } /* kode warna biru */ Link 1

Link 2 PREVIEW

BACK

NEXT

CSS (Cascading Style Sheet) Form Form_01 <style type=text/css> input { background:yellow; }
Form Mahasiswa

NIM

Nama Lengkap

Catatan: untuk selector input berlaku pada, , , &

BACK

NEXT

CSS (Cascading Style Sheet) Form Form_02 <style type=text/css> input { background:yellow; border: 1px solid red;}
Form Mahasiswa

NIM

Nama Lengkap

Jenis border : dotted, dashed, solid, double, groove, ridge, inset dan outset

BACK

NEXT

CSS (Cascading Style Sheet) Form Form_03 <style type=text/css> input { background:yellow; border: 1px solid red; color: blue; }
Form Mahasiswa

NIM

Nama Lengkap

BACK

NEXT

CSS (Cascading Style Sheet) Form Form_04 <style type=text/css> select { background:yellow; border: 1px solid red; color: blue; }
Program Studi:
<select name=prodi>
BACK

NEXT

CSS (Cascading Style Sheet) Form Form_05 <style type=text/css> textarea { background:yellow; border: 1px solid red; color: blue; }
Alamat:

BACK

NEXT


Soal (FORM_01) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS:

PREVIEW

BACK

NEXT


Soal (FORM_02) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS:

PREVIEW

END

CSS (Cascading Style Sheet) Table CSS_20 <style type=text/css> table { border: 1px solid black; }

NIM NAMA

04102001 Lukmanul Khakim

04102002 Indra Cahyo

Catatan: Untuk declaration solid dapat juga menggunakan kode heksa

BACK

NEXT

CSS (Cascading Style Sheet) Table CSS_21 <style type=text/css> table { background-color: cyan; border: 1px solid orange; }

NIM NAMA


04102002 Indra Cahyo

BACK

NEXT

CSS (Cascading Style Sheet) Table CSS_22 <style type=text/css> tr {background-color: blue; color:white; text-align:center;}

NIM NAMA


Catatan: deklarasi border tidak berlaku pada selector

BACK

NEXT

CSS (Cascading Style Sheet) Table CSS_23 <style type=text/css> td {background-color: blue; color:white; padding-left: 15px;
NIM NAMA


Catatan: deklarasi padding tidak berlaku pada selector

BACK

NEXT

CSS (Cascading Style Sheet) Table CSS_24 <style type=text/css> td {background-color: blue; color:white; padding-top: 10px;}
NIM NAMA



BACK

NEXT

CSS (Cascading Style Sheet) Table CSS_25 <style type=text/css> td {background-color: blue; color:white; padding-bottom: 10px;}
NIM NAMA



BACK

NEXT

CSS (Cascading Style Sheet) Table CSS_26 <style type=text/css> td {background-color: blue; color:white; border-bottom: 1px solid red;}
NIM NAMA


BACK

NEXT

CSS (Cascading Style Sheet) Table CSS_27 <style type=text/css> td {background-color: blue; color:white; border-top: 1px solid red;}
NIM NAMA


BACK

NEXT

CSS (Cascading Style Sheet) Table CSS_28 <style type=text/css> td {background-color: blue; color:white; border-right: 1px solid red;}
NIM NAMA


BACK

NEXT

CSS (Cascading Style Sheet) Table CSS_29 <style type=text/css> td {background-color: blue; color:white; border-left: 1px solid red;}
NIM NAMA


BACK

NEXT


Soal (07)

Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS:

PREVIEW

BACK

NEXT


Soal (08)


PREVIEW

BACK

NEXT


Soal (09)


PREVIEW

BACK

NEXT


Soal (10)


PREVIEW

BACK

NEXT


Soal (11)


PREVIEW

BACK

NEXT

CSS (Cascading Style Sheet) Classes Penulisan <style type=text/css> .variable { … deklarasi … }

Catatan: bagian deklarasi harus diawali dengan tanda . (titik)

BACK

NEXT

CSS (Cascading Style Sheet) Classes Text Kelas_01 <style type=text/css> .text { font-family:tahoma; font-size: 16px; color: #006699; font-weight: bold; } Universitas Narotama Surabaya

PREVIEW

BACK

NEXT

CSS (Cascading Style Sheet) Classes Link Kelas (LINK) <style type=text/css> .link { font-family:tahoma; color:#0000FF; text-decoration:underline;} .link:hover,.link:active { font-family:tahoma; color:#FF9900;text-decoration:underline; } Link 1

Link 2

PREVIEW

BACK

NEXT

Cascading Style Sheet

Recommend Documents

Fakultas Ilmu Komputer

Sistem Informasi

Sistem Komputer

Fakultas Ilmu Komputer

Form Mahasiswa

Form Mahasiswa

Form Mahasiswa