Pertemuan VI
Materi :
1. Inline css
2. Internal css
3. Exterlan css
PERBEDAAN ANTARA INLINE CSS DENGAN KODE HTML
KODE CSS
|
KODE HTML
|
<Html>
<Head>
<Title></Title>
</Head>
<Body Style=”background-color:yellow”>
</Body>
</Html>
|
<Html>
<Head>
<Title></Title>
</Head>
<Body
bgcolor=yellow>
</Body>
</Html>
|
Kode-kode css beserta fungsi-fungsinya :
1. <h1 Style =”font-size :200pt;”>
Belajar Pemrograman Web </h1>
Fungsinya adalah untuk membuat ukuran
paragrafnya 200 pt.
2. Background-color :black;
Fungsinya adalah untuk membuat
latar belakang tulisan warna hitam.
3. Text-align : justify ;
Fungsinya adalah membuat paragraf rata
kiri dan rata kanan.
4. Text-indent : 50n px ;
Fungsinya adalah untuk membuat
awal teks paragraf 50 px.
5. Color : yellow ;
Fungsinya adalah untuk membbuat warna
tulisan warna kunning
6. Line-heigh : 50 px;
Fungsina adalah untuk mengatur spasi 50
px;
7. Border : 5 px solid blue;
Fungsinya adalah untuk membuaut kotak
paragraf.
Contoh :
<Html>
|
<Head>
|
<Title></Title>
|
</Head>
|
<Body>
|
<h1 style =”font-size :30
pt;>selamat Datang</h1>
<p style = “font-size :12 pt;
Text-align : justify;
Text-indent : 50 px;
Border : 5 px solid blue;
Color : yellow;
Background-color : black;
Line-heigt : 50 px;”>
“Mengucap syukurlah dalam segala
hal,
Sebab itulah yang di kehendaki
Allah
Di dalam Yesus bagi kamu”. 2
tesalonika 5:18
|
</body>
|
</html>
|
Note :
<marquee direction =top>berfungsi untuk
membuat
tulisan berjalan ..
<marquee behavior =alternate>berfungsi membuat
tulisan ke kiri dan ke kanan.
|
Internal css
<html>
<head>
<title></title>
<style>
P
{
Font-size :14px;
Text-align :justify;
Text-indent :30px;
Color
:blue;
Background-color :00 00 00;
Margin
:50 100 100 50;
}
</style>
</head>
<body>
<marquee behavior =alternate>
<p>wellcome</p>
</body>
</html>
|
External css
External css adalah css yang di simpan terpisah dari
kode html.
Kelebihan
external css adalah :
1. Kode sumber external tidak perlu
di edit secara berulang sehingga lebih memudahkan dalam manajemen kode css.
2. External css di letakkan di
dalam tag <head> dengan kata kunci yaitu :
<link href =sumber type=text/css ref=stylesheet>
Contoh:
<link href =utama.css type=text/css
ref=stylesheet>
<link href =../utama.css type=text/css ref=stylesheet>
<link href =../isi.css type=text/css
ref=stylesheet>
<link href =../..utama.css
type=text/css ref=stylesheet>
Css disimpan dengan namafile.css
|
