Tutorial dan trik-tips blog: Dasar CSS - Blog tutorial dan trik-tips

Browse » Home » CSS » Dasar CSS

Friday, June 26, 2009

Dasar CSS

Taukah Anda apa itu CSS (Cascading Style Sheet) ?, CSS adalah bahasa scripting untuk memformat tampilan website secara keseluruhan. Misalnya Anda ingin mengatur jenis dan ukuran huruf, background, posisi element dan sebagainya. Sebagai contoh kita akan memformat tag p (parapraph) keseluruhan pada satu element dengan menggunakan cara HTML seperti ini <p font="tahoma">text</p>. Akan lebih efisien lagi jika kita memformat tag p dengan menggunakan CSS agar tidak terlalu rumit. Dan Anda juga bisa menyusun element layout dengan CSS tanpa harus menggunakan table yang menurut saya terlalu rumit dalam codingnya.
CSS juga bisa di akses oleh bahasa pemrograman, misalkan javascript, PHP dll.

Pengguna'an CSS ada 3 cara yaitu

Langsung disisipkan didalam tag <head></head>. Untuk menyisipkan di dalam tag head harus diawali dengan tag <style type="text/css"></style>
Menggunakan file external, artinya script css ditulis dalam file tersendiri dengan akhiran .css. dan sisipkan file ini di dalam tag <head> dengan cara seperti ini <head><link rel="stylesheet" href="css/style.css" type="text/css" /></head>
Langsung pada tag yang bersangkutan, misalkan <div style="style_nya"></div>

Ada aturan dalam penulisan CSS ini, CSS ditulis dalam bentuk block-block script yang disebut style. Dan Saya akan mencoba menerangkan lebih detail lagi dalam cara menuliskan CSS.

Menggunakan tanda # sebagai awalan style, contohnya

#gaya{
background-color:blue;
}

tanda ini berarti untuk menggunakan style ini harus menggunkana atribut id, dan setiap tag pasti memiliki atribut id, misal <div id="gaya">ini teks</div>. Sifat dari id adalah unik, tidak boleh ada elemen yang memiliki id yang sama, makanya style ini hanya bisa digunakan sekali.
Menggunakan tanda dot (.) sebagai awalan style, contohnya

.gaya{
background-color:blue;
}

tanda ini berarti untuk menggunakan style ini harus menggunakan atribut class, setiap tag pasti memiliki atribut class. Misalkan <div class="gaya">ini teks</div>. Sifat dari class adalah tidak unik, artinya dalam 1 dokumen HTML boleh memiliki lebih dari 1 class yang sama. Dengan menggunakan tag
Tanpa tanda, tetapi langsung mengarah pada tag HTML, misalkan

div{
background-color:blue;
}

artinya semua tag div akan dikenai style tersebut
Turunan, baik # maupun dot (.) bisa menurunkan style. Style anak juga akan memiliki style dari induk.
Contohnya

#induk .anak{
background-color:red;
}
cara menggunakannya
<div id="induk">
<div class="anak">bla_bla</div>
</div>

artinya class anak adalah turunan dari id induk. Jika id induk dihilangkan, maka class anak tidak akan bekerja.

Penggunaan tanda # atau dot(.) tergatung pada kasus yang dihadapi, dan sangat bervariasi. Awalnya binggung cara menggunakanya, kayaknya sama saja sih, tetapi jika anda sering menggunakannya, ada saat yang tepat apakah anda akan menggunakan tanda # atau dot(.) atau malah turunan.

Sedikit tentang dasar CSS dan semoga dapat membantu Anda yang pastinya CSS tidak bisa ditinggalkan dalam pengolahan halaman web dan browser juga sudah ada yang membuat script CSS yang hanya support dengan browser tersebut misalnya Mozilla Firefox, dll.

dirangkum dari berbagai sumber dan disederhanakan. salah satunya adalah http://bimoweb.com/dasar-css-scripting.html

52 comments:

Bermanfaat Banget nech Mas...
LAma fga Update ni Blog?
Stop Dreaming Start Action said...Seperti Diatas..Pada June 26, 2009 4:38 PM: My first coming ,..
success for you!
Blogger Dreaming said...Seperti Diatas..Pada June 26, 2009 4:39 PM: ketigaxxx
gagal pertamaxxxxxxxx
dah lama neh ditungguin artikelna mas anas
iqbal said...Seperti Diatas..Pada June 26, 2009 6:00 PM: mulai nulis lagi nie mas, succes ya...
O iya..ijin copas ya...

<"kumpulan tutorial blog">
kumpulan tutorial blog said...Seperti Diatas..Pada June 26, 2009 6:25 PM: bgus nih, buat belajar. n Cuma mau nanya nih bos, blogroll nya dimana yah.. O:
chandra said...Seperti Diatas..Pada June 27, 2009 6:03 AM: wah tips dan trik baru lagheee nih
wah mas kemana aja baru keliatan lagheeee, welcome back yah
harry seenthing said...Seperti Diatas..Pada June 27, 2009 8:04 AM: mantap mas. bener-bener bisa buat belajar
DuniaPiyen said...Seperti Diatas..Pada June 28, 2009 1:11 AM: Kenapa tutorial CSS gini langka banget ya mas? kebanyakan cuma HTML doang
wisata seo sadau said...Seperti Diatas..Pada June 30, 2009 7:18 AM: Thanks, saya butuh juga artikel dasar kaya' ini. Susah juga dapat yang gini
Blogging Tutorial said...Seperti Diatas..Pada July 1, 2009 8:23 PM: thanks u bos tuk tutorialnya css, besok kupas lagi dong tentang css, biar ane sering maen2 disini health love money and family
dhimas said...Seperti Diatas..Pada July 2, 2009 10:33 AM: thank's mas
Terhebat Selalu said...Seperti Diatas..Pada July 5, 2009 7:36 PM: kok ngak pernah posting lagi mas. Kutunggu postingan barunya lho...
tengku nauf said...Seperti Diatas..Pada July 9, 2009 2:16 AM: penyegaran kembali.. mengenai CSS
subagya said...Seperti Diatas..Pada July 11, 2009 6:05 AM: mantap kode cssnya, materi kuliah yang sangat berguna
Panca said...Seperti Diatas..Pada July 11, 2009 10:54 PM: wow......ini ilmu baru yah kang
nyegik said...Seperti Diatas..Pada July 15, 2009 9:25 AM: materiny bagus..skalian lg mw belajar CSS...
fish oil side effects said...Seperti Diatas..Pada July 25, 2009 6:09 PM: visit my site
dalimunthe said...Seperti Diatas..Pada July 26, 2009 5:43 AM: ada bagian keterangan saya dapat disini yang sebelumnya saya cari..:) ma kasih bos...
bayunature said...Seperti Diatas..Pada August 7, 2009 11:47 PM: thak's atas postingannya, aku pemula di internet, skrng aku ngerti apa itu CSS. blogku benar2 simple habis blm bisa sih. berbagi ilmu berbagi rejeki
Peluang Bisnis Internet said...Seperti Diatas..Pada August 8, 2009 1:42 AM: Oke2... Thanks Semua,,,
Anasku said...Seperti Diatas..Pada August 16, 2009 5:19 AM: wkwkwkwkwkwkwkw
Chiwank said...Seperti Diatas..Pada August 18, 2009 1:21 PM: terimaksih banyak sobat,.

jadi tambah lagi yang pengin di ubah,.
butiku palace said...Seperti Diatas..Pada August 25, 2009 10:35 AM: Artikel yang anda posting bermanfaat sekali, saya tunggu posting
berikutnya.. Mantap!

Email : duniamaya5@gmail.com
Kusuma Putra said...Seperti Diatas..Pada August 28, 2009 3:24 AM: Artikel yang anda posting bermanfaat sekali, saya tunggu posting
berikutnya.. Mantap!

Email : duniamaya5@gmail.com
Kusuma Putra said...Seperti Diatas..Pada August 28, 2009 3:28 AM: bagusan pakai penulisan seperti apa mas...
loading websitenya cepetan yg mana..
ernest said...Seperti Diatas..Pada September 7, 2009 11:58 AM: """dapet ilmu lagi... ;), thanks ..

boleh bertukar linknya.., thanks b4

salam kenal by. danyexel
danyexel said...Seperti Diatas..Pada September 10, 2009 6:05 AM: Wokeh.. langsung dicoba, salam kenal mas
Traveller said...Seperti Diatas..Pada September 26, 2009 10:27 PM: Wah kemana bro..koq jarang update.:)
Kenali dan Kunjungi Objek Wisata di Pandeglang said...Seperti Diatas..Pada September 30, 2009 6:31 AM: Masih dlm belajar CSS.. enakan html gampang
Just For Laugh said...Seperti Diatas..Pada October 4, 2009 5:18 AM: Tutorial yang menarik nih mas. Thanks ya.
kitchenaid parts said...Seperti Diatas..Pada October 13, 2009 12:47 AM: masih belum paham benar tentang ilmu html
rental mobil di surabaya said...Seperti Diatas..Pada October 16, 2009 9:51 PM: masih newbie neh tentang html.
pasang iklan gratis said...Seperti Diatas..Pada October 16, 2009 9:57 PM: thanks buat trik-tipsnya...
dony said...Seperti Diatas..Pada October 18, 2009 2:21 AM: tadinya saya tidak tahu..tapi setelah baca artikel anda jadi tahu..hehehe
mau ajakin tukeran link nih..minat gak ya?

kaos game
pen camera said...Seperti Diatas..Pada October 25, 2009 7:19 PM: link blog anda sudah ada di blog saya
:)
visit
http://gieterror.blogspot.com/
Gie said...Seperti Diatas..Pada November 1, 2009 7:37 PM: i'm a fan keep the CSS language posts coming
fish oil for dogs with allergies said...Seperti Diatas..Pada November 4, 2009 4:31 PM: memang bantep ilmu css nya baru tau saya
Mbah Gendeng said...Seperti Diatas..Pada November 7, 2009 7:23 AM: halo mas, wakh kemana aja nih?, aku dah launcing lagi mas, main ya......
JR said...Seperti Diatas..Pada November 7, 2009 8:15 AM: nice tips..
lia said...Seperti Diatas..Pada November 10, 2009 12:41 AM: maksaih pencerahannya mas :)
mas doyok said...Seperti Diatas..Pada November 10, 2009 1:00 AM: wah.. mantab nih info sharingnya. Boleh di-share ya, Mas ;)
hanum said...Seperti Diatas..Pada November 20, 2009 2:34 AM: wuih kren nh
harus sring otak atik htm ll ih
newbi said...Seperti Diatas..Pada November 22, 2009 7:52 AM: infonya keren bang
thansk
nada said...Seperti Diatas..Pada November 22, 2009 7:55 AM: thanx bang, mantap dan makxxyoouueess
rumah blogger said...Seperti Diatas..Pada November 23, 2009 6:46 AM: wah nambah ilmu lagi nich, terima kasih share ilmunya mas
Sabirinnet said...Seperti Diatas..Pada November 23, 2009 6:48 AM: Owh gitu yah...

sama kyk yg diajarin guruku kemarin...

lebih enak pake CSS kalo mau edit font, dibanding HTML manual yg kasihnya 1-1
Facechan said...Seperti Diatas..Pada November 28, 2009 3:29 PM: Berguna Banget nih..makasih kang..:)
Ngobrol Seputar Bisnis Online said...Seperti Diatas..Pada December 2, 2009 2:01 PM: Siip..lengkap deh nih penjelasannnya.
Bocah said...Seperti Diatas..Pada December 2, 2009 2:04 PM: wow thanks infonya gan !!
RifkyPanzer™ said...Seperti Diatas..Pada December 5, 2009 8:02 PM: Artikel yg bagus u/ pemula spt aku.
Trm ksh.

salam.
kerja keras adalah energi kita said...Seperti Diatas..Pada December 9, 2009 11:08 AM: Wouw, tidak rugi datang ke blog ini. Membuka wawasan artikelnya. Makasih.
bali said...Seperti Diatas..Pada December 9, 2009 11:09 AM: Nice post.
Thanks.
Internet Business said...Seperti Diatas..Pada December 9, 2009 11:11 AM