Pada bagian bagian sebelumnya kita hanya menggunakan cara penulisan CSS internal.
Sekarang kita akan membahas mengenai penulisan CSS di file terpisah (eksternal).
Contoh
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS Guide</title> <style type="text/css"> p { color: #FFFFFF; font-family: arial; background: #FF0000; font-weight: bold; } p.group { color: #FF0000; /* membuat warna text putih */ font-family: arial; background: #FFFFFF; /* membuat background putih */ } p#one { color: blue; font-family: "times new roman"; } </style> </head> <body> <p>Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. </p> <p class="group">Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. </p> <p class="group" id="one">Ini adalah paragraf 3. Ini adalah paragraf 3. Ini adalah paragraf 3. Ini adalah paragraf 3. Ini adalah paragraf 3. </p> </body> </html>
Anda dapat menaruh CSS yang ada dalam code di atas ke dalam file tertentu, dengan harapan file CSS itu dapat digunakan oleh halaman web yang lain. File CSS inilah yang disebut CSS eksternal yang memiliki file extension .css
Sebagai contoh kita simpan CSS dalam file style.css
style.css
p {
color: #FFFFFF;
font-family: arial;
background: #FF0000;
font-weight: bold;
}
p.group {
color: #FF0000; /* membuat warna text putih */
font-family: arial;
background: #FFFFFF; /* membuat background putih */
}
p#one {
color: blue;
font-family: "times new roman";
}
Setelah itu kita akan mengintegrasikan file CSS tersebut ke dalam halaman web kita dengan cara memberikan perintah
<link rel="stylesheet" type="text/css" href="style.css" />
Pada bagian header halaman web kita.Contoh lengkapnya seperti :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS Guide</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <p>Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. </p> <p class="group">Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. </p> <p class="group" id="one">Ini adalah paragraf 3. Ini adalah paragraf 3. Ini adalah paragraf 3. Ini adalah paragraf 3. Ini adalah paragraf 3. </p> </body> </html>Dengan konsep ini, Anda dapat menggunakan CSS eksternal yang berasal dari situs web lain untuk mengatur style halaman web Anda, dengan cara menambahkan URL secara lengkap pada atribut href nya.
Untuk melihat artikel/materi lainnya silahkan masuk di sini