Letak kode CSS | Belajar CSS
Menerus kan postingan aldi sebelumya, Tutorial belajar CSS sebelum lanjut aldi ingin mengingatkan jika kalian belum membaca postingan sebelumnya tentang langkah pertama belajar css silakan klik disini
langkah pertama belajar css . jika kalian sudah membaca tutorial belajar css pada postingan yang pertama, mari kita lanjut .
Pada kesempatan kali ini aldi akan menjelaskan kepada kalian belajar css dalam hal "dimana meletakan kode-kode css" pada template blog .mungkin di antara kalian yang sudah pernah membaca tutorial-tutorial tentang belajar css akan familiar dengan postingan aldi kali ini. meletakan css , yaa itulah langkah pertama untuk kalian dalam belajar css, bagaimana tidak jika kalian ingin belajar css tentunya kalian pun harus tahu cara meletakan kode-kode css itu pada template .
Mungkin di antara kalian ada yang sudah pernah membaca tutorial belajar css, dan pastinya kan sudah tahu dengan kata-kata External style sheet -Internal style sheet - Inline style . kebanyakan para blogger mania tidak tahu dengan kata-kata tersebut, walaupun mereka secara praktek sudah paham, akan tetapi masih ada saja kok yang tidak tahu dengan kata-kata tersebut .dalam hal ini kalian bagaikan perahu tanpa dayung . yaitu kalian hanya berlayar tanpa bisa di kendalikan . hehehe .maksudnya apa ya???? .. kalian mau tahu .. beneran pengen tahu ..??? jadi begini :
..nah iya begitu deh pokonya .. hehehe 
( gak jelas )Padahal jika kalian sudah mengerti ataupun sudah pernah belajar kode css pastinya kalian mengertikan dengan penempatan kode-kode css pada template blog. pastinyakan kalian sudah paham. oke deh kok aldi jadi muter-muter gini yaa .. langsung aja yuk belajar css , lihat tutorial belajar css di bawah ini :..
External style sheet
Pertama-tama mari kita belajar meletakan kode css dengan cara External style sheet .apa kelebihan menggunakan external style sheet ???? .. kelebihannya adalah dengan menggunakan cara penempatan kode css dengan cara ini adalah kalian dapat mengubah satu page lembar blog kalian tanpa mengubah page lembar lainnya, jadi intinnya dengan menggunakan cara penempatan kode css ini adalah hanya satu halaman saja yang akan kalian ubah tampilan akan tetapi kalian pun dapat mengubah dua tiga bahkan lebih dengan cara penempatan kode css ini .
Cara menggunakan penempatan External style sheet css ini hal perlu kalian tambahkan adalah kode <link> pada bagian header template .untuk tutorial belajar css kali ini intinya adalah kalian letakan kode <link> setelah kode <head> dan sebelum kode </head> . untuk menggunakan fungsi letak External style sheet css pada blog template kalian adalah dengan memanfaatkan link external pada page halaman kalian .untuk lebih jelasnya lihat contoh pem belajar an penempatan css ini:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
Dari contoh penempatan kode css di atas mungkin belumlah begitu jelas, akan tetapi inti dari letak kode css dengan menggunakan cara External style sheet ini, yaa seperti itulah .. pada dasarnya kode css itu tidak lah berisi kode-kode html. kode html hanya berada setelah kode <body> dan di akhiri dengan kode </body> . jadi cara untuk menggunakan fungsi External style sheet css ini, kira-kira adalah sama dengan cara menggunakan penempatan kode css yang seperti biasa kalian lakukan untuk mengedit kode-kode css pada template kalian untuk lebih memperindah tampilan website atau blog kalian .
untuk lebih jelasnya seperti inilah kira-kira jadinya :
a {color:#FFF;}
a :hover {color:Navy;}
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
a :hover {color:Navy;}
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
Dapat dilihat bahwa penulisan kode-kode css dengan cara External style sheet ini yaitu sama dengan kode-kode css yang biasa kalian edit pada template kalian. akan tetapi kelebihan menggunakan fungsi External style sheet ini adalah kalian dapat menerapkan fungsi css tersebut hanya pada satu page halaman . udah paham belum .. ??? jadi intinya adalah seperti yang telah aldi sampaikan tadi sebelumnya bahwa penempatan kode css dengan sistem External style sheet ini kalian dapat mengubah satu buah page halaman dengan menggunakan kode css tentunya .aldi rasa cukup untuk belajar sistem penempatan kode css dengan cara external style sheet nya . oke lanjut ..
Internal Style Sheet
Dalam belajar penempatan kode css selanjutnya adalah Internal Style Sheet, apa itu penempatan kode css dengan fungsi Internal Style Sheet ??? sebenarnya penempatan kode css dengan sistem internal style sheet ini digunakan untuk dokumen tunggal yang unik,maksud unik di sini adalah kode css yang secara langsung memang di buat oleh si pembuat kode css ini ( kalo dalam bahasa betawi nya .. emang dari sononya 
) , dalam hal belajar letak kode css dengan cara ini, kalian harus setidaknya paham dengan kode-kode css sistem unik . seperti "a"- "hr" -"p" -"body" dan lain-lain . jadi dalam menggunakan belajar sistem css internal style sheet ini kalian akan memasukan kode css yang ber type unik ke dalam kode <style>.
) , dalam hal belajar letak kode css dengan cara ini, kalian harus setidaknya paham dengan kode-kode css sistem unik . seperti "a"- "hr" -"p" -"body" dan lain-lain . jadi dalam menggunakan belajar sistem css internal style sheet ini kalian akan memasukan kode css yang ber type unik ke dalam kode <style>. Dalam peletakan kode css dengan sistem Internal style sheet ini adalah kalian harus menaruhnya dengan kode <style> dan di akhiri dengan kode </style> dan peletakannya pun berada setelah kode <head> dan sebelum kode </head>.untuk lebih jelasnya biar kalian tidak malah jadi bingung nantinya dalam belajar css , lihat contoh :
Kita dapat lihat bersama, di dalam meletakan kode css dengan fungsi Internal Style Sheet ini .kode yang kalian perlu tambahkan hanyalah kode <style type="text/css"> dan di akhiri dengan kode </style>. mungkin di antara kalian yang sering ngoprek-ngoprek template blog akan sering melihat kode-kdoe seperti ini bukan ??? hayooo ngaku. jika ya , berarti template blog kalian telah menggunakan sistem penempatan kode css dengan cara ini . betul ora son .
.
Inline Styles
Cara selanjutnya dalam belajar penempatan kode css adakah Inline style sheet, dalam menggunakan cara sistem kerja inline style sheet ini kalian akan kehilangan banyak keuntungan dari style sheet dengan mencampurkan konten dengan presentasi. akan tetapi keuntungan kalian dalam belajar penempatan kode css ini adalah penggunaanya yang hemat , jadi secara otomatis loading blog akan menjadi lebih cepat di karenakan fungsi kode css yang sedikit , (Gunakan metode ini untuk menghemat !!! )
Dalam hal belajar menggunakan metode letak kode css inline style sheet . kalian menggunakan atribut style dalam tag yang relevan. Atribut style dapat berisi properti CSS.untuk lebih jelasnya dalam proses belajar letak css dengan metode inline style sheet ini . lihat contoh .
<p style="color:blue;margin-left:20px"> Ini adalah paragraf. </p>
Dari contoh di atas dapat kita lihat bersama, bahwa atribut css<p> di gabungkan dengan properti css color dan margin . jadi hasil dari atribut css <p> tersebut akan menghasilkan seperti apa yang telah di terapkan di atas yaitu tulisan dengan paragraf<p> akan berwarna biru dan akan berjarak 20px ke kiri .mungkin kalian masih ada yang belum paham yaa .. jadi begini sistem kerja atribut di atas mungkin jika diantara kalian ada yang pernah membaca artikel / belajar kode css tentang color dan margin serta padding pastinya kalian akan paham dengan sistem kerjanya .
jadi begini, mungkin ini sedikit melenceng dari topik pembahasan ... tapi engga apa deh aldi tulis juga . fungsi margin dari contoh di atas maksudnya adalah margin-left yaitu jarak tulisan dengan tepi kiri atau jarak dari kiri dengan tulisan .. sementara untuk padding adalah jarak antara tulisan tersebut jika atribut berupa kotak maka padding adalah jarak antara garis border dengan apa yang ada di dalam kotak tersebut sementara jika atribut berupa kotak maka fungsi margin disini adalah jarak antar kotak dengan sisi kiri ataupun sisi lainnya. lihat gambar :
untuk lebih jelasnya nanti akan aldi postingkan artikel tentang margin dan padding ini deh .. mungkin engga lama lagi .
Keterangan Penempatan Metode-Metode di atas ...
Multiple style sheet
Multiple style sheet ini terjadi apabila internal style sheet berada dalam link external style sheet. dapat kita buktikan di sini , jika kalian menggunakan kode css dengan metode internal style sheet dan kalian meletakannya di dalam metode external style sheet , maka fungsi atribut-atribut yang ada di dalam internal style sheet akan di wariskan oleh metode external style sheet ..bingung yaa ??? loh kok bingung .. oke deh lihat contoh aja yukk .. biar belajar lebih semangat !!!
Pada contoh ini aldi menggunakan atribut h1 pada external style sheet :
Dan kali ini aldi akan menggunakan atribut h1 pada internal style sheet:
Jika halaman dengan internal style sheet juga link ke external style sheet,maka atrbut properti untuk h1 akan menjadi:
Dapat kita lihat bersama, bahwa internal style sheet mendapatkan warisan warna"color" dari external style sheet .nah itulah sistem kerja dari metode - metode di atas , jika kalian ingin belajar CSS sebaiknya itu dululah yang perlu kalian pahami . mungkin di antara kalian ada yang beranggapan bahwa cara-cara penempatan kode-kode di atas tersebut tidaklah penting . mungkin kalian benar .. atau mungkin kalian SALAH BESAR..bagaimana tidak , kalian sudah paham / familiar dengan kode-kode css akan tetapi kalian tidak paham dengan dasar-dasar penempatan kode css tersebut ..!!! sialnya dasar-dasar penempatan kode css tersebut adalah dasar dari pem belajar an kalian untuk menghasilkan kode tampilan html menjadi lebih menarik dengan sentuhan css .
Catatan: Jika link external style sheet ditempatkan setelah internal style sheet pada <head> HTML, maka external style sheet akan menimpa internal style sheet
untuk melihat tutorial-tutorial belajar CSS lainnya silakan kalian lihat pada bagian atas blog ini . atau mungkin kalian ingin belajar html terlebih dahulu ...??? sama seperti tutorial css . silakan kalian lihat pada bagian atas blog ini .. terimakasih .!!
<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
Kita dapat lihat bersama, di dalam meletakan kode css dengan fungsi Internal Style Sheet ini .kode yang kalian perlu tambahkan hanyalah kode <style type="text/css"> dan di akhiri dengan kode </style>. mungkin di antara kalian yang sering ngoprek-ngoprek template blog akan sering melihat kode-kdoe seperti ini bukan ??? hayooo ngaku. jika ya , berarti template blog kalian telah menggunakan sistem penempatan kode css dengan cara ini . betul ora son .
.Inline Styles
Cara selanjutnya dalam belajar penempatan kode css adakah Inline style sheet, dalam menggunakan cara sistem kerja inline style sheet ini kalian akan kehilangan banyak keuntungan dari style sheet dengan mencampurkan konten dengan presentasi. akan tetapi keuntungan kalian dalam belajar penempatan kode css ini adalah penggunaanya yang hemat , jadi secara otomatis loading blog akan menjadi lebih cepat di karenakan fungsi kode css yang sedikit , (Gunakan metode ini untuk menghemat !!! )
Dalam hal belajar menggunakan metode letak kode css inline style sheet . kalian menggunakan atribut style dalam tag yang relevan. Atribut style dapat berisi properti CSS.untuk lebih jelasnya dalam proses belajar letak css dengan metode inline style sheet ini . lihat contoh .
<p style="color:blue;margin-left:20px"> Ini adalah paragraf. </p>
Dari contoh di atas dapat kita lihat bersama, bahwa atribut css<p> di gabungkan dengan properti css color dan margin . jadi hasil dari atribut css <p> tersebut akan menghasilkan seperti apa yang telah di terapkan di atas yaitu tulisan dengan paragraf<p> akan berwarna biru dan akan berjarak 20px ke kiri .mungkin kalian masih ada yang belum paham yaa .. jadi begini sistem kerja atribut di atas mungkin jika diantara kalian ada yang pernah membaca artikel / belajar kode css tentang color dan margin serta padding pastinya kalian akan paham dengan sistem kerjanya .
jadi begini, mungkin ini sedikit melenceng dari topik pembahasan ... tapi engga apa deh aldi tulis juga . fungsi margin dari contoh di atas maksudnya adalah margin-left yaitu jarak tulisan dengan tepi kiri atau jarak dari kiri dengan tulisan .. sementara untuk padding adalah jarak antara tulisan tersebut jika atribut berupa kotak maka padding adalah jarak antara garis border dengan apa yang ada di dalam kotak tersebut sementara jika atribut berupa kotak maka fungsi margin disini adalah jarak antar kotak dengan sisi kiri ataupun sisi lainnya. lihat gambar :
untuk lebih jelasnya nanti akan aldi postingkan artikel tentang margin dan padding ini deh .. mungkin engga lama lagi .
Keterangan Penempatan Metode-Metode di atas ...
Multiple style sheet
Multiple style sheet ini terjadi apabila internal style sheet berada dalam link external style sheet. dapat kita buktikan di sini , jika kalian menggunakan kode css dengan metode internal style sheet dan kalian meletakannya di dalam metode external style sheet , maka fungsi atribut-atribut yang ada di dalam internal style sheet akan di wariskan oleh metode external style sheet ..bingung yaa ??? loh kok bingung .. oke deh lihat contoh aja yukk .. biar belajar lebih semangat !!!
Pada contoh ini aldi menggunakan atribut h1 pada external style sheet :
h1
{
color:Navy;
text-align:right;
font-size:20pt;
}
{
color:Navy;
text-align:right;
font-size:20pt;
}
Dan kali ini aldi akan menggunakan atribut h1 pada internal style sheet:
h1
{
text-align:left;
font-size:20pt;
margin:10px;
padding:10px
}
{
text-align:left;
font-size:20pt;
margin:10px;
padding:10px
}
Jika halaman dengan internal style sheet juga link ke external style sheet,maka atrbut properti untuk h1 akan menjadi:
h1
{
color:Navy;
text-align:left;
font-size:20pt;margin:10px;
padding:10px
}
{
color:Navy;
text-align:left;
font-size:20pt;margin:10px;
padding:10px
}
Dapat kita lihat bersama, bahwa internal style sheet mendapatkan warisan warna"color" dari external style sheet .nah itulah sistem kerja dari metode - metode di atas , jika kalian ingin belajar CSS sebaiknya itu dululah yang perlu kalian pahami . mungkin di antara kalian ada yang beranggapan bahwa cara-cara penempatan kode-kode di atas tersebut tidaklah penting . mungkin kalian benar .. atau mungkin kalian SALAH BESAR..bagaimana tidak , kalian sudah paham / familiar dengan kode-kode css akan tetapi kalian tidak paham dengan dasar-dasar penempatan kode css tersebut ..!!! sialnya dasar-dasar penempatan kode css tersebut adalah dasar dari pem belajar an kalian untuk menghasilkan kode tampilan html menjadi lebih menarik dengan sentuhan css .
Catatan: Jika link external style sheet ditempatkan setelah internal style sheet pada <head> HTML, maka external style sheet akan menimpa internal style sheet
untuk melihat tutorial-tutorial belajar CSS lainnya silakan kalian lihat pada bagian atas blog ini . atau mungkin kalian ingin belajar html terlebih dahulu ...??? sama seperti tutorial css . silakan kalian lihat pada bagian atas blog ini .. terimakasih .!!
semoga bermanfaat
Keren mazz... bisa belajar sendiri nie
BalasHapusthx infonya
hampir g ngerti mas bahasa pemrograman
BalasHapussaya bingung terapinnya
Thank You Sobat BLOGGER dah ngasih informasi tentang peletakkan code css
BalasHapussobat BLOGGER saya tunggu kunjungan baliknya yeach..
www.eloqers.com
jara bikin css sendiri g mana
BalasHapus