Kita sekarang mempunyai sebuah HTML file dengan sebuah style sheet
yang dibuat di dalamnya. Tetapi bila situs milik kita berkembang,
kemungkinan kita menginginkan banyak halaman menggunakan style yang
sama. Ada cara yang lebih baik daripada meng-copy style sheet ke setiap
halaman: bila kita menaruh style sheet di sebuah style terpisah, semua
halaman dapat mengarah padanya.
Untuk membuat sebuah file style sheet, kita harus membuat sebuah
teks file kosong yang lain. Anda bisa memilih “New” dari menu File di
editor, untuk membuat sebuah jendala kosong. (Bila anda menggunakan
TextEdit, jangan lupa untuk membuatnya menjadi file teks lagi,
menggunakan menu Format.)
Lalu cut dan paste segala sesuatu yang terdapat dalam elemen <style> dari file HTML ke dalam jendela baru. Jangan copy <style> dan </style>. Mereka meruupakan bagian dari HTML, dan bukan untuk CSS. Dalam jendela editor yang baru, anda sekarang sudah memiliki style sheet yang lengkap:
Pilih “Save As…” dari menu File, pastikan bahwa anda berada di directory/folder yang sama dengan file halamanku.html, dan
simpan style sheet tersebut dengan nama “styleku.css”.
Sekarang balik ke jendela dengan kode HTML. Hapus segalanya dimulai dari tag <style> hingga dan termasuk tag </style> dan gantikan dengan sebuah elemen <link> element, seperti berikut:
Bila anda menyimpan file HTML dan menekan tombol reload di browser, anda tidak akan melihat adanya perubahan: halamannya akan tetap diberi style yang sama, tetapi sytle tersebut datang dari sebuah file external.
Hasil akhir
Langkah berikutnya adalah menaruh kedua file, halamanku.html dan
styleku.css di situs Web anda. (Anda mungkin ingin merubahnya sedikit
terlebih dahulu, …) Tetapi bagaimana melakukannya tergantung pada
Internet provider anda.
Source : www.erasparsa.com
Lalu cut dan paste segala sesuatu yang terdapat dalam elemen <style> dari file HTML ke dalam jendela baru. Jangan copy <style> dan </style>. Mereka meruupakan bagian dari HTML, dan bukan untuk CSS. Dalam jendela editor yang baru, anda sekarang sudah memiliki style sheet yang lengkap:
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black }
ul.navbar a {
text-decoration: none }
a:link {
color: blue }
a:visited {
color: purple }
address {
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted }
Pilih “Save As…” dari menu File, pastikan bahwa anda berada di directory/folder yang sama dengan file halamanku.html, dan
simpan style sheet tersebut dengan nama “styleku.css”.
Sekarang balik ke jendela dengan kode HTML. Hapus segalanya dimulai dari tag <style> hingga dan termasuk tag </style> dan gantikan dengan sebuah elemen <link> element, seperti berikut:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Halaman dengan style saya yang pertama</title>
<link rel="stylesheet" href="styleku.css">
</head>
<body>
[dsb.]Ini akan mangatakan pada browser bahwa style sheet dapat ditemukan di sebuah file bernama “styleku.css” dan karena tidak ada disebutkan nama direktori, browser akan akan mencarinya di direktori dimana file HTML ditemukan.
Bila anda menyimpan file HTML dan menekan tombol reload di browser, anda tidak akan melihat adanya perubahan: halamannya akan tetap diberi style yang sama, tetapi sytle tersebut datang dari sebuah file external.
Hasil akhir
Source : www.erasparsa.com
SOCIALIZE IT →