KOMPUTER APLIKASI IT XHTML & CSS MODUL 06

Presentasi berjudul: "KOMPUTER APLIKASI IT XHTML & CSS MODUL 06"— Transcript presentasi:

1 KOMPUTER APLIKASI IT XHTML & CSS MODUL 06

2 CSS Mari Kita Mengenal Format-Format Style Dengan
KOMPUTER APLIKASI IT - XHTML & CSS MODUL 06 Mengenal Properti CSS Mari Kita Mengenal Format-Format Style Dengan CSS

3 Background Latar Belakang
KOMPUTER APLIKASI IT - XHTML & CSS MODUL 06 Latar Belakang Background Latar Belakang Background di dalam CSS digunakan untuk menentukan Efek latar belakang pada Elemen HTML

4 KOMPUTER APLIKASI IT - XHTML & CSS MODUL 06
Latar Belakang Properti Utama background Properti Turunan background-color, background-image, background-repeat, background-attachment, background-position

5 Kita dapat menentukan Warna atau Gambar pada background.
KOMPUTER APLIKASI IT - XHTML & CSS MODUL 06 Latar Belakang Kita dapat menentukan Warna atau Gambar pada background. Untuk Gambar, Kita dapat menentukan posisi gambar dan repeat/pengulangannya. background: #ccccff; background: url(‘balon.jpg’); background: #ffeeaa url(‘balon.jpg’);

6 Kita dapat juga mendefinisikannya pada properti turunan:
KOMPUTER APLIKASI IT - XHTML & CSS MODUL 06 Latar Belakang Kita dapat juga mendefinisikannya pada properti turunan: background-color: #ccccff; background-image: url(‘balon.jpg’); background-position: center top; background-repeat: repeat-y;

7 KOMPUTER APLIKASI IT - XHTML & CSS MODUL 06
Latar Belakang Pada properti background, semua properti turunan dapat didefinisikan secara langsung: background: #ccccff url(‘balon.jpg’) center top repeat-y;

8 background-color Menentukan Latar-Belakang dengan warna.
KOMPUTER APLIKASI IT - XHTML & CSS MODUL 06 Latar Belakang background-color Menentukan Latar-Belakang dengan warna. Bisa berupa hex color, name color atau rgb. (Pada CSS3, dapat menggunakan rgba) background-color: #ccccff; background-color: red; background-color: rgb(255,90,50); background-color: rgba(80,80,0,0.5);

9 background-image Menentukan Latar-Belakang dengan gambar.
KOMPUTER APLIKASI IT - XHTML & CSS MODUL 06 Latar Belakang background-image Menentukan Latar-Belakang dengan gambar. URL dimasukan di dalam url(‘’). background-image: url(‘balon.png’); background-image: url(‘data/foto.jpg’); background-image: url(‘../gambar/koala.jpg’); background-image: url(‘

10 background-position Menentukan posisi image di dalam element.
KOMPUTER APLIKASI IT - XHTML & CSS MODUL 06 Latar Belakang background-position Menentukan posisi image di dalam element. 2 value, untuk horizontal dan vertikal. Dapat menggunakan left|right,top|bottom,center atau dengan lokasi numerik. background-position: left top; background-position: center bottom; background-position: 100px 50px; background-position: 80px bottom;

11 background-position Latar Belakang left top left bottom left center
KOMPUTER APLIKASI IT - XHTML & CSS MODUL 06 Latar Belakang background-position left top left bottom left center center top center center right 50px 30px top -10px 50px

12 background-repeat Menentukan pengulangan image.
KOMPUTER APLIKASI IT - XHTML & CSS MODUL 06 Latar Belakang background-repeat Menentukan pengulangan image. Pengulangan dilakukan secara horizontal atau vertikal, keduanya, atau tidak sama sekali ( default: keduanya ). background-repeat: repeat; background-repeat: repeat-x; background-repeat: repeat-y; background-repeat: no-repeat;

13 background-repeat Latar Belakang repeat repeat-x repeat-y no-repeat
KOMPUTER APLIKASI IT - XHTML & CSS MODUL 06 Latar Belakang background-repeat repeat repeat-x repeat-y no-repeat

14 Beberapa Hal tentang Background
KOMPUTER APLIKASI IT - XHTML & CSS MODUL 06 Latar Belakang Beberapa Hal tentang Background background-color selalu dibelakang background-image. Kita dapat menghemat penggunaan image dengan membuat image ukuran kecil yang di-repeat. Pada CSS3 terdapat properti background-size untuk menentukan ukuran image background. dengan format: background-size: 40px 50px; ( horizontal vertikal)

15 KOMPUTER APLIKASI IT - XHTML & CSS MODUL 06
Text Text Pemformatan Text CSS memiliki beraneka ragam fasilitas untuk melakukan pemformatan text.

16 color : hexcolor|namecolor|rgb|rgba; Menentukan warna huruf.
KOMPUTER APLIKASI IT - XHTML & CSS MODUL 06 Text color : hexcolor|namecolor|rgb|rgba; Menentukan warna huruf. letter-spacing : ukuran dalam px|pt; Menentukan jarak antar huruf. line-height : ukuran dalam px|pt; Menentukan tinggi satu baris dalam text. text-align : left|right|center|justify; Menentukan rata paragraf / alignment.

17 KOMPUTER APLIKASI IT - XHTML & CSS MODUL 06
Text text-indent : ukuran dalam px|pt; Menentukan Indentasi (jarak kiri) pada baris pertama. text-decoration : underline|overline|line-through|blink; Menentukan dekorasi pada text. text-transform : none|uppercase|lowercase|capitalize; Menentukan huruf besar/huruf kecil pada text.

18 Font Pemformatan Huruf
KOMPUTER APLIKASI IT - XHTML & CSS MODUL 06 Font Font Pemformatan Huruf Penentuan Huruf adalah hal yang sangat penting di dalam sebuah Web. Karena Itu CSS memiliki banyak fasilitas pemformatan huruf.

19 font-family Menentukan jenis huruf yang akan digunakan.
KOMPUTER APLIKASI IT - XHTML & CSS MODUL 06 Font font-family Menentukan jenis huruf yang akan digunakan. Ada 3 jenis huruf, yaitu sans-serif, serif, dan monospace. Selalu tambahkan font alternatif dan tipenya. font-family: arial, tahoma, sans-serif; font-family: ‘times new roman’, garamond, serif; font-family: courier, monospace;

20 Jenis Huruf? sans-serif bentuknya tegas tanpa garis akhir.
KOMPUTER APLIKASI IT - XHTML & CSS MODUL 06 Font Jenis Huruf? sans-serif bentuknya tegas tanpa garis akhir. serif bentuk klasik, dengan garis akhir. monospace memiliki ukuran yang sama, biasanya digunakan untuk kode program. sans-serif Arial Tahoma Verdana Calibri serif Times New Roman, Georgia Garamond monospace Courier, Lucidia console

21 font-size Menentukan jenis ukuran huruf. Dapat menggunakan px, pt, em.
KOMPUTER APLIKASI IT - XHTML & CSS MODUL 06 Font font-size Menentukan jenis ukuran huruf. Dapat menggunakan px, pt, em. 1px = 1 pixel. 1pt = 1/72 inchi, 1em = 1px x 16 font-size: 16px; font-size: 12pt; font-size: 1.5em; /* 1.5 x 16 = 24px */

22 font-style : italic|normal; Menentukan style huruf.
KOMPUTER APLIKASI IT - XHTML & CSS MODUL 06 Font font-style : italic|normal; Menentukan style huruf. font-weight : normal|bold|bolder|lighter| ; Menentukan ketebalan Huruf.

23 Menyatukan semua properti huruf ke dalam satu properti
KOMPUTER APLIKASI IT - XHTML & CSS MODUL 06 Font font Menyatukan semua properti huruf ke dalam satu properti Dengan properti font, semua property font-family, font-size, font-weight, dsb dapat disatukan dalam properti font. Khusus line-height harus menyatu dengan font-size dengan pembatas slash “/” font: 15px arial, tahoma, sans-serif ; font: 12px/15px bold italic georgia, serif; font: 2em/28px italic courier, monospace;

24 TERIMA KASIH DAN SELAMAT BELAJAR PENUTUP
KOMPUTER APLIKASI IT - XHTML & CSS MODUL 06 PENUTUP TERIMA KASIH DAN SELAMAT BELAJAR