01 dari 10
Buat Lembar Gaya CSS
Dengan cara yang sama kami membuat file teks terpisah untuk HTML, Anda akan membuat file teks untuk CSS. Jika Anda membutuhkan visual untuk proses ini, silakan lihat tutorial pertama. Berikut adalah langkah-langkah untuk membuat style style CSS Anda di Notepad:
- Pilih File> Baru di Notepad untuk mendapatkan jendela kosong
- Simpan file sebagai CSS dengan mengklik File
- Arahkan ke folder my_website pada hard drive Anda
- Ubah "Save As Type:" ke "All Files"
- Nama file Anda "styles.css" (tinggalkan tanda kutip) dan klik Simpan
02 dari 10
Tautkan Lembar Gaya CSS ke HTML Anda
Setelah Anda memiliki lembar gaya untuk situs Web Anda, Anda harus mengaitkannya ke halaman Web itu sendiri. Untuk melakukan ini, Anda menggunakan tag tautan. Tempatkan tag tautan berikut di mana saja di dalam tag
dokumen pets.htm Anda:03 dari 10
Perbaiki Margin Halaman
Saat Anda menulis XHTML untuk berbagai browser, satu hal yang akan Anda pelajari adalah bahwa semuanya tampaknya memiliki margin dan aturan yang berbeda untuk cara mereka menampilkan sesuatu. Cara terbaik untuk memastikan bahwa situs Anda terlihat sama di sebagian besar browser adalah tidak mengizinkan hal-hal seperti margin ke default ke pilihan browser.
Saya lebih memilih untuk memulai halaman saya di sudut kiri atas, tanpa tambahan padding atau margin di sekitar teks. Bahkan jika saya akan memasukkan isinya, saya mengatur margin menjadi nol sehingga saya mulai dengan batu tulis kosong yang sama. Untuk melakukan ini, tambahkan yang berikut ini ke dokumen styles.css Anda:
html, body {
margin: 0px;
padding: 0px;
border: 0px;
kiri: 0px;
atas: 0px;
}
04 dari 10
Mengubah Font pada Halaman
Font sering kali menjadi hal pertama yang ingin Anda ubah pada halaman Web. Font default pada halaman Web dapat menjadi jelek, dan sebenarnya adalah browser Web itu sendiri, jadi jika Anda tidak menentukan font, Anda benar-benar tidak akan tahu seperti apa halaman Anda nantinya.
Biasanya, Anda akan mengubah font pada paragraf, atau kadang-kadang pada seluruh dokumen itu sendiri. Untuk situs ini kami akan menentukan font di tingkat header dan paragraf. Tambahkan yang berikut ini ke dokumen styles.css Anda:
p, li {
font: 1em Arial, Helvetica, sans-serif;
}
h1 {
font: 2em Arial, Helvetica, sans-serif;
}
h2 {
font: 1.5em Arial, Helvetica, sans-serif;
}
h3 {
font: 1.25em Arial, Helvetica, sans-serif;
}
Saya mulai dengan 1em sebagai ukuran dasar saya untuk paragraf dan daftar item, dan kemudian menggunakannya untuk mengatur ukuran untuk berita utama saya. Saya tidak berharap untuk menggunakan informasi utama lebih dalam dari h4, tetapi jika Anda berencana untuk Anda ingin gaya itu juga.
05 dari 10
Membuat Tautan Anda Lebih Menarik
Warna default untuk tautan berwarna biru dan ungu untuk tautan yang tidak dikunjungi dan dikunjungi masing-masing. Meskipun ini standar, itu mungkin tidak cocok dengan skema warna halaman Anda, jadi mari kita ubah. Di file styles.css Anda, tambahkan yang berikut:
sebuah link {
font-family: Arial, Helvetica, sans-serif;
warna: # FF9900;
text-decoration: garis bawah;
}
a: visited {
warna: # FFCC66;
}
a: hover {
latar belakang: #FFFFCC;
font-weight: bold;
}
Saya menyiapkan tiga gaya tautan, tautan a: sebagai default, a: dikunjungi ketika sudah dikunjungi, saya mengubah warnanya, dan: hover. Dengan: hover, saya memiliki tautan untuk mendapatkan warna latar belakang dan berani menekankan bahwa tautan itu untuk diklik.
06 dari 10
Styling Bagian Navigasi
Karena kita meletakkan bagian navigasi (id = "nav") pertama di HTML, mari kita gaya dulu. Kita perlu menunjukkan seberapa lebar seharusnya dan meletakkan margin yang lebih lebar di sisi kanan sehingga teks utama tidak akan menabraknya. Saya juga memasang perbatasan di sekitarnya.
Tambahkan CSS berikut ke dokumen styles.css Anda:
#nav {
width: 225px;
margin kanan: 15px;
border: medium solid # 000000;
}
#nav li {
daftar-gaya: tidak ada;
}
.footer {
ukuran font: .75em;
jelas: keduanya;
lebar: 100%;
text-align: center;
}
Properti daftar-gaya menetapkan daftar di dalam bagian navigasi untuk tidak memiliki peluru atau angka, dan .footer menata bagian hak cipta menjadi lebih kecil dan berpusat di dalam bagian.
07 dari 10
Memposisikan Bagian Utama
Dengan memposisikan bagian utama Anda dengan pemosisian absolut Anda dapat yakin bahwa itu akan tetap di mana Anda ingin tetap di halaman Web Anda. Saya membuat lebar 800px saya untuk mengakomodasi monitor yang lebih besar, tetapi jika Anda memiliki monitor yang lebih kecil, Anda mungkin ingin membuatnya lebih sempit.
Tempatkan yang berikut di dokumen styles.css Anda:
#main {
width: 800px;
atas: 0px;
posisi: absolut;
kiri: 250px;
}
08 dari 10
Styling Paragraf Anda
Karena saya sudah mengatur font paragraf di atas, saya ingin memberikan setiap paragraf sedikit tambahan "tendangan" untuk membuatnya lebih menonjol. Saya melakukan ini dengan meletakkan batas di bagian atas yang menyoroti paragraf lebih dari sekadar gambar saja.
Tempatkan yang berikut di dokumen styles.css Anda:
.garis atas {
border-top: tebal padat # FFCC00;
}
Saya memutuskan untuk melakukannya sebagai kelas yang disebut "topline" daripada hanya mendefinisikan semua paragraf dengan cara itu. Dengan cara ini, jika saya memutuskan saya ingin memiliki paragraf tanpa garis kuning teratas, saya dapat meninggalkan kelas = "topline" di tag paragraf dan itu tidak akan memiliki batas atas.
09 dari 10
Styling Gambar
Gambar biasanya memiliki batas di sekelilingnya, ini tidak selalu terlihat kecuali gambar adalah tautan, tetapi saya suka memiliki kelas dalam stylesheet CSS saya yang secara otomatis mematikan perbatasan. Untuk stylesheet ini, saya membuat kelas "noborder", dan sebagian besar gambar dalam dokumen adalah bagian dari kelas ini.
Bagian khusus lainnya dari gambar-gambar ini adalah lokasinya di halaman. Saya ingin mereka menjadi bagian dari paragraf yang mereka gunakan tanpa menggunakan tabel untuk menyelaraskannya. Cara termudah untuk melakukan ini adalah dengan menggunakan properti CSS float.
Tempatkan yang berikut di dokumen styles.css Anda:
#main img {
float: kiri;
margin-kanan: 5px;
margin-bottom: 15px;
}
.tidak ada batasan {
border: 0px tidak ada;
}
Seperti yang Anda lihat, ada juga properti margin yang ditetapkan pada gambar, untuk memastikan bahwa mereka tidak dihancurkan dengan teks floated yang ada di samping mereka dalam paragraf.
10 dari 10
Sekarang Lihat Halaman Anda yang Selesai
Setelah Anda menyimpan CSS Anda, Anda dapat memuat ulang halaman pets.htm di browser Web Anda. Halaman Anda akan terlihat mirip dengan yang ditampilkan dalam gambar ini, dengan gambar selaras dan navigasi ditempatkan dengan benar di sisi kiri halaman.
Ikuti langkah-langkah yang sama ini untuk semua halaman internal Anda untuk situs ini. Anda ingin memiliki satu halaman untuk setiap halaman di navigasi Anda.