KOMPUTER APLIKASI IT XHTML & CSS MODUL 06

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

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

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

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’);

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;

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;

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);

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(‘http://aku.com/g.jpg’);

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;

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

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;

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

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)

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

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.

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.

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.

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;

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

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 */

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|100-900; Menentukan ketebalan Huruf.

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;

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