Minggu, 06 Oktober 2013

Penulisan CSS

Diposting oleh Unknown di 06.34 Label:

Ada 3 cara memasukkan CSS 

  • Inline Style Sheet
  • Internal Style Sheet, dan
  • External Style Sheet

Inline Style Sheet

Inline Style Sheet merupakan metode yang paling tidak menguntungkan krn memasukkan CSS dalam attribut elemen HTML secara langsung.
Kami anjurkan anda jangan terlalu sering menggunakan metode ini!.
Inline Style Sheet dilakukan dengan memasukkan CSS-nya ke dalam attribut CSS, dengan menambahkan attribut 'style'.
contoh :


<!DOCTYPE html>
<html>
<body>

<h2 style="color:red; text-align:center;" >Style pada heading ini dibuat dengan Inline CSS</h2>

</body>
</html>

Internal Style Sheet

Internal Style Sheet sebaiknya digunakan apabila anda memiliki satu dokumen yang memiliki style yang unik.
Internal Style Sheet di deklarasikan pada bagian <head> sebuah dokumen HTML.
Internal Style Sheet akan mempengaruhi semua elemen dibawahnya sesuai dengan isi dari deklarasi style-nya.
contoh :

<!DOCTYPE html>

<html>

<head>

<style type="text/css">

/* ini adalah deklarasi internal CSS */

h2{ color:red; text-align:right; }

</style>

</head>

<body>

<h2>Style pada heading ini dibuat dengan Internal CSS</h2>

<h3>Ini adalah h3, CSS tidak mempengaruhi elemen ini karena blm di deklarasikan.</h3>

<h2>Ini adalah h2</h2>

</body>

</html>

External Style Sheet

External Style Sheet sangat menguntungkan bila digunakan untuk banyak dokumen yang memiliki style yang sama.
Dengan Sxternal Style Sheet anda bisa merubah seluruh halaman di website anda dengan mudah, hanya mengubah satu buah file CSS.
Setiap halaman harus memiliki koneksi dengan External Style Sheet dengan cara menambahkan tag <link>.
Tag <link> diletakkan di dalam bagian <head> pada dokumen HTML.

<link rel="stylesheet" type="text/css" href="cssku.css" />
Anda bisa membuat external CSS dengan berbagai macam text editor, misal notepad. Namun ekstensinya harus "*.css".
Misal kita buat file "cssku.css" dengan isi sebagai berikut :

body{background-color:black;}
p{color:blue;}
Kemudian kita memiliki file "index.html" dalam folder yang sama :

<html>
<head>

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

</head>
<body>
<p>Paragraf ini akan berwarna biru dan background halaman ini akan berwarna hitam/black</p>
</body>
</html>




1 komentar: