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