Struktur Penulisan CSS
Berikut ini adalah struktur penulisan CSS.
Keterangan: Selector digunakan untuk menentukan element mana yang akan diatur stylenya.
Jenis-Jenis Selector CSS
CSS memiliki 3 jenis selector basic yaitu class selector, id selector, dan tag selector.
| Selector { Properties : Value; } |
Keterangan: Selector digunakan untuk menentukan element mana yang akan diatur stylenya.
Jenis-Jenis Selector CSS
CSS memiliki 3 jenis selector basic yaitu class selector, id selector, dan tag selector.
- Class selector Class adalah “agen bebas” yang dapat diterapkan untuk tag HTML apapun. Kita dapat membuat nama class dengan hampir semua nama apapun. Karena class selector dapat diterapkan ke beberapa tag HTML sekaligus, maka class adalah selector yang paling serbaguna. Penulisan class selector dalam css disimbolkan dengan tanda titik ( . ).
- ID Selector Hampir sama dengan class, ID dapat diterapkan untuk hampir semua tag HTML, tetapi penggunaanya hanya sekali dalam satu halaman untuk satu tag HTML tertentu.
- Tag selector Nama dari element HTML digunakan sebagai selector untuk mendefinisikan tag HTML yang berasosiasi. Misalnya, selector dari <h1> adalah h1. HTML selector digunakan dalam CSS rule untuk mendefinisikan bagaimana suatu tag akan ditampilkan.
Contoh :
Penulisan code di dalam dokumen HTML
| .... <h3 class=’judul’> Belajar Membuat Website </h3> .... |
Penulisan code dalam cssnya
| .judul { Font : 12pt Impact; } |
Perlu di tekankan sekali lagi, sebuah selector class dapat digunakan pada lebih dari satu tag HTML. Masukkan style CSS dalam selector class jika terdapat 2 atau lebih elemen/tag HTML yang bisa memiliki style yang sama dalam satu halaman.
Contoh :
Penulisan code dalam dokumen HTML
| .... <div id='footer'> copy-Right Fajar Loebis -2012 </div> .... |
Penulisan code di css nya
| #footer { color: blue; border: 1px solid black; } |
Sekali lagi di tekankan selector ID digunakan hanya untuk 1 elemen pada satu halaman web. Misalnya saja ID #footer diatas hanya digunakan sekali karena dalam satu halaman web hanya ada 1 footer.
Contoh :
Penulisan code di dokumen HTML
| .... <h1> Mengarungi Samudera PHP </h1> <h1> Belajar HTML dan CSS </h1> .... |
Penulisan code di cssnya
| h1{ font: 12pt Impact; color:red; } |
Categories:
tutorial css,
web desaign
2 Comments
Rekomendasi Artikel Terkait ==> DASAR CSS (CASCADING STYLE SHEETS FUNDAMENTALS)
ReplyDeleteArtikel ini menjelaskan Jenis-Jenis Selector CSS serta contoh-contohnya.Terimakasih.
ReplyDeleteWebsite saya https://sriseptiarini.mahasiswa.atmaluhur.ac.id
Website kampus http://www.atmaluhur.ac.id