Scribd
Unggah
11 tayangan3 halaman

Cara Membuat File CSS untuk Website

Dokumen ini menjelaskan cara menyiapkan file CSS eksternal untuk meningkatkan tampilan website. File CSS yang dibuat dengan nama style.css berisi aturan untuk mengatur font, warna, dan tata letak halaman. Selain itu, dokumen juga menyarankan untuk menghubungkan file CSS ke halaman website menggunakan tag <link> di bagian <head>.

Diunggah oleh

Fauzan
Hak Cipta
© All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
11 tayangan3 halaman

Cara Membuat File CSS untuk Website

Dokumen ini menjelaskan cara menyiapkan file CSS eksternal untuk meningkatkan tampilan website. File CSS yang dibuat dengan nama style.css berisi aturan untuk mengatur font, warna, dan tata letak halaman. Selain itu, dokumen juga menyarankan untuk menghubungkan file CSS ke halaman website menggunakan tag <link> di bagian <head>.

Diunggah oleh

Fauzan
Hak Cipta
© All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd

2.

Siapkan File CSS untuk Tampilan


Halaman
Agar tampilan website lebih menarik, tambahkan style menggunakan file
CSS eksternal. Anda bisa menambahkan aturan untuk menyesuaikan
warna, font, dan tata letak halaman website dalam file ini.
Untuk membuat file CSS, buka aplikasi editor kode lalu buat file dengan
nama [Link]. Simpan file ini di folder yang sama dengan
file [Link] yang tadi sudah Anda buat.
Sisipkan kode berikut ini ke file CSS untuk memberikan gaya secara umum
pada halaman website yang akan Anda buat:
/* ----------------------------- */
/* GAYA UMUM UNTUK SEMUA HALAMAN */
/* ----------------------------- */
/* Font dasar dan warna latar */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
color: #333; /* Warna teks abu-abu gelap */
}
/* Heading utama */
h1 {
font-size: 2.5rem;
text-align: center;
margin-bottom: 20px;
color: #00796b; /* Warna hijau segar */
}
/* Paragraf standar */
p{
font-size: 1.2rem;
line-height: 1.6;
margin: 10px auto;
max-width: 800px;
text-align: center;
color: #333; /* Warna teks abu-abu gelap */
}
/* Gaya untuk link */
a{
color: #00796b; /* Warna hijau segar */
text-decoration: none;
font-weight: bold;
}
a:hover {
text-decoration: underline; /* Garis bawah saat hover */
}
/* Tombol umum */
button {
background-color: #388e3c; /* Hijau tua */
color: white;
border: none;
padding: 10px 15px;
border-radius: 5px;
cursor: pointer;
font-size: 1rem;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #2e7d32; /* Hijau lebih gelap saat hover */
}
Nantinya, Anda perlu menghubungkan file stylesheet ini ke halaman-
halaman website yang Anda buat dengan menambahkan tag <link> di
bagian <head>.
Sekarang Anda bisa lanjut membuat halaman lain, lalu menyempurnakan
tampilannya dengan mengedit file [Link] untuk menambahkan style
sesuai kebutuhan halaman.

Anda mungkin juga menyukai