Tutorial Dasar CSS
Selector id
digunakan untuk menentukan style untuk elemen tunggal yang unik . Id pemilih
menggunakan atribut id elemen HTML, dan didefinisikan dengan “#“. Aturan style
bawah ini akan diterapkan pada elemen dengan id = “para1″
#para1
{
text-align:center;
color:red;
}
{
text-align:center;
color:red;
}
Selector class digunakan untuk menentukan gaya untuk sekelompok elemen.
Berbeda dengan pemilih id, kelas pemilih yang paling sering digunakan pada
beberapa elemen . Dengan ini memungkinkan anda untuk menentukan gaya dan elemen
HTML dengan class yang sama .
Selector Class menggunakan atribut
class HTML, dan didefinisikan dengan “.”
Pada contoh di bawah ini, semua
elemen HTML dengan class = “center”akan dibuat rata tengah :
.center {text-align:center;}
kita juga dapat menentukan bahwa hanya elemen HTML tertentu
yang dipengaruhi oleh kelas.
Pada contoh di bawah, elemen p semua
dengan class = “center”akan di buat rata tengah :
p.center {text-align:center;}
untuk melakukan formatting
elemen-elemen HTML, selain menuliskan nama elemennya langsung seperti h1
(heading), div (divide), p (paragraph), CSS juga memperbolehkan kita untuk
menspesifikasi selector khusus yang disebut class dan id.
Selector id digunakan
untuk menempatkan style pada element yang unik (catatan penting: pada satu
dokumen HTML tidak boleh elemen HTML memiliki selector id yang sama) attribut
id dari element HTML didefinisikan dengan tanda pagar #, contoh penggunaanya
misalkan kita memiliki sebuah tag HTML sebagai berikut.
<*p
id=”parameter”> ini paragraph <*/p>
Tiga Cara untuk Insert CSS :
1. Eksternal style sheet
Merupakan ideal ketika gaya diterapkan pada banyak halaman , dengan ini anda dapat mengubah tampilan seluruh situs Web dengan mengubah satu file. Setiap halaman harus link ke style sheet menggunakan tag . Tag masuk ke dalam bagian kepala
<*head>
<*/head>
<*/head>
dengan eksternal style sheet dapat
ditulis dalam bentuk editor teks apapun , dan harus disimpan pada
ekstensi css . sebuah contoh dari file style sheet dibawah ini :
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url(“images/gambar.jpeg”);}
body {background-image:url(“images/gambar.jpeg”);}
2. Internal style sheet
Merupakan dokumen tunggal html harus digunakan apabila dokumen tunggal html memiliki gaya yang unik . XDi bagian ke[pala html anda dapat mendefinisikan gaya internal dengan menggunakan tag style seperti ini :
<*head>
<*style type=”text/css”>
<*style type=”text/css”>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url(“images/back40.gif”);}
<*/style>
p {margin-left:20px;}
body {background-image:url(“images/back40.gif”);}
<*/style>
<*/head>
3. Inline style
Gaya inline dengan mencampurkan
konten dengan presentasi akan banyak kehilangan keuntungan , maka anda dapat
menggunakan metode hemat dibawah ini :
Untuk menggunakan gaya inline Anda menggunakan atribut style dalam tag yang relevan. Atribut style dapat berisi properti CSS. berikut contoh bagaimana mengubah warna dan margin kiri paragraf :
Untuk menggunakan gaya inline Anda menggunakan atribut style dalam tag yang relevan. Atribut style dapat berisi properti CSS. berikut contoh bagaimana mengubah warna dan margin kiri paragraf :
<*p style=”color:sienna;margin-left:20px”>This is a
paragraph.<*/p>
4. Multiple Style Sheet
Jika beberapa properti telah
ditetapkan untuk pemilih yang sama dalam style sheet yang berbeda maka
nilai-nilai akan diwariskan dari style sheet lebih spesifik.
contoh style sheet eksternal untuk
pemilih h3 :
h3
{
color:red;
text-align:left;
font-size:8pt;
}
{
color:red;
text-align:left;
font-size:8pt;
}
contoh style sheet internal untuk pemilih h3 :
h3
{
text-align:right;
font-size:20pt;
}
{
text-align:right;
font-size:20pt;
}
Jika halaman dengan internal style
sheet link ke style sheet eksternal properti untuk h3 akan menjadi:
color:red;
text-align:right;
font-size:20pt;
text-align:right;
font-size:20pt;
Warna diwariskan dari style sheet
eksternal dan teks-alignment dan ukuran font diganti oleh internal style sheet.
Dari : Asep Lesmono (51410171)
Baca artikel lainnya, masih tentang CSS3 :
Pengertian CSS3 (Bryan Indra Putra/51410454)
Sejarah CSS3 (Muhamad Fitriansyah/54410577)
Kelebihan CSS3 (Vinny Rosita Nela Bintari/58410385)
Fitur - fitur CSS3 (Gusti Pribadi Ratu S/55409234)
0 komentar:
Posting Komentar