Your SlideShare is downloading. ×
Presentation 2 - Cascading style sheets (css)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Presentation 2 - Cascading style sheets (css)

92
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
92
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. CASCADING STYLE SHEETS (CSS) Pertemuan 2 CSS 1 intro to css, pengaturan color, background, fonts
  • 2. Digunakan untuk menambahkan style (fonts, colors, spacing, dll) ke dalam dokumen web Syntax Dasar selector { property: value; } Misal: body {background-color: #ffff00;}
  • 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. • 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. • 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. color & background • • • • • • • color background-color background-image background-repeat background-attachment background-position background
  • 7. color • Untuk mendefinisikan warna foreground h1 { color: #ff0000; }
  • 8. background-color • Untuk mendefinisikan warna latar belakang body { background-color: #ffff00; } h1 { color: #ff0000; background-color: #ffffff; }
  • 9. background-image • Untuk mendefinisikan background image body { background-color: #ffff00; background-image: url(“logo.gif”); } h1 { color: #ff0000; background-color: #ffffff; }
  • 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. body { background-color: #ffff00; background-image: url(“logo.gif”); background-repeat: no-repeat; } h1 { color: #ff0000; background-color: #ffffff; }
  • 12. background-attachment • Digunakan untuk mengunci/tidak background – scroll, image tidak dikunci – fixed, image tetap/dikunci
  • 13. body { background-color: #ffff00; background-image: url(“logo.gif”); background-repeat: no-repeat; background-attachment: fixed; } h1 { color: #ff0000; background-color: #ffffff; }
  • 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. 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. 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. Fonts • • • • • • font-family font-style font-variant font-weight font-size font
  • 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. h1 { font-family: arial, verdana, sans-serif; } h2 { font-family: “Times New Roman”, serif; }
  • 20. font-style • Digunakan untuk menentukan style dari font – normal – italic – oblique
  • 21. h1 { font-family: arial, verdana, sans-serif; } h2 { font-family: “Times New Roman”, serif; font-style: italic; }
  • 22. font-variant • Digunakan untuk menentukan variant dari font – normal – small-caps h1 { font-variant: normal; } h2 { font-variant: small-caps; }
  • 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. font-size • Digunakan untuk menentukan ukuran dari font – – – – – – – – – – – xx-small x-small small medium large x-large xx-large smaller larger length %
  • 25. h1 { font-size: } h2 { font-size: } h3 { font-size: } p { font-size: } 40px; 10pt; 150%; 1em;
  • 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; }