Selasa, 10 Mei 2016

Pemahaman CSS dan cara kerja CSS



Pengertian CSS Dasar

Sebelum mempelajari CSS anda harus mengetahui HTML DASAR  terlebih dahulu . CSS singkatan dari Cascading Style Sheet . CSS merupakan sebuah bahasa pemrograman yang fungsinya untuk menstrukturkan komponen-komponen web yang beragam sesuai dengan keinginan kita.

Fungsi utama css adalah merancang, merubah, mendisain, membentuk halaman wesite(blog juga website). dan isi dari halaman website adalah tag-tag html, logikanya css itu dapat merubah tag-tag html(yang sederhana) sehingga menjadi lebih fungsional dan menarik.

cara kerja css

cara kerja css itu sangatlah mudah, kita hanya perlu menulis stylenya(selector id dan class tersesuaikan) maka secara otomatis akan bekerja pada document html

syntax atau aturan penulisan

aturan penulisan css itu sangatlah simple contohnya seperti ini
selector_id{
property:value;
}
selector_class {
property:value;
}
tag_html {
property:value;
property_lagi:valuenya; /*sobat bisa menambah beberapa property lagi, yah kira-kira sesuai kebutuhan*/
}
keterangan
  • ketiga aturan diatas hanya kita gunakan sesuai kebutuhan saja
  • sebenarnya masih ada yang lain, berhubung ini hanya pemahaman dasar jadi yang dibahas yang penting-penting saja
  • contohnya, diakhir tulisan ini
keterangan syntax
  • diawali dengan selector atau tag_html
  • kemudian tambahkan { (buka kurung karawal)
  • abis itu barulah kita tulis propertynya
  • setelah menulis propertynya lanjutkan dengan : (titik dua) anggap seperti sama dengan pada atribut html
  • setelah : (titik dua), masukan valuenya
  • sehabis menulis value tambahkan ; (titik koma), fungsinya untuk mengakhiri property dan value
  • next, jika kita tidak menambahkan property:value lagi
  • akhiri dengan } (tutup kurung karawal) fungsinya munutup selector

property dan value css

ini adalah bagian terpenting dalam css, tanpa selector dan value sama saja dengan mandi tanpa air(kalau tanpa sabun masih mending :) ).
misal kita ingin merubah warna text, property yang kita gunakan adalah color: sedangkan valuenya bisa rgb, hex color atau color.
misal lagi kita ingin merubah ukuran font, property yang kita gunakan adalah font-size:, sedangkan valuenya bisa length(px). misalnya lagi kita ingin merubah warna latar belakang, maka property yang kita gunakan adalah background-color:sedangkan valuenya bisa rgb, hex color atau color.
contoh
h1{
color ; red;
background-color : green;
font-size : 60px ;
}
keterangan
  • yang berwarnah merah adalah property
  • sedangkan yang berwarna biru adalah valuenya
  • setiap peroperty sudah memiliki value masing-masing, jadi jika sobat menggunakan property margin lalu valuenya #fff(white) itu sama dengan salah besar
  • contohnya, diakhir tulisan ini
  • property css itu sangat banyak, dari sekian banyak property itu kita ngga mesti menggunakan semuanya(ya kira-kira sesuai kebutuhan)

letak penulisan css

untuk belajar css, sahabat harus bisa html dulu(minimal tau penulisan serta cara karjanya).
contoh dibawah adalah penulisan css dalam internal style
<html>
<style type="text/css">
disini tempat menulis code css, ada beberapa cara untuk menulis css, yang ini adalah internal style
</style>
<body>
<!-- tag tag html disini -->
</body>
</html>
keterangan
  • rekomendasi dari www.w3schools.com ialah penulisan style css terletak antara <head> dan </head>
  • namun, dimanapun sobat menulis kode cssnya, browser tetap akan menjalankan css tadi jika syntaxnya benar, misal letaknya di <body> disini </body>
  • sekarang itu browser sudah pada canggih-canggih beda ketika netscape masih berdiri
komentar css
sama seperti html, kita juga bisa menulis komentar pada css, tahukan fungsi komentar itu
penulisan komentar css itu seperti ini /* disini komentar css */
keterangan
  • diawali dengan /(garis miring)
  • kemudian *(bintang) atau shift + 8
  • abis itu komentar anda
  • setelah memasukkan komentar
  • sebagai penutupnya tambahkan *(bintang) atau shift + 8
  • disusul dengan /(garis miring)
  • lihat contoh
<style type="text/css">
body{
color:red;/*komentar css*/
background:lime;/*komentar css*/
/* bisa juga disini komentar css, color adalah property css, sedangkan blue adalah value. fungsi dari komentar adalah untuk menudahkan kita dalam mengingat code yang kita tulis, dimana browser tidak akan mmenampilkan/menjalankan komentar yang kita tulis */
}
</style>
<body>
<!-- tag tag html disini -->
</body>
</html>

tidak berpengaruh, baku

contoh ini
<style type="text/css">
body{
color:
red;
background:lime;
}</style>
dan contoh yang ini
<style type="text/css">body{color:blue;background:lime;}</style>
sama saja
keterangan
  • contoh yang diatas itu bernilai sama
  • atau css itu ngga ngaruh terhadap enter(line break) ataupun spasi
  • yang perlu diperhatikan hanyalah karakter ini { : ; }
  • kita hanya akan menggunakan spasi jika property dan valuenya ditulis dengan shorthand
contoh dan cara kerja css
di bawah ada beberapa dua contoh penggunaan css

contoh 1(simple)

<html>
<style type="text/css">
body{/*value default dari tag <body> adalah warna latar putih, dengan css kita bisa merubahnya*/
background:lime;/* warna latar belakang */
padding-left:60px;/* jarak kiri*/
}
h1{/*dengan ini kita merubah nilai default tag <h1> sesuai dengan property yang kita tambahkan */
color:red;/* warna */
font-family:Times, serif;/* font family*/
font-style: italic;/* font style*/
font-weight: bold;/* font weigt */
font-size: 30px;/* ukuran font*/
}
p{
color:blue;/* warna*/
font-family:arial;/* font family*/
font-style: normal;/* font style*/
font-weight: bold;/* font wight*/
font-size: 50px;/* ukuran font*/
}
</style>
<body>
<h1>ini adalah judul </h1>
<p>ini adalah paragraf</p>
</body>
</html>
untuk menjalankan codenya
  • copy kode diatas
  • buka program notepad
  • paste
  • lalu save as(pilih all files) dengan nama belajarcss.html(pastikan ekstensi filenya adalah [dot]html)
  • setelah itu jalankan menggunakan browser pavorit anda(ff, ie, opera).
  • setelah hasilnya dilihat, coba edit masing-masing property valuenya yang terletak antara : dan ;
  • simpan
  • kemudian lihat hasil editan sobat

contoh2(sedikit rumit)

perhatikan markup style berikut
<html>
<head>
<title>contoh2 css</title>
<style type="text/css">
/*misal tag body*/body{/*style ini untuk body*/
background-color:pink;/* warna latar belakang body pink*/
margin:0 auto 10px auto;/* jarak-luar atas 0, kiri dan kanan auto, sedangkan bawah 10px */
padding:5px;/* jarak/batas dalam masing-masing 5px*/
width:800px;/* lebar 800px*/
}
/* ini adalah komentar css */
#pembentuk-headernya{/*style ini untuk pembentuk header*/
height:200px;/* tingginya 200px*/
clear:both;/*fungsi ini agar agar ruas kanan-dankiri tidak bisa diisi dengan bidang lain */
margin:0 auto;/*jarak luar atas bawah 0, kiri-kanan auto */
background-color:white;/*warna latar belakang putih */
-moz-border-radius-topright:10px;/* style ini khusus untuk firefox, fungsinya untuk membuat lengkungan*/
-moz-border-radius-topleft:10px;/* style ini khusus untuk firefox, fungsinya untuk membuat lengkungan*/
/*ukuran text*/font-size:40px;
color:blue;/*warna text*/
}
/*bagian header selesai*/
/* ini adalah komentar css */
#sidebar-kiri{/*style ini untuk sidebar kiri */
min-height:1000px;/* tinggi minimal*/
float:left;/*menekan kekiri */
width:200px;/*lebar 200px */
margin:10px 0;/*jarak luar atas-bawah 10px, kiri-kanan 0 */
background-color:white;/* warna latar belakang putih*/
-moz-border-radius-topleft:10px;/* style ini khusus untuk firefox, fungsinya untuk membuat lengkungan*/
/*ukuran text*/font-size:60px;
color:red;/*warna text*/
}
/*bagian sidebar-kiri selesai*/
/* ini adalah komentar css */
/*mulai badan utama*/
#badan-utamanya{/*style ini untuk badan utama, atau yang terletak di tengah*/
min-height:1000px;/* tinggi minimal*/
float:left;/* menekan kekiri*/
width:400px;/* lebar 400px*/
margin:10px;/*jarak luar masing-masing 10px */
background-color:white;/*warna latar belakang putih */
}
#badan-utamanya .isinya{/*style ini untuk isi badan*/
/*style ini untuk isi badan*/
margin:10px;/* jarak luar masing-masing 10px*/
/*ukuran text*/font-size:55px;
color:green;/*warna text*/
}
/* ini adalah komentar css */
/*mulai sidebar kanan*/
#sidebar-kanan{/*style ini untuk sidebar kanan*/
min-height:1000px;/* tinggi minimal*/
float:right;/* menekan ke kanan*/
width:180px;/* lebar 180px*/
margin:10 0 0 0;/*jarak luar atas 10, kiri-kanan-bawah 0 */
background-color:white;/*warna latar belakang putih */
-moz-border-radius-topright:10px;/* style ini khusus untuk firefox, fungsinya untuk membuat lengkungan*/
/*ukuran text*/font-size:40px;
color:silver;/*warna text*/
}
/* ini adalah komentar css */
#pembentuk-footer{/*style ini untuk pembentuk footer atas, saya membuat tiga footer widget*/
clear:both;/*fungsi style ini agar ruang kiri-kanan tidak bisa diisi*/
background-color:white;/*warna latar belakang*/
/*ukuran text*/font-size:20px;
color:orange;/*warna text*/
}
#pembentuk-footer .misalwidgetnya{/*style ini untuk widget dalama footer*/
float:left;/*menekan ke kiri-atas*/
width:32%;/*lebarnya 32%, jika lebar tag sebelumnya 1000px, maka lebar ini menjadi 320px*/
min-height:300px;/*tinggi minimal*/
background-color:pink;/*warna latar belakang*/
margin:5px;/*jarak luar masing-masing 5px */
}
/* ini adalah komentar css */
#by-indam{/*style ini untuk yang paaaaaaaaaaaaaaaaaaaaaaaaling bawah, ituloh yang titititittititik*/
clear:both;/*fungsi style ini agar ruang kiri-kanan tidak bisa diisi*/
min-height:40px;/*minimal tinggi 40px */
margin:10px auto;/* jatak luar atas dan bawah 40px, kiri-kanan auto*/
background-color:white;/* warna latar belakang putih*/
-moz-border-radius-bottomright:10px;/*style ini hanya untuk firefox */
-moz-border-radius-bottomleft:10px;/*style ini hanya untuk firefox */
}
#by-indam p{/*style ini untuk tag p dalam tititititiititittitiitik*/
text-align:right;/*text rata kanan */
margin:0;/*jarak luar masing-masing 0 */
padding:5px 10px;/* jarak dalam atas-bawah 5px, kiri-kanan 10px*/
}
/* ini adalah komentar css */
</style>
</head>
<body>
<div id="pembentuk-headernya">
header
</div>
<!--------->
<!-- dari sini sidebar kiri ------------->
<div id="sidebar-kiri">
sidebar kiri
</div>
<!-- //sampai disini sidebar kiri ------------->
<!--------->
<!-- dari sini badan utama -->
<div id="badan-utamanya">
<div class="isinya">
badan post
</div>
<!-- //sampai disini isi badan ------------->
</div>
<!--------->
<!-- ////sampai pembentuk badan utama -------------->
<!--------->
<!-- dari sini sidebar kanan -->
<div id="sidebar-kanan">
sidebar kanan
</div>
<!--// //sampai disini sidebar kanan ------------->
<div style="clear:both;/* */"></div>
<!--------->
<!-- dari sini footer pertama/atas------------->
<div id="pembentuk-footer">
<!-- dari sini widget dalam footer atas ---->
<!--------->
<div class="misalwidgetnya">
footer kiri
</div>
<!--------->
<div class="misalwidgetnya">
footer kanan
</div>
<!--------->
<div class="misalwidgetnya">
footer tengah
</div>
<!--------->
<div style="clear:both;/* */"></div>
</div>
<!--------->
<div id="by-teguh">
<p>yah, seperti inilah tampilanya, simple kan? silakan edit untuk belajar. salam</p>
<!---------></div>
</body>
</html>
untuk menjalankan codenya
  • copy kode diatas
  • buka program notepad
  • paste
  • lalu save as(pilih all files) dengan nama belajarcss2.html(pastikan ekstensi filenya adalah [dot]html)
  • setelah itu jalankan menggunakan browser pavorit anda(ff, ie, opera).
  • setelah hasilnya dilihat, coba edit masing-masing property dan valuenya yang terletak antara : dan ;
  • dari /* sampai */ adalah komentar css
  • simpan
  • kemudian lihat hasil editan sobat
bandingkan jika ngga menggunakan css, coba hapus semua code antara
<style type="text/css"> sampai </style>
  • simpan
  • lalu lihat hasilnya
  • nah, gimana sudah tahukan fungsi css itu?
  • saya harap kita semua tahu(minimal apa itu css)
untuk belajar alangkah baiknya jika sobat sedikit berani mengutak-atik blog sendiri!

bagaimana cara edit css wordpress

  • appearance
  • pilih editor
  • klik style.css(biasanya ada style lain, tergantung themes)
  • coba edit valuenya yang terletak antara : dan ;

bagaimana cara edit css blogspot?

  • langsung ke edit html
  • cari <b:skin> sampai </b:skin>
  • itu adalah style css pada blogspot
  • coba edit valuenya yang terletak antara : dan ;
mungkin sobat bertanya fungsi dari text yang berwarnah merah ini
#misal{
property:value;
property:value;
property:value;
}
.misal{
property:value;
property:value;
property:value;
}
tag_html{
property:value;
property:value;
property:value;
}
  • anggap saja itu adalah bentuk yang akan sobat ubah, misal #sidebar, #header, #footer.
jadi misal sobat ngin merubah sidebar, cari saja seperti ini
#sidebar{
property:value;/*edit valuenya, untuk merubah bentuk dan tampilan*/
property:value;
property:value;
}
.sidebar{
property:value;/*edit valuenya, untuk merubah bentuk dan tampilan*/
property:value;
property:value;
}
  • hal yang sama berlaku untuk #header, footer, sidebarleft-right, dan lain-lain
  • sebenarnya yang berwarnah merah itu adalah selector(mungkin akan kita bahas kedepanya)
  • selector_id_maupun_class(text merah) itu ngga mesti berbasa inggris(sidebar, header, footer) yang terpenting adalah nilai atribut id dan classnya sesuai dengan style yang sobat tambahkan
  • misal
    • <div id=”sidebar”
    • <div id=”header”
    • <div id=”footer”
    • <div class=”sidebar”
    • <div class=”footer”
  • oia, saya pernah membuat template blogspot berbahasa indonesia(selectornya) untuk yang pengen belajar bisa menggunakan tempalte itu, downloadnya di blogtempalte4u.com dan di zoomtempalte.com coba cari template dengan nama slow pink white(itupun kalau mau)
tambahan
  • ada beberapa sahabat saya yang mengatakan css itu rumit, sebenarnya sih ngga rumit hanya saja dia(sahabat saya) ngga paham property css, jadi dalam belajar css, sobat juga harus paham fungsi masing-masing property serta value css itu sendiri
  • jika sobat ingin menguasai css, alangkah baiknya jika codenya diketik pakai jari(usahakan hindari copy code)
  • selalu perhatikan karakter ini { : ; }
  • gunakan editor code yang simple, untuk menulis code css sebaiknya gunakan notepad++(downloadnya cari di google free). jika sobat punya uang bisa menggunakan dreamweaver(not recoment)
  • browser, sebaiknya gunakan firefox untuk melihat hasil editan. ini karena firefox menggunakan standard yang direkomendasikan oleh www.w3schools.com
  • cobalah membuat website statis dengan css, jangan cuma ngedit. sobat kan punya komputer dan tanpa koneksi internetpun kita bisa belajar css
  • jika punya waktu luangkan waktu anda untuk ngedit css blog anda sendiri, css ini sangat mengasikan apalagi jika digabung dengan htmldom dan dinamic html(dhtml)
semoga bermanfaat
Diposting oleh di
Label: