Moernie77's Weblog

DASAR CSS

77 — Wed, 30 Dec 2009 10:38:51 +0000

Untuk menambah pengetahuan kita tentang CSS disini saya menulis sedikit tentang dasar-dasar CSS.

Cascading Style Sheet atau yang biasa disebut dengan CSS digunakan untuk mempersingkat penulisan tag HTML seperti font,color,text, dan table menjadi lebih ringkas sehingga tidak terjadi pengulangan tulisan. CSS biasa juga diartikan sebagai suatu teknik penulisan kode untuk memperindah dan mempermudah dalam pengkodean HTML dengan tujuan untuk memperindah tampilan situs.

Beberapa Keuntungan dari menggunakan CSS adalah pertama, memisahkan presentasi sebuah dokumen dari conten dokumen itu sendiri. Kedua, mempermudah dan mempersingkat pembuatan dan pemeliharaan dokumen web. Dan yang ketiga adalah mempercepat proses rendering/pembacaan HTML.

Contoh format dasar penulisan CSS yaitu,

1. Misalkan untuk menulis sebuah dokumen web yang berjudul ‘Mari Belajar CSS’ maka ditulis dalam halaman notepad dengan format :

Mari Belajar CSS

Maka dalam dokumen web akan tertulis

Mari Belajar CSS

2. Untuk mengisi dokumen web tersebut, maka teksnya di tulis diantara teks . Berikut contoh penulisan formatnya:

…

Hello

dan dalam dokumen web tampilannya sebagai berikut :

Hello

Ada 3 cara untuk memasang CSS pada dokumen HTML yaitu dengan menggunakan External Style Sheet (file CSS berbeda dari file HTML), Internal Style Sheet (Kode CSS dipasang di dalam tag head HTML) dan Inline Style Sheet (Kode CSS langsung dipasang di tag HTML, tidak direkomendasikan). Berikut adalah contoh format dengan menggunakan,

Tanpa CSS

Belajar CSS

Internal CSS

Belajar CSS

External CSS

Jika kita menggunakan teknik external CSS, maka kita perlu membuat file css, misalkan kita membuat file dan simpan dengan nama style.css dan isikan kode berikut:

h1 { font-family: verdana; }

Beberapa macam CSS

è CSS Background

Property background

1. Background-color

Contoh:

Body {

Background-color : green;

}

2. Background-Image

Contoh:

Body {

Background-image : url(gambar1.jpg);

}

3. Background-attachment

Body {

Background-attachment : scroll;

}

4. Background-Repeat

Body {

Background-repeat : repeat;

Background-image : url(image/gambar1.jpg);

}

5. Background-position

Body {

Background-repeat : no-repeat;

Background-image : url(image/gambar1.jpg);

Background-position : bottom center

}

Contoh:

Format penulisannya :

Hello, Contoh Body

maka tampilan dalam dokumen web

è CSS Font

Property Font

1. Font-family

P {

Font-family : Arial,Helvetica;

}

2. Font-size (satuan em,pt,px,mm,cm,%)

P {

Font-size : 24em;

}

3. Font-style (nilai : oblique,italic,normal)

P {

Font-style : oblique;

}

4. Font-variant (nilai : normal,small-caps)

P {

Font-family : Arial,Helvetica;

}

5. Font-weight (nilai :normal,bold,bolder,lighter,100-900)

P {

Font-weight : bolder;

}

è CSS Teks

Property teks

1. Color

P {

color :red;

}

2. Teks-align (nilai left,right,center,justify)

P {

text-align :justify;

}

3. Text-decoration (nilai : none,underline,overline,line-through,blink)

P {

Text-decoration verline;

}

Contohnya :

u menggunakan tag ..

u {color=red}

Mengapa kita harus bertengkar
sedangkan kicau burungbernyani merdu

Atau dengan menggunakan format,

Mengapa kita harus bertengkar
sedangkan kicau burung bernyanyi merdu

Maka hasilnya dalam dokumen web seperti di bawah ini

u Menggunakan tag =under line dan tag = italic diberi efek baru, yaitu warna merah hurufnya kemudian tag = bold, diberi efek warna hijau

Maka formatnya,

P: mengapa jika kita anggapsuatu pekerjaanitu mudah maka pekerjaan itu akan beneran menjadilebih mudah?

J: karena itu merupakansugestiterhadapdiri kita sendiri

Dan pada dokumen web akan tampil seperti dibawah ini

4. Text-transform (nilai : none,capitalize,uppercase,lowercase)

P {

Text-transform : capitalize;

}

5. Letter-spacing

P {

letter-spacing : 20px;

}

6. Teks-indent

P {

Text-indent : 50px;

}

è CSS List

Property list

1. List-style-type (nilai : disc,circle,square,lower-roman,upper-roman,none,lower-alpha,upper-alpha)

Ul {

List-style-type : disc ;

}

2. List-style-image (nilai : url,none)

Ul {

List-style-image : url(gambar1.jpg) ;

}

3. List-style-position (nilai : inside,outside)

Ul {

List-style-position : inside;

}

è CSS Border

Property Border

1. Border-style (nilai : none,dotted,dashed,solid,double,groove,ridge,inset,outset).

b1 {

Border-style-type : groove ;

}

2. Border-bottom-style (nilai : none,dotted,dashed,solid,double,groove,ridge,inset,outset).

b1 {

Border-bottom-style : groove ;

}

3. Border-bottom-width ().

b1 {

border-bottom-width :10px;

}

4. Border-bottom-color ()

b1 {

border-bottom-color :red;

}

semangat

77 — Thu, 10 Sep 2009 04:00:04 +0000

mulai sekarang kita harus lebih giat lagi………. mulai dari belajar, makan minum, plus vitamin. tapi yang intinya ya… belajar, di jenjang terakhir bangku SMA ini kita harus lebih konsntrasi lagi belajarnya. tapi jangan lupa sama tugas-tugas segudang yang telah menanti. buat temen-temen, jangan loyo… tetap harus semangat. karna kita sudah dewasa jadi harus tau mana yang baik buat kita da mana yang tidak baik key. tetap S E M A N G A T !

nb: nie di posting buat nambah postingan aja …………………………………………………………………….. khan yang penting tetap S E M A N G A T !

pilem mbosenin

77 — Wed, 20 Feb 2008 13:02:00 +0000

Pernah punya pikiran yang aneh2 gak. Misalnya km tu anak angkat atau anak pungut???. Hayo , jgn mikir yang anaeh aneh ya!!!!!!!!!!!!. Tapi kalau kita sampai bisa mikir kayak gitu berarti, jangan terlalu banyak nonton sinetron dunk. Karena pada umumnya sinetron yang punya cerita kayak gitu yah?, sinetron striping. Mungkin buat mempertahankan reting yang berada diatas.Tapi malah buat penonton bosan. Kalo boleh nanya nieh, bosen gak sich dengan sietron Indonesia yang mbuletisasi?????????????punya ide bikin film gimana?????. Buat pencinta TV khususnya pilem eh Film commend yuz, yah walau dikit tp berisi dunk

Ujian TIK gimana ya?

77 — Tue, 22 Jan 2008 02:40:00 +0000

Buat aq soal TIK gak sulit sich, tapi kok bisa remidi ya? mungkin karena gak belajar aja ato mungkin masih bingung aja. Tapi menurut saya sich lebih dominan bingung karena gak belajar. Dan pada saat ulangan semester kemarin juga kebingungan, ya walaupun udah belajar. Lagi pula yang saya pelajari juga gak ada yang keluar dalam soal. Jadi saya harus mencari jejak jawaban dengan panggil sana sini. Walau udah usaha ya tetep apa yang mau dikata kalau udah gak bisa ya udah. Kalau hasilnya dibawah standart ya udah khan masih banyak kesempatan lain kali. Iya khaaan

pupuk pertahananmu

77 — Mon, 24 Dec 2007 06:32:28 +0000

met puasa yah jangan lupa kalo sahur yang banyak biar gak kelaparan. pupuk terus pertahananmu (ya salah satu dengan mengisi perut sebelum imsyak) padahal khan arus memperkuat iman ya. buat perang nanti (terlalu mendramasitir dech). semanagt yach gak boleh nyerah sampe’ titik darah penghabisan loh

salam sayang

77 — Wed, 03 Oct 2007 06:07:33 +0000

gak tau kenapa hari ini aku kangen banget ma’ alm. ibu q (kakak dari ayah q). sebelum beliau meninggal pernah janji ma’ aq tuk jalan2 ke surabaya karena aq dah lima tahun gak pulang. tapi kok ia malah pergi gak kembali2 aq berdoa semoga ia bisa tenang di sana , di ampuni segala dosanya dan selalu ditemani dengan senyuman dan kasih sayang dari kami untuknya, ammmieeeeeeeeeeeeen. salam sayang ku untuk ibu q yang terbaik dan tersayang makasih dah ngasuh, nyayangin dan merawat q. kami disini selalu merindukanmu, ‘maaf aq gak bisa ziarah ya’.

gara2 lapar sholat q dipersingkat

77 — Thu, 20 Sep 2007 06:49:09 +0000

gila bener2 gila masa’ kemarin pas sholat maghrib berjamaah cuman dua rakaat aja wah bener2 ngaco mungkin karena dah gak tahan nahan laper ampe’ sholat maghrib di persingkat jadi 2 rakaat he3x. belum sampe disitu aja ceritanya masih nyambung ampe terawih loh. waktu sholat terawih juga gara2 nungguin ayah jadi telat ke mesjid dech, gara2 telat yah gak kebagian tempat wah wah mujur amat sich hari ini. gara2 gak kebagian tempat didalam mesjid yah jadi sholat di luar dech ( alhamdulillah ademan diluar kok).

Halo dunia!

77 — Mon, 20 Aug 2007 03:31:19 +0000

Welcome to WordPress.com. This is your first post. Edit or delete it and start blogging!