Panduan Penggunaan CSS untuk Web
Diunggah oleh
Janice Boo Chiew YenPanduan Penggunaan CSS untuk Web
Diunggah oleh
Janice Boo Chiew YenMENGGUNAKAN CSS UNTUK
3.3 3.3.4 MENGGAYAKAN
CASCADING STYLE SHEET (CSS)
• CSS : salah satu Bahasa pengaturcaraan tambahan (extension) bagi HTML.
• CSS membenarkan perubahan kepada gaya sesuatu laman web dan menerangkan
persembahan bagi sesuatu dokumen HTML.
ATURCARA OUTPUT
<html>
<head>
<title>Tanpa Penggunaan CSS </title>
</head>
<body>
<h1>Laman Web Sekolah</h1>
</body>
</html>
<html>
<head>
<title>Penggunaan CSS </title>
<style>
h1 { color:blue;}
</style>
</head>
<body>
<h1>Laman Web Sekolah</h1>
</body>
</html>
HELAIAN GAYA
HELAIAN GAYA LUAR GAYA DALAM BARISAN
DALAMAN
(External Style Sheet) (Inline Style)
(Internal Style Sheet)
• Tag gaya akan ditulis dan • Tag gaya boleh ditulis • Tag gaya akan ditulis pada
disimpan di dalam satu fail sama ada di dalam bahagian/elemen tag.
dan fail itu mesti kawasan <head> atau
mempunyai extension <body>.
“CSS”. • Letakkan <style>
• Fail tersebut akan
dipanggil daripada tag
HTML dengan
menggunakan sintaks.
MENGGUNAKAN CSS UNTUK
3.3 3.3.4 MENGGAYAKAN
HELAIAN GAYA LUAR (EXTERNAL STYLE SHEET)
ATURCARA
Sediakan satu fail bernama “ [Link]”
h1 { color: blue;}
Sediakan satu fail bernama “ [Link]”
<html>
<head>
<title>Penggunaan CSS </title>
<link rel = "stylesheet" type = text/css“ href= "[Link]">
</head>
<body>
<h1>Laman Web Sekolah</h1>
</body>
</html>
OUTPUT
MENGGUNAKAN CSS UNTUK
3.3 3.3.4 MENGGAYAKAN
HELAIAN GAYA DALAMAN (INTERNAL STYLE SHEET)
• Boleh ditulis sama ada di dalam kawasan <head> atau <body>.
ATURCARA OUTPUT
<html>
<head>
<title>Penggunaan CSS </title>
<style>
h1 { color:blue;}
</style>
</head>
<body>
<h1>Laman Web Sekolah</h1>
</body>
</html>
<html>
<head>
<title>Penggunaan CSS </title>
</head>
<body>
<style>
h1 { color:blue;}
</style>
<h1>Laman Web Sekolah</h1>
</body>
</html>
GAYA DALAM BARISAN (INLINE STYLE)
• Tag gaya akan ditulis pada bahagian/elemen tag.
ATURCARA OUTPUT
<html>
<head>
<title>Penggunaan CSS </title>
</head>
<body>
<h1 style = "color:blue";> Laman Web Sekolah</h1>
</body>
</html>
MENGGUNAKAN CSS UNTUK
3.3 3.3.4 MENGGAYAKAN
GAYA PADA TEXT
WARNA TEXT (COLOUR)
ATURCARA OUTPUT
<html>
<head>
<title>Penggunaan CSS </title>
<style>
h1 { color:red;}
</style>
</head>
<body>
<h1>Laman Web Sekolah</h1>
</body>
</html>
JAJARAN TEKS (TEXT ALIGNMENT)
<html>
<head>
<title>Penggunaan CSS </title>
<style>
h1 { text-align: center;}
</style>
</head>
<body>
<h1>Laman Web Sekolah</h1>
</body>
</html>
BAYANG TEKS (TEXT SHADOW)
<html>
<head>
<title>Penggunaan CSS </title>
<style>
h1 { text-shadow: 2px 2px #000000;}
</style>
</head>
<body>
<h1>Laman Web Sekolah</h1>
</body>
</html>
MENGGUNAKAN CSS UNTUK
3.3 3.3.4 MENGGAYAKAN
GAYA PADA FON (FONT)
KELUARGA FONT (FONT FAMILY)
ATURCARA OUTPUT
<html>
<head>
<title>Keluarga Fon </title>
</head>
<body>
<h1 style="font-family:Arial Black;">Laman Web
Sekolah</h1>
<h
</body>
</html>
SAIZ FON ( FONT SIZE)
<html>
<head>
<title>Saiz Fon </title>
</head>
<body>
<h1 style="font-size:70;“ >Laman Web Sekolah</h1>
</body>
</html>
STAIL FON ( FONT STYLE)
<html>
<head>
<title>Stail Fon </title>
</head>
<body>
<h1 style="font-style:italic;“ >Laman Web Sekolah</h1>
</body>
</html>
* sintak aturcara berbeza dari buku teks
MENGGUNAKAN CSS UNTUK
3.3 3.3.4 MENGGAYAKAN
GAYA PADA BACKGROUND
WARNA LATAR BELAKANG
ATURCARA OUTPUT
<html>
<head>
<title>Warna Latar Belakang </title>
</head>
<Style>
body
{ background-color : lightgreen;
}
</style>
<body>
<h1>Laman Web Sekolah</h1>
</body>
</html>
IMEJ ATAU GAMBAR SEBAGAI LATAR BELAKANG
<html>
<head>
<title>Latar Belakang Imej </title>
</head>
<Style>
body
{
background-image : url("[Link]
[Link]");
}
</style>
<body>
<h1>Laman Web Sekolah</h1>
</body>
</html>> * sintak aturcara berbeza dari buku teks
MENGGUNAKAN CSS UNTUK
3.3 3.3.4 MENGGAYAKAN
GAYA PADA TABLES
MELETAKKAN GARISAN LUAR ATAU BORDER
ATURCARA OUTPUT
<html>
<head>
<title>Gaya Jadual </title>
</head>
<Style>
table
{ border : 1px solid; }
</style>
<body>
<h1>Laman Web Sekolah</h1>
<table>
<th> KANDUNGAN LAMAN WEB </th>
</tr>
<tr>
<td> Pengenalan Sekolah </td>
</tr>
<tr>
<td> Senarai Guru </td>
</tr>
</table>
</body>
</html>
MENGGUNAKAN CSS UNTUK
3.3 3.3.4 MENGGAYAKAN
GAYA PADA TABLES
MELETAKKAN GARISAN LUAR ATAU BORDER
ATURCARA OUTPUT
html>
<head>
<title>Gaya Jadual </title>
</head>
<Style>
table, th,td
{ border : 1px solid;}
</style>
<body>
<h1>Laman Web Sekolah</h1>
<table>
<th> KANDUNGAN LAMAN WEB </th>
</tr>
<tr>
<td> Pengenalan Sekolah </td>
</tr>
<tr>
<td> Senarai Guru </td>
</tr>
</table>
</body>
</html>
MENGGUNAKAN CSS UNTUK
3.3 3.3.4 MENGGAYAKAN
GAYA PADA TABLES
MELETAKKAN GARISAN LUAR ATAU BORDER
ATURCARA OUTPUT
html>
<head>
<title>Gaya Jadual </title>
</head>
<Style>
table {border-collapse: collapse;}
table, th,td
{ border : 1px solid;}
</style>
<body>
<h1>Laman Web Sekolah</h1>
<table>
<th> KANDUNGAN LAMAN WEB </th>
</tr>
<tr>
<td> Pengenalan Sekolah </td>
</tr>
<tr>
<td> Senarai Guru </td>
</tr>
</table>
</body>
</html>
MENGGUNAKAN CSS UNTUK
3.3 3.3.4 MENGGAYAKAN
GAYA PADA TABLES
MELETAKKAN GARISAN LUAR ATAU BORDER
ATURCARA OUTPUT
html>
<head>
<title>Gaya Jadual </title>
</head>
<Style>
table {border-collapse: collapse;}
table, th,td
{ border : 3px solid;}
</style>
<body>
<h1>Laman Web Sekolah</h1>
<table>
<th> KANDUNGAN LAMAN WEB </th>
</tr>
<tr>
<td> Pengenalan Sekolah </td>
</tr>
<tr>
<td> Senarai Guru </td>
</tr>
</table>
</body>
</html>
MENGGUNAKAN CSS UNTUK
3.3 3.3.4 MENGGAYAKAN
GAYA PADA TABLES
MELETAKKAN GARISAN LUAR ATAU BORDER
ATURCARA OUTPUT
html>
<head>
<title>Gaya Jadual </title>
</head>
<Style>
table {border-collapse: collapse;}
table, th, { border : 3px solid;}
td { border : 2px dashed;}
</style>
<body>
<h1>Laman Web Sekolah</h1>
<table>
<th> KANDUNGAN LAMAN WEB </th>
</tr>
<tr>
<td> Pengenalan Sekolah </td>
</tr>
<tr>
<td> Senarai Guru </td>
</tr>
</table>
</body>
</html>
MENGGUNAKAN CSS UNTUK
3.3 3.3.4 MENGGAYAKAN
GAYA PADA TABLES
MELETAKKAN GARISAN LUAR ATAU BORDER
(Menetapkan kelebaran dan ketinggian sesuatu table)
ATURCARA OUTPUT
html>
<head>
<title>Gaya Jadual </title>
</head>
<Style>
table {border-collapse: collapse;
width : 100%; height : 20%}
table, th, td{ border : 1px solid;}
</style>
<body>
<h1>Laman Web Sekolah</h1>
<table>
<th> KANDUNGAN LAMAN WEB </th>
</tr>
<tr>
<td> Pengenalan Sekolah </td>
</tr>
<tr>
<td> Senarai Guru </td>
</tr>
</table>
</body>
</html>
MENGGUNAKAN CSS UNTUK
3.3 3.3.4 MENGGAYAKAN
GAYA PADA TABLES
MELETAKKAN GARISAN LUAR ATAU BORDER
(Menetapkan jajaran teks di dalam table)
ATURCARA OUTPUT
html>
<head>
<title>Gaya Jadual </title>
</head>
<Style>
table {border-collapse: collapse;
width : 100%; height : 20%;
text-align : center;}
table, th, td{ border : 1px solid;}
</style>
<body>
<h1>Laman Web Sekolah</h1>
<table>
<th> KANDUNGAN LAMAN WEB </th>
</tr>
<tr>
<td> Pengenalan Sekolah </td>
</tr>
<tr>
<td> Senarai Guru </td>
</tr>
</table>
</body>
</html>
MENGGUNAKAN CSS UNTUK
3.3 3.3.4 MENGGAYAKAN
GAYA PADA TABLES
MELETAKKAN GARISAN LUAR ATAU BORDER
(Menukar warna latar belakang dan warna teks dalam table)
ATURCARA OUTPUT
html>
<head>
<title>Gaya Jadual </title>
</head>
<Style>
table
{
border-collapse: collapse;
background-color : green;
color : white;
}
table, th, td{ border : 1px solid;}
</style>
<body>
<h1>Laman Web Sekolah</h1>
<table>
<th> KANDUNGAN LAMAN WEB </th>
</tr>
<tr>
<td> Pengenalan Sekolah </td>
</tr>
<tr>
<td> Senarai Guru </td>
</tr>
</table>
</body>
</html>
MENGGUNAKAN CSS UNTUK
3.3 3.3.4 MENGGAYAKAN
GAYA PADA TABLES
MELETAKKAN GARISAN LUAR ATAU BORDER
(Menebalkan jarak di antara medan (padding) dalam table)
ATURCARA OUTPUT
html>
<head>
<title>Gaya Jadual </title>
</head>
<Style>
table
{
border-collapse: collapse;
background-color : green;
color : white;
}
table, th, td{ border : 1px solid;}
</style>
<body>
<h1>Laman Web Sekolah</h1>
<table cellpadding="20">
<tr>
<th> KANDUNGAN LAMAN WEB </th>
</tr>
<tr>
<td> Pengenalan Sekolah </td>
</tr>
<tr>
<td> Senarai Guru </td>
</tr>
</table>
</body>
</html>
* sintak aturcara berbeza dari buku teks
MENGGUNAKAN CSS UNTUK
3.3 3.3.4 MENGGAYAKAN
GAYA PADA BORDERS
ATURCARA OUTPUT
<html>
<head>
<title>Gaya Border </title>
<Style>
h1
{
border-style: solid;
border-width : 5px;
}
</style>
</head>
<body>
<h1>Laman Web Sekolah</h1>
</body>
</html>
ATURCARA OUTPUT
<html>
<head>
<title>Gaya Border </title>
<Style>
h1
{
border-style: dashed;
border-width : 5px;
border-color : red;
}
</style>
</head>
<body>
<h1>Laman Web Sekolah</h1>
</body>
</html>
MENGGUNAKAN CSS UNTUK
3.3 3.3.4 MENGGAYAKAN
GAYA PADA POSITION
• Kedudukan lalai dalam setiap elemen HTML yang
terdapat dalam dokumen.
• Kedudukan dokumen akan mengikut turutan atau
susunan.
• Kedudukan elemen tidak akan berubah atau tidak akan
mengikut ketetapan.
• Kedudukan elemen HTML bergantung pada browser
viewpoint. iaitu pandangan pengguna kepada pelayar
web.
• Kedudukan elemen akan tetap dikedudukan yang sama
walaupun pengguna scroll pada halaman web.
• Kedudukan elemen diubah bergantung atau berkait
terhadap kedudukan normalnya atau kedudukan
awalnya.
• Kedudukan elemen tidak akan mengikut turutan atau
susunan pada laman web lagi dan akan ditempatkan
mengikut kedudukan yang dikehendaki.
MENGGUNAKAN CSS UNTUK
3.3 3.3.4 MENGGAYAKAN
GAYA PADA POSITION
TANPA GAYA POSITION
ATURCARA OUTPUT
<html>
<head>
<title>Tanpa Gaya Position </title>
</head>
<body>
<h1>Laman Web Sekolah (Absolute)</h1>
<h2>Sekolah 1 (Relative)</h2>
<h3>Sekolah 2 (Fixed)</h3>
<h4>Sekolah 3 (Static)</h4>
</body>
</html>
DENGAN GAYA POSITION
ATURCARA OUTPUT
<html>
<head>
<title> Gaya Position </title>
<style>
h1 { background-color : lightgreen; position :
absolute; width : 40%; top : 10px; left : 50px; height : 100px;
}
h2 { background-color : lightpink; position :
ralative; width : 30%; top : 70px; left : 3000px; height :
100px; }
h3 { background-color : lightblue; position :
fixed; width : 70%; bottom : 10px; left : 200px; height :
100px; }
h4 { background-color : lightgrey; position : static;
width : 10%; bottom : 70px; left : 200px; height : 100px; }
</style>
</head>
<body>
<h1>Laman Web Sekolah (Absolute)</h1>
<h2>Sekolah 1 (Relative)</h2>
<h3>Sekolah 2 (Fixed)</h3>
<h4>Sekolah 3 (Static)</h4>
</body>
</html>