Presentation 2 - Cascading style sheets (css)

413 views

Published on

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
413
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Presentation 2 - Cascading style sheets (css)

  1. 1. CASCADING STYLE SHEETS (CSS) Pertemuan 2 CSS 1 intro to css, pengaturan color, background, fonts
  2. 2. Digunakan untuk menambahkan style (fonts, colors, spacing, dll) ke dalam dokumen web Syntax Dasar selector { property: value; } Misal: body {background-color: #ffff00;}
  3. 3. • Metode Inline  menggunakan atribut style <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="en-us"> <head> <title>Selamat Datang</title> </head> <body style="background-color: #ffff00;"> <h1>Selamat Datang</h1> </body> </html>
  4. 4. • Metode Internal  menggunakan tag <style></style> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="en-us"> <head> <title>Selamat Datang</title> <style> body {background-color: #ffff00;} </style> </head> <body> <h1>Selamat Datang</h1> </body> </html>
  5. 5. • Metode Eksternal  menggunakan tag <link /> untuk menghubungkan dengan file cascading style sheets (.css) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html lang="en-us"> <head> <title>Selamat Datang</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>Selamat Datang</h1> </body> </html>
  6. 6. color & background • • • • • • • color background-color background-image background-repeat background-attachment background-position background
  7. 7. color • Untuk mendefinisikan warna foreground h1 { color: #ff0000; }
  8. 8. background-color • Untuk mendefinisikan warna latar belakang body { background-color: #ffff00; } h1 { color: #ff0000; background-color: #ffffff; }
  9. 9. background-image • Untuk mendefinisikan background image body { background-color: #ffff00; background-image: url(“logo.gif”); } h1 { color: #ff0000; background-color: #ffffff; }
  10. 10. background-repeat • Digunakan untuk mengontrol perulangan dari background – repeat-x, repeat secara horisontal – repeat-y, repeat secara vertikal – repeat, repeat horisontal & vertikal – no-repeat, tanpa perulangan
  11. 11. body { background-color: #ffff00; background-image: url(“logo.gif”); background-repeat: no-repeat; } h1 { color: #ff0000; background-color: #ffffff; }
  12. 12. background-attachment • Digunakan untuk mengunci/tidak background – scroll, image tidak dikunci – fixed, image tetap/dikunci
  13. 13. body { background-color: #ffff00; background-image: url(“logo.gif”); background-repeat: no-repeat; background-attachment: fixed; } h1 { color: #ff0000; background-color: #ffffff; }
  14. 14. background-position • Untuk menempatkan background pada posisi tertentu • Value: – left, center, right, top, bottom – x y  x horisontal y vertikal, satuannya bisa %, pixel, cm, dll
  15. 15. body { background-color: #ffff00; background-image: url(“logo.gif”); background-repeat: no-repeat; background-attachment: fixed; background-position: bottom right; } h1 { color: #ff0000; background-color: #ffffff; }
  16. 16. background • Digunakan untuk menggabung penulisan property background background-color: #ffff00; background-image: url(“logo.gif”); background-repeat: no-repeat; background-attachment: fixed; background-position: bottom right; background: #ffff00 url(“logo.gif”) no-repeat fixed bottom right;
  17. 17. Fonts • • • • • • font-family font-style font-variant font-weight font-size font
  18. 18. font-family • Digunakan untuk menentukan jenis font yang akan ditampilkan • Kategori font: – Family-name: nama dari font (Arial, Times New Roman, Tahoma – Generic family: group dari family-name (sans, sans-serif, monospace)
  19. 19. h1 { font-family: arial, verdana, sans-serif; } h2 { font-family: “Times New Roman”, serif; }
  20. 20. font-style • Digunakan untuk menentukan style dari font – normal – italic – oblique
  21. 21. h1 { font-family: arial, verdana, sans-serif; } h2 { font-family: “Times New Roman”, serif; font-style: italic; }
  22. 22. font-variant • Digunakan untuk menentukan variant dari font – normal – small-caps h1 { font-variant: normal; } h2 { font-variant: small-caps; }
  23. 23. font-weight • Digunakan untuk menentukan bobot dari font – – – – – normal bold bolder lighter 100 – 900 p { font-family: arial, verdana, sans-serif; font-weight: bold; }
  24. 24. font-size • Digunakan untuk menentukan ukuran dari font – – – – – – – – – – – xx-small x-small small medium large x-large xx-large smaller larger length %
  25. 25. h1 { font-size: } h2 { font-size: } h3 { font-size: } p { font-size: } 40px; 10pt; 150%; 1em;
  26. 26. font • Digunakan untuk menggabung penulisan font property p { font-style: italic; font-weight: bold; font-size: 10pt; font-family: arial, sans-serif; } p { font: italic bold 10pt arial, sans-serif; }

×