CSS (Casseding Style SheetS)

1. Pengertian CSS

standard pembuatan dan pemakaian style untuk dokumen terstruktur , CSS digunakan untuk mempersingkat penulisan tag HTML seperti font,color,text, dan table menjadi lebih ringkas sehingga tidak terjadi pengulangan tulisan

2. Keuntungan Penggunaan CSS

  • Memisahkan presentastion sebuah dokumen dari content document itu sendiri.
  • Lebih Praktis karena Mempermudah dan Mempersingkat pembuatan dan pemeliharaan dokumen web
  • Mempercepat proses rendering/pembacaan HTML.

3. Kekurangan Penggunaan CSS

  • Tidak semua browser mengartikan kode CSS dengan cara yang sama

4. Cara Penggunaan CSS

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

  1. Inline CSS
  2. Embedded atau memasang kode css ke dalam bagian <head>
  3. Link ke external CSS
  4. Import CSS file

Penejelasan di bawah ini:

a. Inline CSS

Kode CSS dituliskan langsung ke dalam tag HTML yang ingin di format. Penulisan cara ini tidak memerlukan penulisan selector dalam kode CSS.

b. Embeded CSS

  • menempelkan kode CSS di antara tag  <head> dan </head>
  • Penulisan CSS dengan cara ini diawali dengan tag <style> dan diakhiri dengan tag </style>

c. Link Ke External CSS

  • Kode CSS external di tulis dalam satu file terpisah yang disimpan dengan akhiran .css.
  • Diletakan diluar dokumen XHTML nya
  • Menggunakan property <link> untuk menghubungkan halaman XHTML dengan file .css nya

d. Import CSS

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

Contoh:

@import “style.css”;

atau

@import url(“style.css”);

5. Aturan Penulisan Css

a) Selector

Adalah nama yang diberikan untuk setiap style berbeda yang dibuat. Di dalam style didefinisikan bagaimana setiap selector akan bekerja (font, color dan lain-lain.). Kemudian di dalam bagian body halaman web, selector tersebut dipanggil untuk mengaktifkan style yang telah didefinisikan

Macam – macam Selector :

  • Selector HTML
  • Selector Class
  • Selector ID

6. Elemen – elemen CSS

  • Font
  • Text
  • Color

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: