Belajar cara memasukan css ke dalam halaman web

,




Ada 4 cara memasang kode CSS ke dalam kode HTML / halaman web, yaitu:

1. Inline CSS

2. Embed atau memasang kode css ke dalam bagian

3. Link ke external CSS

4. Import CSS file

Yuk kita bahas satu per satu…


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 anda mau memformat suatu elemen satu kali saja.

Contoh:
<p style="color:blue">
Isi paragraf.
</p>


Pada contoh di atas, elemen paragraf di format agar tulisannya menggunakan warnabiru.

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 katastyle:lalu di ikuti dengan syntaxproperty: value.


Embedded CSS


Anda bisa juga menempelkan kode CSS di antara tagdan. Penulisan CSS dengan cara ini diawali dengan tag.

Contoh:
<style type="text/css">
p {color:blue;}
</style>


Tag <p> Dalam halaman web tersebut akan diformat menggunakan font berwarna biru.


External CSS


Kode CSS external di tulis dalam satu file terpisah yang disimpan dengan akhiran .css. Anda lalu perlu memanggil file CSS tersebut ke dalam semua halaman web yang anda buat.

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

Jadi ada dua langkah dalam pengimplementasian CSS dengan cara ini.

Contoh:
1.Anda membuat satu file dengan notepad atau teks editor lain, dan beri nama, misalkan: style.css, lalu tuliskan kode-kode css di dalam file tersebut.

p {font-family: arial; font-size: small;}
h1 {color: red; }

2.Langkah kedua adalah memanggil file style.css dari semua halaman web. Caranya dengan memasukkan kode di bawah ini, di antara tag dan

<link rel="stylesheet" href="style.css" type="text/css">



Import CSS


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

Contoh:
@import url("style.css");


Apabila ada lebih dari satu kode CSS untuk satu elemen, maka yang akan digunakan adalah kode yang lebih spesifik.

Artikel dari : Belajar Css dot com

Tidak ada komentar:

Posting Komentar

Maaf, fitur koment hanya untuk pengguna akun goggle saja.
Dikarenakan untuk meminimalisir komentar spam.