Membangun sebuah situs web dari awal Bagian II:. Menambahkan gaya (CSS).
Apa yang akan kita lakukan
Dalam bab ini kita akan:
- Buat style sheet CSS untuk situs
- Menambahkan link ke style sheet di halaman kami
Membuat CSS Style Sheet
Dalam folder demoweb, membuat file baru bernama site.css.
Masukan kode berikut di dalam file CSS:
site.css
body {
font-family: "Trebuchet MS", Verdana, sans-serif;
font-size: 16px;
background-color: dimgrey;
color: #696969;
padding: 3px;
}
#main {
padding: 5px;
padding-left: 15px;
padding-right: 15px;
background-color: #ffffff;
border-radius:
0 0 5px 5px;
}
h1 {
font-family: Georgia, serif;
border-bottom: 3px
solid #cc9900;
color: #996600;
font-size: 30px;
}File CSS di atas mendefinisikan gaya yang akan digunakan untuk:
- Tubuh HTML elemen <body>
- Elemen HTML dengan id = "main"
- HTML heading elemen <h1>
Mengedit Halaman
Dalam folder demoweb, mengedit file index.html.
Mengubah isi file sebagai berikut:
index.html
<!DOCTYPE html>
<html>
<head>
<title>Our Company</title>
<link href="site.css" rel="stylesheet">
</head>
<body>
<div id="main">
<h1>Welcome to Our Company</h1>
<h2>Web Site Main Ingredients</h2>
<p>Pages (HTML)</p>
<p>Style Sheets (CSS)</p>
<p>Computer Code (JavaScript)</p>
<p>Live Data (Files and
Databases)</p>
</div>
</body>
</html>
Cobalah sendiri " Halaman rumah di atas, adalah salinan dari halaman rumah dari bab sebelumnya.
Kami telah menambahkan link ke style sheet, dan <div id = "main"> elemen untuk menentukan "bagian" dalam konten.
Perubahan tersebut ditandai merah.
Mengedit Tentang Halaman
Untuk menyelesaikan pekerjaan Anda, melakukan perubahan yang sama di about.html.
1. Tambahkan link ke style sheet.
2. Tambahkan <div id = "main"> elemen.
about.html
<!DOCTYPE html>
<html>
<head>
<title>About</title>
<link href="site.css" rel="stylesheet">
</head>
<body>
<div id="main">
<h1>About Us</h1>
<p>Lorem Ipsum Porem Lorem Ipsum Porem</p>
</div>
</body>
</html>
Cobalah sendiri " Baca lebih banyak
Baca lebih lanjut tentang CSS di kami Tutorial CSS .