External Style Sheet
External Style Sheet sangat menguntungkan bila digunakan untuk banyak dokumen yang memiliki style yang sama.
Dengan Sxternal Style Sheet anda bisa merubah seluruh halaman di website anda dengan mudah, hanya mengubah satu buah file CSS.
Setiap halaman harus memiliki koneksi dengan External Style Sheet dengan cara menambahkan tag <link>.
Tag <link> diletakkan di dalam bagian <head> pada dokumen HTML.
Anda bisa membuat external CSS dengan berbagai macam text editor, misal notepad. Namun ekstensinya harus "*.css".
Misal kita buat file "cssku.css" dengan isi sebagai berikut :
Dengan Sxternal Style Sheet anda bisa merubah seluruh halaman di website anda dengan mudah, hanya mengubah satu buah file CSS.
Setiap halaman harus memiliki koneksi dengan External Style Sheet dengan cara menambahkan tag <link>.
Tag <link> diletakkan di dalam bagian <head> pada dokumen HTML.
<link rel="stylesheet" type="text/css" href="cssku.css" />Misal kita buat file "cssku.css" dengan isi sebagai berikut :
body{background-color:black;}
p{color:blue;}
p{color:blue;}
Kemudian kita memiliki file "index.html" dalam folder yang sama :
Secara default gambar/image akan diulang-ulang menutupi seluruh bagian elemen.
contoh :
Note : "Ketika anda menggunakan background image sebaiknya anda menggunakan kombinasi background dan text yang kontras satu sama lain sebab seringkali penggunaan kombinasi background malah mengakibatkan tulisan/konten dari dokumen tidak jelas".
Ada kalanya anda hanya memerlukan background secara vertical atau horizontal, pada navigation bar situs codingku ini, background-nya di repeat/ulang secara horizontal.
Cara penulisan horizontal dan vertical :
Horizontal : menambahkan attribut : background-repeat, dan value-nya : repeat-x
Vertical : menambahkan attribut : background-repeat, dan value-nya : repeat-y
Contoh secara horizontal :
Anda juga bisa mengatur CSS agar gambar background tampil pada posisi yang anda inginkan.
<html>
<head>
<link rel="stylesheet" type="text/css" href="cssku.css" />
</head>
<body>
<p>Paragraf ini akan berwarna biru dan background halaman ini akan berwarna hitam/black</p>
</body>
</html>background-image
background-image merincikan gambar sebagai background sebuah elemen HTML.Secara default gambar/image akan diulang-ulang menutupi seluruh bagian elemen.
body{background-image:url("pattern.gif");}
Codingku HTML Editori
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{background-image:url("pattern.gif");}
</style>
</head>
<body>
<h1>background diulang-ulang secara otomatis </h1>
</body>
</html>
Note : "Ketika anda menggunakan background image sebaiknya anda menggunakan kombinasi background dan text yang kontras satu sama lain sebab seringkali penggunaan kombinasi background malah mengakibatkan tulisan/konten dari dokumen tidak jelas".
background-image : diulang secara horizontal / vertical
Anda bisa menentukan apa sebuah background diulang hanya secara horizontal atau vertical.Ada kalanya anda hanya memerlukan background secara vertical atau horizontal, pada navigation bar situs codingku ini, background-nya di repeat/ulang secara horizontal.
Cara penulisan horizontal dan vertical :
Horizontal : menambahkan attribut : background-repeat, dan value-nya : repeat-x
Vertical : menambahkan attribut : background-repeat, dan value-nya : repeat-y
Contoh secara horizontal :
body{background-image:url("pattern.gif"); background-repeat:repeat-x;}
Codingku HTML Editori
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{background-image:url("pattern.gif"); background-repeat:repeat-x;}
</style>
</head>
<body>
<h1>background diulang-ulang secara horizontal saja</h1>
</body>
</html> Contoh secara vertical :
body{background-image:url("pattern.gif"); background-repeat:repeat-y;}
Codingku HTML Editori
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{background-image:url("pattern.gif"); background-repeat:repeat-y;}
</style>
</head>
<body>
<h1>background diulang-ulang secara vertical saja</h1>
</body>
</html> background-image : no-repeat dan set-position
Anda bisa mengatur CSS agar gambar background tidak diulang-ulang.Anda juga bisa mengatur CSS agar gambar background tampil pada posisi yang anda inginkan.
body
{
background-image:url("pattern.gif");
background-repeat:no-repeat; background-position:right bottom;
}
{
background-image:url("pattern.gif");
background-repeat:no-repeat; background-position:right bottom;
}
Codingku HTML Editori
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body
{
background-image:url("pattern.gif");
background-repeat:no-repeat;
background-position:right top;
}
</style>
</head>
<body>
<h1>background tidak diulang dan diposisikan pada bagian kanan atas</h1>
</body>
</html> 
0 komentar:
Post a Comment