CSS Tutorial: struktur css

dalam penulisan syntax dari css mempunyai struktur penulisan yang terdiri dari 3 bagian dasar yaitu selector, property, value dengan susunan seperti gambar berikut:

dalam gambar tersebut juga terdapat pula tanda {} (kurung kurawal), : (titik dua), dan ; titik koma)

• selector merupakan tag atau atribut dari html yang akan diberikan style (menunjukan apa yang harus diberikan style tersebut.
  property merupakan style-style yang akan diberikan pada html. misal font-size, color, margin, dll
• value merupakan nilai dari style-style tersebut misal color:black, margin: 2px, dll
• { } (kurung kurawal) merupakan tanda yang digunakan untuk mengapit style-style misalnya: selector {style1: value1; style2:value2; style3:value3}
• : titik dua merupakan pemisah antara property dan value missalnya styel1: value1;
• ; titik koma merupakan penanda berakhirnya satu style seperti halnya pada bahasa C atau java menggunakan tanda ; pada setiap akhir dari suatu perinta misalnya style1: value1; style2: value2; merupakan 2 style walaupun terdapat dalam 1 baris.

css tidak mempermasalahkan baris baru, css juga bisa dibuat hanya satu baris saja untuk semuanya namun agak susah dalam pembacaan dari segi manusianya, bisa juga di buat baris demi bari, yang penting tandanya harus jelas...

oke deh sampai sini dulu ya teman-teman yang saya sharekan... GOD bless...

CSS tutorial: knapa memakai CSS...

halaman web merupakan tampilan dari element-element html yang di baca oleh browser dalam proses pembuatan html terkadang para web developer mendapatkan kesulitan dalam mendisain susunan tag-tag html yang akan ditampilkan sehingga halaman web tersebut menjadi kurang menarik dan sedikit berantakan dan selain itu juga sulit untuk dilakukan pemeliharaan tampilan web itu sendiri sehingga tampilan web yang muncul itu-itu saja...

dengan adanya hal-hal di atas yang membatasi kita jika menggunakan html saja dalam mendisain sebuah halaman web, menyebabkan css sangat diperlukan untuk mempermudah dan memperunik tampilan web kita...

terdapat beberapa alasan mengapa CSS sangat diperlukan dalam mendisain halaman web kita antara lain seperti yang disebutkan dibawah ini:

• mempermudah kita untuk melakukan pengeditan tampilan (dalam hal ini bukan content / isi).
• mempermudah kita untuk tidak menuliskan style tersebut berulang-ulang jika menggunakan html saja, karena style css mempunyai yang disebut selector yang diberika style dan itu berlaku untuk semua tag html atau atribut (id dan class) yang selectornya dituliskan.
• selain itu juga mempercepat browser karena css hanya akan didownload 1 kali saat melakukan browsing dan jika halaman tersebut dibuka berulang-ulang maka file css sudah berada pada local cache. (sumber: CSS web design for dummies).

contoh pemakaian css yaitu masih ingatkah anda dengan friendster... terdapat pilihan bagi kita untuk mengedit layout dari friendster tersebut dengan css generator dan selain itu tersedia template- template yang dicopy pastekan pada tempat yang tersedia pada friendster sehingga layout dari friendster kita berubah tulisan-tulisan yang dicopy tadi itu merupakan kode css...

selain friendster masihbnyak lagi website yang kebnyakan menggunakan cssuntuk memperindah tampilan dari website itu sendiri

CSS Tutorial: introduction

CSS merupakan kepanjangan dari Cascading Style Sheets... "truz kenapa??..." kata si pembaca... :) CSS ini merupakan salah satu bagian terpenting dalam pembuatan web...

Dengan CSS kita dapat dimudahkan dalam mendisain bagian perbagian (element-element atau tag-tag yang ada pada html contohnya "div", "a" dll) yang terdapat pada halaman web kita...

Dalam membuat css kita harus membutuhkan file yang berisikan tag-tag html... sehingga css tidak dapat dipisahkan dari html...

Terdapat 2 cara untuk menuliskan dan menghubungkan css dengan html yaitu seperti tulisan dbawah namun sebelumnya kita

• menjadi satu file dengan file html (cssdio22r1.html). caranya sebagai berikut... ketikan atau copy script html yang ada dibawah ini pada notepad atau notepad++ kemudian save dengan nama "cssdio22r1.html"... isi dari file html tersebut adalah sebagai berikut

<html>
<head>
<style>
h1 {
font-size:20pt;
color:blue;
background-color: grey;
}
</style>
</head>
<body>
<h1>Hallo my name is dio22r!!!</h1>
</body>
</html>

• memisahkan css dari html menjadi sebuah file css sendiri (cssdio22r2.html dan cssdio22r2.css). caranya sebagai berikut... isi dari kedua file tersebut adalah sebagai berikut yang pertama adalah file html dan yang kedua adalah file css dan jangan lupa untuk menyimpan css dengan nama seperti yang tertulis pada file html href="......css" ...

<html>
<head>
<link href="cssdio22r2.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Hallo my name is dio22r!!!</h1>
</body>
</html>

------------garis pembatas yang atas adalah isi file html dan yang bawah adalah isi file css---------------

h1 {
font-size: 20px;
color: blue;
background-color: grey;
}

dibawah ini merupakan screen capture tampilan dengan menggunakan css (kiri) dan tanpa menggunakan css (kanan)....

mungkin itu dulu ya kali ini... tunggu posting berikutnya... oke deh GOD BLESS...