Presentation 2 - Cascading style sheets (css)

CASCADING STYLE SHEETS (CSS)
Pertemuan 2

CSS 1
intro to css, pengaturan color,
background, fonts

Digunakan untuk menambahkan style
(fonts, colors, spacing, dll) ke dalam
dokumen web
Syntax Dasar
selector { property: value; }
Misal:
body {background-color: #ffff00;}

• 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>

• Metode Internal  menggunakan tag
<style></style>
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-us">
<head>
<style>
body {background-color: #ffff00;}
</style>
</head>
<body>
</body>
</html>

• Metode Eksternal  menggunakan tag <link />
untuk menghubungkan dengan file cascading
style sheets (.css)
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<html lang="en-us">
<head>
<link rel="stylesheet" type="text/css"
href="style.css" />
</head>
<body>
</body>
</html>

color & background
•
•
•
•
•
•
•

color
background-color
background-image
background-repeat
background-attachment
background-position
background

color
• Untuk mendefinisikan warna foreground
h1 {
color: #ff0000;
}

background-color
• Untuk mendefinisikan warna latar belakang
body {
background-color: #ffff00;
}
h1 {
color: #ff0000;
background-color: #ffffff;
}

background-image
• Untuk mendefinisikan background image
body {
background-image: url(“logo.gif”);
}
h1 {
color: #ff0000;
}

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

body {
background-repeat: no-repeat;
}
h1 {
color: #ff0000;
}

background-attachment
• Digunakan untuk mengunci/tidak background
– scroll, image tidak dikunci
– fixed, image tetap/dikunci

body {
background-attachment: fixed;
}
h1 {
color: #ff0000;
}

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

body {
background-position: bottom right;
}
h1 {
color: #ff0000;
}

background
• Digunakan untuk menggabung penulisan property
background
background-position: bottom right;

background: #ffff00 url(“logo.gif”) no-repeat fixed bottom right;

Fonts
•
•
•
•
•
•

font-family
font-style
font-variant
font-weight
font-size
font

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)

h1 {
font-family: arial, verdana, sans-serif;
}
h2 {
font-family: “Times New Roman”, serif;
}

font-style
• Digunakan untuk menentukan style dari font
– normal
– italic
– oblique

h1 {
}
h2 {
font-family: “Times New Roman”, serif;
font-style: italic;
}

font-variant
• Digunakan untuk menentukan variant dari font
– normal
– small-caps
h1 {
font-variant: normal;
}
h2 {
font-variant: small-caps;
}

font-weight
• Digunakan untuk menentukan bobot dari font
–
–
–
–
–

normal
bold
bolder
lighter
100 – 900

p {
font-weight: bold;
}

font-size
• Digunakan untuk menentukan ukuran dari font
–
–
–
–
–
–
–
–
–
–
–

xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
length
%

h1 {
font-size:
}
h2 {
font-size:
}
h3 {
font-size:
}
p {
font-size:
}

40px;

10pt;

150%;

1em;

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

Presentation 2 - Cascading style sheets (css)

More Related Content

Similar to Presentation 2 - Cascading style sheets (css) (20)

Recently uploaded (9)

Presentation 2 - Cascading style sheets (css)