Setelah mengenal tentang CSS, sekarang kita mempelajari tentang penempatannya pada dokumen HTML. Untuk penempatan file CSS tersebut kita dapat menggunakan 3 cara, yaitu:
Eksternal styleInternal styleInline style>
Eksternal style- Misalnya kita memberi nama file CSS yang kita buat dengan nama style1.css. Kemudian jika kita ingin menambahkan file CSS tersebut pada halaman web kita, maka kita harus membuat link ke file CSS tersebut dari halaman web kita. Letak link menuju ke style1.css terdapat diantara tag <head> dan </head>. Dengan cara ini kita dapat mengatur satu style untuk beberapa halaman web. Berikut ini adalah contohnya:
<html>
<head>
<title>judul artikel</title>
<link rel=stylesheet
href="http://alamat-internet/style1.css"
type="text/css">
</head>
<body>
isi dari halaman web kita yang akan diatur style-nya oleh CSS
</body></html> |
Internal style- Tag <style> dan </style> disisipkan di antara tag <html> dan <body>. Dengan cara ini kita hanya dapat mengatur style untuk satu halaman web. Berikut ini adalah contohnya.
<html>
<style type="text/css">
p
{
color:red;
text-align:center;
}
</style>
<body>
<p>Isi dari halaman web yang telah diatur dengan CSS</p>
</body>
</html> |
Inline style- Inline style digunakan bila kita hanya ingin mengatur style pada beberapa bagian yang spesifik dari halaman web kita. Berikut ini adalah contohnya.
<html>
<body>
<p style="color:red;”>
Isi dari halaman web yang telah diatur dengan CSS</p>
</body>
</html>
|
Apabila dalam satu dokumen HTML terdapat lebih dari satu pengaturan style maka, akan didahulukan berdasarkan urutan berikut ini.
Inline styleInternal styleEksternal styleDefault dari browser
Tetapi apabila link ke eksternal style ditempatkan dibawah internal style pada dokumen HTML, maka internal style akan digantikan oleh eksternal style.
Selain menggunakan cara-cara diatas, masih ada beberapa opsi tambahan yang bisa digunakan untuk mengatur style halaman web kita. Opsi tambahan tersebut adalah:
Penyederhanaan tag- Bila kita ingin melakukan pangaturan style pada beberapa tag dengan style yang sama, misalnya:
h1 {font-size: 20pt;
font-weight: italic;
color: orange}
h2 {font-size: 20pt;
font-weight: italic;
color: orange}
h3 {font-size: 20pt;
font-weight: italic;
color: orange} |
maka penulisan di atas bisa disederahanakan menjadi:h1,h2,h3
{
font-size: 20pt;
font-weight: italic;
color: orange
} |
Penyederhanaan bisa juga dilakukan untuk satu tag saja, misalnya:h1
{
font-size: 20pt;
line-height: 15pt;
font-weight: italic;
font-family: "times new roman"
font-style: normal
}
|
bisa disederhanakan menjadi:| h1{font:20pt/15pt italic "times new roman" normal |
Penggunaan id selector- Id selector digunakan untuk mengatur style yang digunakan pada satu buah tag. Id selector menggunakan id atribut dari elemen HTML dan didefinisikan dengan tanda “#”. Contoh berikut akan mengatur style pada elemen yang memiliki id “par1”:
<html>
<head>
<style type=”text/css”>
#par1
{
text-align:center;
color:red;
}
</style>
</head>
<body>
<h1>Contoh penggunaan id</h1>
<p id=”par1”>Paragraf berikut ini akan diatur oleh style.</p>
<p>sedangkan paragraf ini tidak terpengaruh oleh style</p>
</body>
</html> |
Untuk diperhatikan, pada waktu menamai id jangan mengawali dengan angka. Karena tidak akan terbaca pada browser Mozilla/Firefox. Penggunaan class selector- class selector digunakan untuk mengatur style pada sebuah grup elemen. Tidak sepereti id selector, class selector lebih sering dipakai pada beberapa elemen. Class selector memungkinkan kita untuk mengatur style tertentu pada elemen HTML dengan class yang sama. Class selector menggunakan atribut dari HTML dan didefinisikan dengan tanda titik “.”. Pada contoh dibawah ini, semua elemen HTML dengan class=”center” akan diratakan ke tengah.
<html>
<head>
<style type="text/css">
.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">Judul teks yang diratakan ke tengah</h1>
<p class="center">Paragraf yang diratakan ke tengah.</p>
</body>
</html> |
Untuk diperhatikan, jangan mengawali nama sebuah class dengan angka, karena style kita hanya akan terbaca oleh browser Internet Explorer.
Postingan
0 komentar:
Posting Komentar