Home » CSS » Pengenalan CSS Bagian I
0

Pengenalan CSS Bagian I


CSS  adalah  singkatan  dari  Cascading  Style  Sheets.  Kalau  baca  di  kamus,  cascading  itu  artinya  air  terjun. Tapi dalam hal ini, yang di maksud adalah, aliran dari suatu kode ke kode lain yang saling berhubungan.Jadi  kalau  di  tulis  lengkap  dalam  bahasa  Indonesia  kira-kira  arti  CSS  adalah:  kumpulan  kode-kode  yang berurutan dan saling berhubungan untuk mengatur format / tampilan suatu halaman HTML.
Keuntungan Penggunaan CSS Jika  anda  memiliki  beberapa  halaman  website  dimana  anda  menggunakan  fontarial untuk  tulisannya,  lalu  suatu  hari  anda  bosan  dengan  arial  dan  ingin  mengganti  ke trebuchet,  anda  harus  merubah  satu  per  satu  halaman website anda dan merubah tipe font dari arial menjadi trebuchet. Dengan menggunakan css, dimana semua  halaman web memakai css yang sama, anda cukup merubah satu  baris kode css untuk merubah font di semua halaman web dari arial ke trebuchet.Jadi, keuntungan menggunakan CSS, lebih praktis! Kekurangan Penggunaan CSS
Tidak  semua  browser  mengartikan  kode  CSS  dengan  cara  yang  sama.  Jadi  kadang-kadang,  tampilan  web dengan  CSS  terlihat  baik  di  browser  yang  satu,  tapi  berantakan  di  browser  yang  lain.  Jadi  anda  harus  memeriksa  tampilan  supaya  terlihat  baik  di  semua  browser  dan  menambahkan  kode-kode  khusus  browser  tertentu jika memang dibutuhkan agar tampilan web anda terlihat baik di semua browser.
Syntax CSS
Syntax / kalimat CSS terdiri dari beberapa set peraturan yang memiliki: 1 selector, 1 property, 1 value
Format penulisan kalimat CSS:
selector  {  property :  value  }
Selector itu untuk menunjukkan bagian mana yang hendak diatur / diformat. Property untuk menunjukkan, bagian (properti) dari selector yang hendak diatur. Value adalah nilai dari pengaturannya.
Contoh Syntax:
h1 {color :red} 
Contoh di atas menunjukkan
Selector :  h1
Property :  col
Value :  red
Kalau  diterjemahkan  ke  kalimat  bahasa  Indonesia  kira-kira  begini:  Mengatur  color  dari h1 ke  warna merah (red).
Pengelompokan Selectors
Anda  dapat  menulis  satu  kode  CSS  untuk  berbagai  macam  selector  dengan  cara  menggunakan  koma. Misalkan anda mau mengatur agar tag h1, h2 dan h3semua menggunakan warna merah, maka kode CSS nya
menjadi:
h1,h2,h3  {color:red}
Perhatikan penulisan h1,h2,h3 yang dipisahkan oleh koma.
Penggunaan Banyak Properties
Untuk mengatur lebih dari satu properties gunakan pemisah titik koma ( ; ).
Contoh:

h1,h2,h3{color:red;font-family:arial; font-size:150%;}
Pada contoh di atas, tag h1, h2 dan h3 di atur agar menggunakan warnamerah, dengan type font arial, dan
ukuran font 150%.

Implementasi CSS
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 <head>
3.       Nge link ke external CSS
4.       Import CSS file
Mari 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.
<P style= ”color:blue”>
Isi Paragraf
</p>
Contoh:
< P  style = ” color : blue” > 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.
Embedded CSS
Anda  bisa  juga  menempelkan  kode  CSS  di  antara  tag <head> dan </head>.  Penulisan  CSS  dengan  cara  ini diawali dengan tag <style> dan diakhiri dengan tag </style>.
Contoh:
<head>
<style  type="text/css"  media="screen" >
p  {color:blue;}
</style>
</head>

Dalam  contoh  di  atas  semua  elemen <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 berinama, misalkan: style.css, lalu tuliskan kode-kode css di dalam file tersebut.
2.          p  {font-family : arial; font-size:small;}
3.         h 1  {color : red ;}
4.       Langkah  kedua  adalah  memanggil  file  style.css  dari  semua  halaman  web.  Caranya  dengan
memasukkan kode di bawah ini, di antara tag <head> dan </head>
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");
 

Tidak ada komentar:

Posting Komentar