CSS-MODUL4

Modul-4 :
Cascading Style Sheet (CSS)

Mempelajari dasar-dasar CSS :
Inheritance, class, positioning dan
watermarking

Modul -4 : CSS 1

Dalam modul ini akan dipelajari:

1. Apa CSS
2. Text formating (color, size)
3. Pewarisan
4. Class
5. Positioning
6. Watermarking

Modul -4 : CSS 2

1. Apa itu CSS
 CSS = Cascading Style Sheet adlah suatu teknik penulisan kode
untuk memperindah dan mempermudah dalam pengkodean HTML
dengan tujuan untuk memperindah tampilan situs
 CSS dimulai dengan :
<STYLE TYPE="text/css">
NamaKODeBaru { Parameter : nilai }
</STYLE>

 Sebagai contoh untuk kode HTML <B>..</B> artinya adalah cetak
tebal pada teks yang terletak diantaranya. Dengan CSS kita dapat
mendefinisikan <B>..</B> agar memiliki efek tambahan sesuai
yang kita inginkan, misalnya efek terhadap warna huruf.
 Contoh : <Style TYPE=“txt/CSS”
U {color=red}
</Style>

Modul -4 : CSS 3

Contoh efek <U>..</U> menjadi pengatur warna

Tag <U>..</U> memiliki “tugas” baru disamping “tugas”
lama, yaitu warna tulisan.

Hasilnya sama dengan kode berikut :

demo

Modul -4 : CSS 4

Efek yang sama pada dua kode I dan U

Tag <U> =under
line
Dan tag <I> =
italic
Diberi efek baru,
yaitu warna
merah hurufnya
Tag <B> = bold, Klik untuk lihat hasil
diberi efek warna
hijau

DEMO

Modul -4 : CSS 5

Beberapa efek pada satu kode B

 Misalkan pada tag <B>
akan dilekatkan efek
warna, jenis huruf dan
gaya huruf
 Perintahnya CSS-style
nya
 B { color:lime;

text-decoration:
underline; Klik untuk lihat hasil
font-family:Arial }

Demo

Modul -4 : CSS 6

2. CSS-GLOBAL :Sekali Tulis, pakai bersama
 Kita dapat mendefinisikan File : global.css
suatu file *.css yang berisi
B {color: red; text-decoration: underline;
kode-kode CSS
 File tersebut dapat diacu oleh font-family: Arial }
setiap HTML
 Jika file HTML akan mengacu I {color:blue; font-family:"Monotype
file CSS tersebut ditulis : Corsiva"; font-size:20}
 <HEAD>
 <LINK REL="stylesheet" Css_global.html
HREF="global.css"
Digunakan oleh
 TYPE="text/css">
 </HEAD>

Dan Digunakan oleh Css_global2.html

Modul -4 : CSS 7

Selanjutnya 2 file html digabung dalam 1
frame

Klik lihat hasil

Terlihat :
Efek dari tag <B>
dan tag <I> yang
didefinisikan
dalam STYLE di
file global.css

demo

Modul -4 : CSS 8

3. Pewarisan

 Jika kita definisikan suatu CSS yang berefek pada huruf, sementara
dalam HTML juga didefinisikan efek huruf, dan jika tag CSS mengapit
tag HTML maka pengaruh tag CSS akan mewaris (menurun) pada tag
HTMLnya
Efek warna huruf sebagai
pengaruh tag CSS
“menurun” hasil tag HTML
Klik lihat pada
font, yaitu warna hijau

demo

Modul -4 : CSS 9

4. Class

 Class adalah suatu kelompok perintah CSS yang dapat
digunakan pada tag tertentu HTML untuk memberi efek
tambahan berdasar definisi class
 <STYLE TYPE="text/css">
.tanya {color: red}
.jawab {color: blue}
</STYLE>
 Pada efek HTML dapat digunakan sbb :
 <P CLASS=“tanya”> ini adalah teks yang terpengaruh efek
class tanya</P>

 Efek class dapat dilekatkan paad tag HTML apa saja, seperti
pada tag <B>, tag <I> dst

Modul -4 : CSS 10

Contoh class (untuk ubah warna)

Klik lihat hasil

Class :merah berefek
warna huruf menjadi merah
dan class:biru berefek
warna huruf menjadi biru.
Dapat di-inset pada tag
<P> dan tag <b>

Modul -4 : CSS 11

Contoh class (untuk ubah ukuran huruf)

Klik lihat hasil

Font-size : xx-small, x-
small, small, medium,
large, x-large, xx-large

Modul -4 : CSS 12

Contoh class (untuk ubah warna)

Klik lihat hasil

Class :merah berefek
warna huruf menjadi merah
dan class:biru berefek
warna huruf menjadi biru.
Dapat di-inset pada tag
<P> dan tag <b>

Modul -4 : CSS 13

5. Positioning

Klik lihat hasil

demo

Modul -4 : CSS 14

6. Watermarking
 Watermarking adalah konsep mendesaign
background layar dengan gambar tertentu
 Konsep ini dapat diimplementasikan melalui
konsep class sebagai berikut :
 <STYLE TYPE="text/css">
.nama_Class {background-image:
url(“namagambar"); background-
repeat: yes}
 </STYLE> </HEAD>
Hasil
demo
 CONTOH : klik ! klik

Modul -4 : CSS 15

Rangkuman

 CSS merupakan teknik perancangan tampilan WEB untuk
melengkapi kemampuan HTML dengan mendefinisikan tag-tag
baru melalui konsep class dan pewarisan
 Beberapa Kepraktisan dalam mengatur format teks dapat diatasi
dengan CSS seperi atur model huruf, besar huruf, gaya huruf,
macam huruf posisi
 Konsep yang sangat bagus dlama menampilkan halaman web
adlah konsep watermarking yang tidak dapat diatasi dengan
HTML murni dan hanya dengan class CSS
<STYLE TYPE=“text/css”>
. Namaklass { background-image: url(namagambar) }
</STYLE>
 Penggunaan konsep CSS, yaitu dengan tag STYLE juga dapat
langsung dimasukkan dalam tag HTML sehingga pengaruhnya
lokal pada tag tersebut

Modul -4 : CSS 16

Latihan

1. Buatlah gambar dari
windows search seperti
gambar dog sebelah ini
2. Namakan gambar tersebut
dengan dog2.bmp
3. Gunakan gambar
dog2.BMP tersebut
sebagai watermarking
dalam menampilkan tulisan
seperti dalam gambar
berikutnya
4. Atur dalam konsep class
sedemikian sehingg huruf
berwarna magenta dan
berukuran 20

Modul -4 : CSS 17

CSS-MODUL4

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Similar to CSS-MODUL4

Similar to CSS-MODUL4 (20)

CSS-MODUL4