Kursus Membuat Web

iklan

Meletakkan Sintak CSS

3 Cara Meletakkan CSS

Ada 3 cara meletakkan CSS :

  1. Eksternal Style Sheet
  2. Internal Style Sheet
  3. Inline Style Sheet

Eksternal Style Sheet

Sebuah style sheet eksternal sangat ideal bila style diterapkan pada banyak halaman. Dengan style sheet eksternal, Anda dapat mengubah tampilan seluruh situs web dengan mengubah hanya satu file.

Setiap halaman harus menyertakan link ke style sheet dengan tag <link>. Tag <link> diletakkan pada bagian <head></head>.

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

Sebuah style sheet eksternal dapat ditulis menggunakan editor teks apapun. File style sheet harus disimpan dengan ekstensi (akhiran) (.css). berikut contoh dari sebuah file style sheet :

hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/background.gif");}

Internal Style Sheet

Sebuah style sheet internal digunakan bila salah satu dokumen memiliki style yang unik. Anda dapat meletakkan sintak pada bagian <head></head> pada halaman dokumen tersebut, di dalam tag <style></style>, seperti ini :

<head>
<style>
	hr {color: sienna;}
	p {margin-left: 20px;}
	body {background-image: url("images/background.gif");}
</style>
</head>

Inline Style Sheet

Untuk menggunakan inline style sheet, tambahkan atribut style ke tag yang akan diberikan style. Atribut style dapat berisi property CSS. Contoh ini menunjukkan bagaimana untuk mengubah warna dan margin kiri sebuah paragraf :

<p style="color:sienna;margin-left:20px;">This is a paragraph.</p>

Banyak Style Sheet

Jika beberapa property telah ditetapkan untuk selector yang sama dalam style sheet yang berbeda, nilai-nilai akan diwariskan dari style sheet yang lebih spesifik.

Sebagai contoh, di asumsikan style sheet eksternal memiliki property seperti berikut untuk selector h3 :

h3 {
    color: red;
    text-align: left;
    font-size: 8pt;
}

kemudian, di asumsikan internal style sheet juga memiliki property seperti berikut untuk selector h3 :

h3 {
    text-align: right;
    font-size: 20pt;
}

jika kedua style sheet digunakan, maka akan menghasilkan property sebagai berikut :

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

color diwariskan dari style sheet eksternal dan text-align dan font-size diganti dengan internal style sheet.

Sebelumnya ...   Berikutnya ...

muhammad falah

Saya Muhammad Falah, jika Anda ingin langsung belajar dengan Saya, silakan ikuti kursus membuat web yang Saya bimbing atau ikuti Saya di :

Muhammad Falah Youtube Channel Muhammad Falah LinkedIn Muhammad Falah Google Plus Muhammad Falah Twitter Muhammad Falah Facebook

copy right © 2015