Cuplikan Komponen dalam CSS

1) Komponen CSS

~Pada bagian awal, syntax CSS bagian pertama yang di tulis adalah selector. Pada contoh-contoh terlihat penggunaan tag HTML sebagai selector.

Contoh kasus:

~Kita akan membuat kode CSS untuk tag <h1>. Namun kita ingin memformat tag <h1> dengan warna / property berbeda.

~Misalkan, tag <h1> di kolom kiri berwarna biru sementara tag <h1> di kolom tengah berwarna merah.

~Untuk kasus seperti ini, kita bisa menggunakan Class selector dan ID selector.

a. Class Selector

a. Class selector adalah penggabungan beberapa properties yang digunakan lebih dari satu kali.

Cara penulisan Class Selector:

.nama-class {property:value;}

Untuk menempelkan class ke dalam tag HTML:

taghtml.nama-class {property:value;}

Perhatikan titik di setiap awal nama Class.

Jika ingin menggunakan class selector di luar kode HTML, gunakan tag <div class=nama-class> dan di akhiri dengan tag </div> atau dengan tag <span></span>

b. Contoh penulisan syntax CSS:

.tengah {text-align:center;}

p.tengah {color:#ff0000;}

h1.kiri {color:#0000ff;}

h1.tengah {color:#000000;}

Contoh pemakaian kode CSS:

<p>Teks tengah akan berwarna merah.</p>

<h1 class=tengah>Tag H1 tengah akan berwarna hitam</h1>

</div>

<h1 class=kiri>Tag H1 kiri akan berwarna biru</h1>

Hasil:

Teks tengah akan berwarna merah.

Tag H1 tengah akan berwarna hitam

Tag H1 kiri akan berwarna biru

b. ID Selector

a. ID Selector mirip dengan Class selector.

Untuk membedakannya, gunakanlah ID selector untuk memformat bagian yang hanya muncul satu kali dalam satu halaman web, misalnya untuk memformat bagian menu / sidebar.

Cara penulisan ID Selector:

#nama-ID {property:value;}

Untuk menempelkan ID selector ke dalam tag HTML:

taghtml#nama-ID {Property:value;}

Perhatikan tanda # di setiap awal nama ID.

Jika ingin menggunakan class ID selector di luar kode HTML, gunakan tag <div id=nama-ID> dan di akhiri dengan tag </div>.

b. Contoh penulisan syntax CSS:

#tengah {text-align:center;}

p.tengah {color:#ff0000;}

h1.kiri {color:#0000ff;}

h1.tengah {color:#000000;}

Contoh pemakaian kode CSS:

<p>Teks tengah akan berwarna merah.</p>

<h1 class=tengah>Tag H1 tengah akan berwarna hitam</h1>

</span>

<h1 class=kiri>Tag H1 kiri akan berwarna biru</h1>

2) CSS Properties

a. Font

CSS dapat memformat font dengan berbagai macam cara mulai dari pengaturan tipe font, ukuran, dll.

Properties dari CSS Font:

a. Font Family

b. Font Size

c. Font Style

d. Font Variant

e. Font Weight

f. Font Color

g. Font

Syntax penggunaan CSS font:

{ font-properties: value }

b. CSS Font Size

Properti font size digunakan untuk pengaturan ukuran huruf yang digunakan.

Syntax:

font-size: <absolute-size> | <relative-size> | <length> | <percentage>

Contoh penulisan:

h1 { font-size: 18px; }

h2 { font-size: 14pt; }

Nilai untuk size:

Absolute Size

xx-small, x-small, small, medium, large, x-large, xx-large

Relative Size

larger/smaller, length [pixel (px), point (pt)], persentase

c. CSS Font Style

Properties font style digunakan untuk pengaturan tampilan (style) kemiringan dari huruf yang digunakan.

Ada 3 macam nilai style yaitu:

normal: browser menampilkan huruf secara normal.

Italic: browser menampilkan huruf miring

oblique: browser menampilkan huruf miring (oblique).

Perbedaan italic dan oblique:

Jenis font biasanya memiliki font set miring yang disebut italic. Misalkan, untuk font Trebuchet MS, akan terdapat 2 set font yaitu trebuchet MS true type (normal) dan trebuchet MS italic (miring). Sementara pada penggunaan style oblique, yang digunakan adalah Trebuchet MS true type yang di miringkan pada saat ditampilkan. Jadi untuk beberapa font, tidak akan tampak perbedaan nyata antara penggunaan style italic dan oblique.

Cari Blog Ini

MATERI