CSS, singkatan dari Cascading Style Sheets, adalah bahasa yang digunakan untuk mendeskripsikan tampilan dan gaya dokumen yang ditulis dalam bahasa markup seperti HTML.

CSS, singkatan dari Cascading Style Sheets, adalah bahasa yang digunakan untuk mendeskripsikan tampilan dan gaya dokumen yang ditulis dalam bahasa markup seperti HTML.

1. PEMROGRAMAN WEBPEMROGRAMAN WEB
CSS (CASCADE STYLE SHEET)CSS (CASCADE STYLE SHEET)
•WARNAWARNA
•BACKGROUNDBACKGROUND
•TEXT FORMATTINGTEXT FORMATTING
•FONTFONT
Created By : MIMINA LUMBAN GAOLCreated By : MIMINA LUMBAN GAOL

2. Mengenal Properti CSSMengenal Properti CSS
Mari Kita Mengenal
Format-Format Style
Dengan
CSS

3. Latar BelakangLatar Belakang
Background
Latar Belakang
Background di dalam CSS digunakan untuk menentukan Efek
latar belakang pada Elemen HTML

4. Latar BelakangLatar Belakang
Properti Utama
background
Properti Turunan
background-color, background-
image, background-repeat,
background-attachment,
background-position

5. Latar BelakangLatar 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. Latar BelakangLatar 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. Latar BelakangLatar Belakang
Pada properti background, semua properti
turunan dapat didefinisikan secara langsung:
background: #ccccff url(‘balon.jpg’)
center top repeat-y;

8. Latar BelakangLatar 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. Latar BelakangLatar 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’);

10. Latar BelakangLatar 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. Latar BelakangLatar Belakang
background-position
left top left bottom left center center top
center center right 50px 30px top -10px 50px

12. Latar BelakangLatar 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. Latar BelakangLatar Belakang
background-repeat
no-repeatrepeat repeat-x repeat-y

14. Latar BelakangLatar 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. TextText
Text Formatting
Pemformatan Text
CSS memiliki beraneka ragam fasilitas untuk melakukan
pemformatan text.

16. TextText
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. TextText
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. FontFont
Font
Pemformatan Huruf
Penentuan Huruf adalah hal yang sangat penting di dalam
sebuah Web.
Karena Itu CSS memiliki banyak fasilitas pemformatan huruf.

19. KOMPUTER APLIKASI IT - XHTML & CSSKOMPUTER APLIKASI IT - XHTML & CSS
MODUL 06MODUL 06
FontFont
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. FontFont
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. FontFont
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. FontFont
font-style : italic|normal;
Menentukan style huruf.
•font-weight : normal|bold|bolder|lighter|100-
900;
Menentukan ketebalan Huruf.

23. FontFont
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 KASIHTERIMA KASIH
DANDAN
SELAMAT BELAJARSELAMAT BELAJAR
PENUTUPPENUTUP
Created By : MIMINA LUMBAN GAOLCreated By : MIMINA LUMBAN GAOL