<div style='background-color: none transparent; float:right;'><a href='http://www.rsspump.com/?web_widget/rss_ticker/news_widget' title='News Widget'>News Widget</a></div>

Mengenal dasar penulisan CSS untuk tampilan blog


Awalnya Semua penulisan source code termasuk pengaturan presentasi ditulis dalam tag HTML. Kemudian dirintis penulisan kode pengaturan presentasi dokumen secara tersendiri. 

image Nama Cascading Syle Sheets didapat dari fakta bahwa setiap deklarasi style yang berbeda-beda dapat diletakkan secara berurutan,  membentuk hubungan parent-child pada tiap deklarasi style. CSS merupakan bahasa pemrograman untuk mengkontrol beberapa komponen web sehingga lebih terstruktur dan seragam.

Dengan CSS dimungkinkan tampilan page  sama dengan format berbeda dan merupakan bahasa style sheet yang mengatur dan mengendalikan gambar, bagian body, tabel, border, warna hyperlink / mouseover, spasi paragraf, spasi teks, margin kiri/kanan/atas/bawah dan parameter lain.

Sintax Dasar Kode CSS

Bentuk penulisan dasar CSS adalah : 

                                  selector {property : value}

Selector = tag HTML atau elemen (baik class maupun id) yang akan diatur. Bagian diapit '{}' disebut declaration terdiri 2 unsur, property dan value.
1).    Property = atribut elemen yang ingin ditentukan nilainya.
2).    Value     = nilai dari atribut elemen, bisa berupa angka dan text.
Pada EDIT HTML, sering dijumpai kode berikut :

h1 {
color: #0789de;                                       (bisa dalam bentuk---> color: red;
}

tag header atau h1
= Selector
color
= property
#0789de
= value

Perhatikan pendefinisian property dan atribut berada diantara tanda "{ }" dan pendefinisian value dengan tanda " : "dan diakhiri " ; " 

Contoh Berkas CSS
<html>
<head>
<style type="text/css">
body  {
background-color:#d0e4fe;
}
h1 {
color:orange;
text-align:center;
}
p  {
font-family:"Times New Roman";
font-size:20px;
}
</style>
</head>
<body>
<h1>CSS example!</h1>
<p>This is a paragraph.</p>
</body>
</html>

Sifat CSS

Pertama, penulisan (script) CSS terintegrasi dengan penulisan HTML dalam desain website. Kalau halaman web yang lain akan didesain dengan model sama, maka skrip CSS itu harus dimasukkan lagi ke dalam halaman web yang lain itu. Atau lebih dikenal sebagai CSS Internal.

Kedua, penulisan script CSS dipisahkan dalam file tersendiri. Sehingga bisa digunakan lagi dalam pembuatan website lain dengan model sama, maka cukup menggunakan semacam tautan menuju berkas CSS tersebut. Kelebihan cara kedua adalah HTML bisa merekomendasikannya untuk pihak luar. Atau lebih dikenal sebagai CSS Eksternal.

Penulisan CSS

CSS Internal memiliki 2 cara penulisan dan 1 cara penulisan CSS Eksternal.

A.   Metode Penulisan CSS Internal

(1).    Metode Inline Style Sheet
CSS didefinisikan langsung pada tag HTML bersangkutan. Cara penulisan dengan menambahkan atribut style="..." dalam tag HTML tersebut. Style ini hanya berlaku pada tag bersangkutan, dan tidak berpengaruh pada tag yang lain. Contoh Metode Inline Style Sheet :

<head>
<title>Contoh Bentuk Inline</title>
</head>
<body bgcolor="#FFFFFF">
<p id="cth1">
Ini adalah contoh tag P tanpa diformat menggunakan CSS </p>

<p id="cth2" style="font-size:20pt">
Tag P ini diformat dengan besar font 20 point </p>

<p id="cth3" style="font-size:14pt; color:red">
Tag P ini diformat dengan besar font 14 point, dan menggunakan warna merah </p>
</body>
</html>

(2). Metode Embedded Style Sheet
CSS didefinisikan terlebih dahulu dalam tag <style> ... </style> di atas tag <body>. Pada pendefinisian ini disebutkan atribut2 CSS yang akan digunakan untuk tag-tag HTML, yang selanjutnya dapat digunakan oleh tag yang bersangkutan (tag-tag yang ada diantara <body> … </body>. 
Contoh penggunaan CSS dengan metode Embedded Style Sheet :

<html>
<head>
<title>Contoh Bentuk Embedded/title>
</head>
<style>
body {background:#0000FF; color:#FFFF00; margin-left:0.5in}
h1 {font-size:18pt; color:#FF0000}
p {font-size:12pt; font-family:arial; text-indent:0.5in}
</style>
<body>
<h1 id="cth1">Judul ini berukuran 18 dengan warna merah!</h1>
<p id="cth2">Tag p ini di format dengan besar font 12 point dengan tipe font Arial dan mempunyai identasi 0.5 inch </p>
<p id="cth3">Yang perlu diperhatikan juga bahwa body disini telah diformat dengan margin kiri 0.5 inch dan warna background biru</p>
</body>
</html>

B.   Metode Linked Style Sheet (Untuk CSS Eksternal)

Metode ini hampir sama dengan metode Embedded Style Sheet, hanya saja pendefinisian tag <style> ... </style> dibuat file terpisah dari file HTML yang membutuhkan CSS. File tersebut disimpan dalam format .css.
Pada berkas HTML yang akan menggunakan berkas CSS, harus dibuat tag <link> yang dituliskan di antara tag <head> ... </head>.

Contoh (simpanlah dengan nama - contoh.css) :

<style>
body {background:#0000FF; color:#FFFF00; margin-left:0.5in}
h1 {font-size:18pt; color:#FF0000}
p {font-size:12pt; font-family:arial; text-indent:0.5in}
</style>

Penggunakan CSS
*  Didukung oleh kebanyakan browser versi terbaru.
*  Fleksibel dalam penempatan layout. Dalam layouting CSS ada Z - index 
    untuk menempatkan objek dalam posisi yang sama.
*  Menjaga HTML dalam penggunaan tag dalam jumlah minimal.
    Hal ini berpengaruh terhadap ukuran berkas dan speed pengunduhan.
*  Bisa menampilkan konten utama terlebih dahulu, sementara tampilan 
    gambar menyusul.
*  Penerjemahan CSS setiap browser berbeda, layout akan berubah jika  
    dilihat dari berbagai browser
*   CSS layouting "Masa Depan" dengan penggabungan bersama XHTML.
------------------------------------------

0 komentar dan respon:

Word of the Day

Article of the Day

This Day in History
Sanden Yogyakarta Jakarta Slideshow: Yusuf’s trip from Jakarta, Java, Indonesia to Yogyakarta was created by TripAdvisor. See another Yogyakarta slideshow. Create your own stunning slideshow with our free photo slideshow maker.
Free Backlinks Online Users

Delivered by FeedBurner

Google Translate

Add to Google
Translate to 32 LANGUAGES
Jpn
Indonesia

Sayangi Kendaraan Anda
ASURANSI MOBIL SHARIAH
contact :
yusuf.edyempi@yahoo.com
SMS......:...0815 8525 9555

Statistic

danke herzlich für besuch

free counters

SEO for your blog

sitemap for blog blogger web website

Recent flag visits


bloguez.com

STAGE OF MODERN CIVILIZATION SOME GREATEST ACHIEVERS OR THE ONES HISTORY WOULD REMEMBER SOME WAY - CAN YOU TRACK THEM BY NAME?