Berikut ini adalah struktur penulisan CSS.
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.
a. 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 disymbolkan dengan tanda titik ( . ).
Contoh:
Penulisan code di dalam dokumen HTML
<!DOCTYPE html>
<html>
<head>
<title>Class Selector</title>
</head>
<body>
<h3 class="judul">Belajar Membuat Website</h3>
</body>
</html>
Priview
Belajar Membuat Website
Penulisan code dalam cssnya
.judul{Kode lengkapnya menjadi
Font : 12pt Impact;
}
<!DOCTYPE html>
<html>
<head>
<title>Class Selector</title>
<style>
.judul{
Font : 12pt Impact;
}
</style>
</head>
<body>
<h3 class="judul">Belajar Membuat Website</h3>
</body>
</html>
Priview
Belajar Membuat Website
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.
b. ID Selector
Baca Juga
- Bagian 15. Memulai Menggunakan CSS
- Tutorial Video The Complete Angular Course Beginner to Advanced Free Download
- Kumpulan Video dan Source Tutorial Master PHP Pemula Full Complit Gratis
- Kumpulan Tutorial Developers 2018 Full Gratis Download
- Menggunakan Library dan Helper di CodeIgniter
- CodeIgniter & Database
- Bagian 19. Membuat Halaman Website Minimalis
- Bagian 18. Lebih Dalam Bekerja dengan CSS
- Bagian 17. Struktur Penulisan Pada CSS
- Bagian 16. Cara Menggunakan CSS
Hampir sama dengan class, ID dapat diterapkan untuk hampir semua tag HTML, tetapi penggunaanya hanya sekali dalam satu halaman untuk satu tag HTML tertentu.
Contoh:
Penulisan code dalam dokumen HTML
<!DOCTYPE html>
<html>
<head>
<title>ID Selector</title>
</head>
<body>
<div id="footer">
copy-Right Cyber Bussiner School – 2011
</div>
</body>
</html>
Priview
Penulisan code di cssnya #footer { color: blue; border: 1px solid black; }
Kode lengkapnya menjadi :
<!DOCTYPE html>
<html>
<head>
<title>ID Selector</title>
<style>
#footer {
color: blue;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="footer">
copy-Right Cyber Bussiner School – 2011
</div>
</body>
</html>
Priview
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 header.
c. 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 dokumen HTML
<!DOCTYPE html>
<html>
<head>
<title>Tag Selector</title>
</head>
<body>
<h1>Mengarungi Samudra PHP</h1>
<h1>Belajar HTML dan CSS</h1>
</body>
</html>
Priview
Mengarungi Samudra PHP
Belajar HTML dan CSS
Penulisan code di cssnya h1{ font: 12pt Impact; color:red; }
Kode lengkapnya menjadi
<!DOCTYPE html>
<html>
<head>
<title>Tag Selector</title>
<style>
h1{
font: 12pt Impact;
color:red;
}
</style>
</head>
<body>
<h1>Mengarungi Samudra PHP</h1>
<h1>Belajar HTML dan CSS</h1>
</body>
</html>
Priview
Mengarungi Samudra PHP
Belajar HTML dan CSS
Selamat mencoba..
Bagian 17. Struktur Penulisan Pada CSS
Reviewed by Akief Takaful
on
11:47 PM
Rating:
Reviewed by Akief Takaful
on
11:47 PM
Rating:
No comments: