Diskripsi :
GenomOnline - Hallo gan.. kali ini saya akan share kumpulan kode kode css yang insya allah berguna untuk anda semua.
Kode Kode CSS:
*Cara Penulisan Kode CSS*
<html>
<head>
<title>Contoh Penulisan</title>
</head>
<style type="text/css">
Kode CSSnya Taruh Disini
.contoh-saja {
color:#000;
background:#2FFF00;
font-size:20px;
border:solid #0066FF 1px;
}
</style>
<body>
<li class="contoh-saja">
CONTOH PENULISAN
</li>
</body>
</html>
*CSS Untuk Huruf
- Huruf Tebal :
font-weight:bold;
Keterangan :
bold bisa di ganti dengan nominal. Contoh : 100 / 200 / 300 / 400 / 500 / 600 / 700 / 800 / 900
- Mengganti Karakter Tulisan :
Font-family:arial;
Keterangan :
arial bisa di ganti dengan karakter tulisan lainnya. Contoh : Times New Roman / Square721 BT / Lucida Sans Unicode / dan lain lain..
- Mengganti Ukuran Font/Tulisan :
Font-size:12px;
Keterangan :
12px bisa di ganti dengan nominal lainnya.. semakin besar nominalnya akan semakin besar ukuran tulisannya. Contoh : 14px / 15px / 16px / 17px / 18px / dan lain lain..
- Mengganti Style Tulisan :
Font-Style:italic;
Keterangan :
italic bisa di ganti dengan kode lainnya. Contoh : normal / oblique
italic adalah huruf miring.
oblique adalah huruf miring.
normal adalah huruf normal.
- Cara Transform Tulisan :
text-transform:capitalize;
Keterangan :
capitalize bisa di ganti dengan kode lainnya. Contoh : uppercase / lowercase
capitalize adalah huruf kapital.
uppercase adalah huruf besar semua.
lowercase adalah huruf kecil semua.
- Cara Mengganti Warna Text :
color:#FF0000;
Keterangan :
#FF0000 adalah kode warna (Warna Merah).
anda bisa mengganti kode warna dengan kode warna lainnya. anda bisa melihat kode kode warna disini.
- Cara Mengganti Dekorasi Text :
text-decoration:underline;
Keterangan :
underline bisa di ganti dengan kode lainnya. Contoh : overline / line-through / blink
underline adalah text garis bawah.
overline adalah text garis atas.
line-through adalah text garis tengah.
blink adalah text berkedip.
- Merubah Posisi Text/Tulisan :
text-align:center;
Keterangan :
center adalah text rata tengah, anda bisa menggantinya dengan kode lainnya. Contoh : left / right
left adalah text rata kiri.
right adalah text rata kanan
*CSS Untuk Background
- Background Dengan Warna Biasa :
background:#FF0000;
Keterangan :
#FF0000 adalah kode warna (Warna Merah).
anda bisa mengganti kode warna dengan kode warna lainnya. anda bisa melihat kode kode warna disini.
- Background Dengan Gambar :
background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjptmcy5U6t78XXNxtVIvVugI44dDesZRFKwSPlK4sed0nw_fuUb0MDziH7ssaCaamD19zWZ17QUZ39UV58DyaefVho6iY5rexF0kDO_EFe26U2OWbj44QXHls66xNxu_QmtWoea5EKRkG8/s320/css.png");
Keterangan :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjptmcy5U6t78XXNxtVIvVugI44dDesZRFKwSPlK4sed0nw_fuUb0MDziH7ssaCaamD19zWZ17QUZ39UV58DyaefVho6iY5rexF0kDO_EFe26U2OWbj44QXHls66xNxu_QmtWoea5EKRkG8/s320/css.png adalah url gambar, anda bisa menggantinya dengan url gambar lainnya.
- Cara Mengubah Posisi Background :
background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjptmcy5U6t78XXNxtVIvVugI44dDesZRFKwSPlK4sed0nw_fuUb0MDziH7ssaCaamD19zWZ17QUZ39UV58DyaefVho6iY5rexF0kDO_EFe26U2OWbj44QXHls66xNxu_QmtWoea5EKRkG8/s320/css.png") no-repeat right top;
Keterangan :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjptmcy5U6t78XXNxtVIvVugI44dDesZRFKwSPlK4sed0nw_fuUb0MDziH7ssaCaamD19zWZ17QUZ39UV58DyaefVho6iY5rexF0kDO_EFe26U2OWbj44QXHls66xNxu_QmtWoea5EKRkG8/s320/css.png adalah url gambar.
right adalah posisi gambar secara horizontal, anda bisa menggantinya dengan : left / center.
top adalah posisi gambar secara vertikal, anda bisa menggantinya dengan : bottom / center.
*CSS Untuk Border & Table
- Mengganti Warna Border
border-color:#FF0000;
Keterangan :
#FF0000 adalah kode warna (Warna Merah).
anda bisa mengganti kode warna dengan kode warna lainnya. anda bisa melihat kode kode warna disini..
- Mengganti Ukuran Border
border:1px;
Keterangan :
1px adalah ukuran border, anda bisa mengganti dengan nominal lainnya. Contoh : 2px / 3px / 4px / 5px / dan lain lain..
- Membuat Border Untuk Bawah
border-bottom:1px;
Keterangan :
1px adalah ukuran border, anda bisa mengganti dengan nominal lainnya. Contoh : 2px / 3px / 4px / 5px / dan lain lain..
- Membuat Border Untuk Atas
border-top:1px;
Keterangan :
1px adalah ukuran border, anda bisa mengganti dengan nominal lainnya. Contoh : 2px / 3px / 4px / 5px / dan lain lain..
- Membuat Border Untuk Kiri
border-left:1px;
1px adalah ukuran border, anda bisa mengganti dengan nominal lainnya. Contoh : 2px / 3px / 4px / 5px / dan lain lain..
- Membuat Border Untuk Kanan
border-right:1px;
Keterangan :
1px adalah ukuran border, anda bisa mengganti dengan nominal lainnya. Contoh : 2px / 3px / 4px / 5px / dan lain lain..
- Mengganti Type Border
border:dotted;
Keterangan :
dotted adalah kode type border, anda bisa menggantinya dengan kode lainnya. Contoh : Solid / dashed / double / groove / ridge / inset / outset
Untuk Keterangan type border 1 Per 1 saya tidak bisa menyebutkan semua :D , anda bisa mengEksperimen sendiri. :D
- Membuat Type Border Solid + Warna Border Kuning + Ukuran 5px
border: solid #EBFF00 5px;
Keterangan :
solid adalah Type Border .. anda bisa mengganti dengan type laninnya.
#EBFF00 adalah kode warna (Warna Kuning).
anda bisa mengganti kode warna dengan kode warna lainnya. anda bisa melihat kode kode warna disini..
5px Ukuran Border, anda bisa menggantinya dengan nominal laninnya.
*CSS Untuk Ukuran
- Mengganti Ukuran Lebar Biasa :
Width:500px;
Keterangan :
500px bisa di ganti dengan nominal lainnya.
- Mengganti Ukuran Lebar Minimal :
Min-width:200px;
Keterangan :
200px bisa di ganti dengan nominal lainnya.
- Mengganti Ukuran Lebar Maxsimal :
Max-width:1000px;
Keterangan :
1000px bisa di ganti dengan nominal lainnya.
- Mengganti Ukuran Tinggi Biasa :
Height:500px;
Keterangan :
500px bisa di ganti dengan nominal lainnya.
- Mengganti Ukuran Tinggi Minimal :
Min-height:200px;
Keterangan :
200px bisa di ganti dengan nominal lainnya.
- Mengganti Ukuran Tinggi Maxsimal :
Max-height:1000px;
Keterangan :
500px bisa di ganti dengan nominal lainnya.
Tag :
- Kumpulan Kode Kode CSS
- Kumpulan Kode Kode CSS Untuk Blog
- Kumpulan Dasar Dasar kode CSS
- Kumpulan Kode Kode CSS Lengkap
0 Response to "Kumpulan Kode CSS"
Post a Comment