Implementasi CSS

a. Syntax/Bentuk Umum Penulisan CSS

a. Selector itu untuk menunjukkan bagian mana yang hendak diatur / diformat.

b. Property untuk menunjukkan, bagian (properti) dari selector yang hendak diatur.

c. Value adalah nilai dari pengaturannya.

b. Implementasi CSS

Ada 4 cara memasang kode CSS ke dalam halaman situs, yaitu:

1. Inline CSS

Kode CSS dituliskan langsung ke dalam tag HTML yang ingin di format. Penulisan cara ini tidak memerlukan penulisan selector dalam kode CSS. Cara ini sebaiknya hanya digunakan jika ingin memformat suatu elemen satu kali saja.

Contoh:

Isi paragraf.

</p>

Pada contoh di atas, elemen paragraf <p> di format agar tulisannya menggunakan warna biru. Elemen paragraf lain, tidak akan menggunakan warna biru, karena format ini hanya berlaku pada elemen paragraf yang ditentukan kode CSS nya.

Penulisan CSS dengan cara ini di mulai dengan kata style: lalu di ikuti dengan syntax property: value.

2. Embedded (memasang kode ke dalam bagian <head></head>

Kode CSS dapat ditempelkan di antara tag <head> dan </head>. Penulisan CSS dengan cara ini diawali dengan tag <style> dan diakhiri dengan tag </style>.

Contoh:

<head>

p {color:#0000ff;}

</style>

</head>

Dalam contoh di atas semua elemen <p> dalam halaman web tersebut akan diformat menggunakan font berwarna biru

3. External (link ke file CSS)

Kode CSS external di tulis dalam satu file terpisah yang disimpan dengan akhiran .css.

Panggil file CSS tersebut ke dalam semua halaman web yang dibuat.

Dengan cara ini, kita hanya perlu memiliki satu set kode CSS yang digunakan untuk semua halaman web yang dibangun.

Jadi ada dua langkah dalam pengimplementasian CSS dengan cara ini:

Buat satu file dengan notepad atau teks editor lain dengan nama, misalkan: proyek.css, lalu tuliskan kode-kode css di dalam file tersebut.

p {font-family: arial; font-size: small; color:#0000ff}

h1 {color: red; }

Panggil file proyek.css dari semua halaman web dengan cara memasukkan kode di bawah ini, di antara tag <head> dan </head>

<head>

</head>

4. Import CSS file

Kita juga bisa meng-import CSS ke dalam suatu halaman website menggunakan tag import.

Contoh:

@import “proyek.css";

atau

@import url(“proyek.css");

b. Penggunaan Lebih Dari Satu Kode CSS

Apabila ada lebih dari satu kode CSS untuk satu elemen, maka yang akan digunakan adalah kode yang lebih spesifik.
Misalkan dalam satu halaman web, menggunakan eksternal style sheet untuk memformat elemen H1 sbb:
h1 {
color: red;
text-align: left;
font-size: 12px;
}
Sementara di halaman web yang sama, di antara tag <head> (embed) ada kode CSS sbb:
h1 {
text-align: right;
font-size: 20px;
}
Perhatikan bagaimana pemformatan saling bertabrakan, dari external style sheet, text-align=left dan font-size=12px sementara dari internal style sheet, text-align=right dan font-size=20px.
Dalam kasus seperti ini, maka yang akan aktif adalah kode yang lebih spesifik, dalam hal ini, internal style sheet (embed) lebih spesifik dibandingkan external style sheet.

Jadi, dalam contoh di atas, kode yang akan diimplementasikan adalah sbb:

color: red;
text-align: right;
font-size: 20px;

Cari Blog Ini

MATERI