CSS Margin

Properti CSS margin berfungsi untuk mengatur jarak atau membuat ruang kosong, baik bagian kanan, kiri, atas, dan bawah disekitar elemen seperti box, teks, gambar dll. Dalam penerapannya Properti CSS margin, kita dapat menententukan nilainya dalam satu properti atau satu baris kode css sehingga lebih ringkas. Tetapi Properti CSS margin juga dapat ditulis secara masing - masing antara bagian kanan, kiri, atas, dan bawah.

Lebih jelasnya,silahkan anda perhatikan penulisan berikut :

Contoh A

<style type="text/css">
div.contoh-A {margin: 25px 50px 75px 100px;}
</style>

<div class="contoh-A">TEKS DISINI</div>

Penulisan diatas sama penulisannya dengan :

<style type="text/css">
div.contoh-A
{
margin-top:25px;
margin-right:50px;
margin-bottom:75px;
margin-left:100px;
}
</style>

<div class="contoh-A">TEKS DISINI</div>

Anda lihat posisi teks dibawah ini : 

CSS atau Cascading Style Sheet adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda. Dengan kata lain Css adalah merupakan salah satu bahasa pemrograman web untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam.

Contoh B

<style type="text/css">
div.contoh-B
{
margin: 25px 50px 75px;
}
</style>

<div class="contoh-B">TEKS DISINI</div>

Penulisan diatas sama penulisannya dengan :

<style type="text/css">
div.contoh-B
{
margin-top:25px;
margin-right:50px;
margin-left-:50px;
margin-bottom:75px;
}
</style>

<div class="contoh-B">TEKS DISINI</div>

Anda lihat posisi teks dibawah ini : 

CSS atau Cascading Style Sheet adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda. Dengan kata lain Css adalah merupakan salah satu bahasa pemrograman web untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam.

Contoh C

<style type="text/css">
div.contoh-C
{
margin: 50px 25px;
}
</style>

<div class="contoh-C">TEKS DISINI</div>

Penulisan diatas sama penulisannya dengan :

<style type="text/css">
div.contoh-C
{
margin-right:25px;
margin-left-:25px;
margin-top:50px;
margin-bottom:50px;
}
</style>

<div class="contoh-C">TEKS DISINI</div>

Anda lihat posisi teks dibawah ini :

CSS atau Cascading Style Sheet adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda. Dengan kata lain Css adalah merupakan salah satu bahasa pemrograman web untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam.

Contoh D

<style type="text/css">
div.contoh-D
{
margin: 50px;
}
</style>

<div class="contoh-D">TEKS DISINI</div>

Penulisan diatas sama penulisannya dengan :

<style type="text/css">
div.contoh-D
{
margin-top:50px;
margin-right:50px;
margin-bottom:50px;
margin-left:50px;
}
</style>

<div class="contoh-D">TEKS DISINI</div>

Anda lihat posisi teks dibawah ini :

CSS atau Cascading Style Sheet adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda. Dengan kata lain Css adalah merupakan salah satu bahasa pemrograman web untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam.

Catatan : Untuk satuan nilai kita bisa menggunakan satuan " cm, px, em, atau %"

Ok...., Silahkan anda bisa coba mengganti nilai ukurannya sesuka anda, agar terlihatperbedaan hasilnya. Selamat mencoba dan Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.

Baca artikel lain :

CSS Border-Radius

Fungsi Properti css border - radius memudahkan kita merubah sudut pada sebuah box atau kotak menjadi tumpul atau melengkung. Bahkan dengan properti css border - radius ini kita bisa membuat sebuah lingkaran. Dan masing - masing sudut bisa diatur nilainnya secara sendiri - sendiri, seperti bagian atas - kanan, atas - kiri, bawah - kanan, dan bawah - kiri.

Contoh A

<div class="Contoh_A" style="

height: 65px; width:160px;
-moz-border-radius: 0 0 50px 0;
-webkit-border-radius: 0 0 50px 0;
border-radius: 0 0 50px 0;

background-color:#C7C8FF;border:2px solid blue;"></div>

Berikut hasilnya :

Contoh B

<div class="Contoh_B" style="

height: 65px;
width:160px;
-moz-border-radius: 0 50px 25px 0;
-webkit-border-radius: 0 50px 25px 0;
border-radius: 0 50px 25px 0;

background-color:#C7C8FF;border:2px solid blue;"></div>

Berikut hasilnya :

Contoh C

<div class="Contoh_C" style="

height: 65px;
width:160px;
-moz-border-radius: 0 50px 50px 0;
-webkit-border-radius: 0 50px 50px 0;
border-radius: 0 50px 50px 0;

background-color:#C7C8FF;border:2px solid blue;"></div>

Berikut hasilnya :

Contoh D

<div class="Contoh_D" style="

height: 65px;
width: 160px;
-moz-border-radius: 25px 50px 25px 50px;
-webkit-border-radius: 25px 50px 25px 50px;
border-radius: 25px 50px 25px 50px;

background-color:#C7C8FF;border:2px solid blue;"></div>

Berikut hasilnya :

Contoh E

<div class="Contoh_E" style="

height: 65px;
width:160px;
-moz-border-radius: 25px 25px 25px 25px;
-webkit-border-radius: 25px 25px 25px 25px;
border-radius: 25px 25px 25px 25px;

background-color:#C7C8FF;border:2px solid blue;"></div>

Berikut hasilnya :

Contoh F

<div class="Example_F" style="

height: 70px;
width: 70px;
-moz-border-radius: 50px 50px 50px 50px;
-webkit-border-radius: 50px 50px 50px 50px;
border-radius: 50px 50px 50px 50px;

background-color:#C7C8FF;border:2px solid blue;"></div>

Berikut hasilnya :

Ok...., Silahkan anda bisa coba mengganti nilai ukurannya sesuka anda, agar terlihat perbedaan hasilnya.

Selamat mencoba dan Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.

Baca artikel lain :

CSS BOX dan Fungsinya

Fitur Css Box digunakan pada saat kita membuat desain web termasuk mengatur tata letaknya. Css Box pada dasarnya adalah sebuah kotak yang membungkus elemen HTML, dan sesuai fungsi tata letaknya Fitur Css Box terdiri atas: margin, border, padding, dan konten.



    * Properti Margin berfungsi membuat ruang kosong atau memberikan jarak disekitar border.
    * Properti Border yaitu Sebuah batas yang terjadi di sekitar padding dan konten.
    * Properti Padding berfungsi membuat ruang kosong atau memberikan jarak disekitar konten.
    * Properti Content berfungsi sebagai Isi kotak, di mana teks dan gambar ditampilkan

Lebih jelasnya silahkan perhatikan gambar dibawah ini :

Berikut kode penggunaan box dalam fitur css :

<style type="text/css">
div.contoh
{
margin:15px;
width:400px;
border:10px solid green;
padding:10px;
}
</style>

<div class="contoh">Contoh ini menunjukkan bahwa margin atau jarak dari kiri hingga border dengan nilai 15px, sedang jarak dari border hingga konten atau teks ini dengan nilai 10px. Dan lebar border 40opx dengan ketebalan border 10px</div>

Berikut hasilnya :

Contoh ini menunjukkan bahwa margin atau jarak dari kiri hingga border dengan nilai 15px, sedang jarak dari border hingga konten atau teks ini dengan nilai 10px. Dan lebar border 400px dengan ketebalan border 10px

Ok...., Silahkan anda bisa coba mengganti nilai-nilai dari margin, border, lebar border, atau paddingnya sesuka anda, agar terlihat perbedaan hasilnya.

Selamat mencoba dan Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.

Baca artikel lain :

CSS BORDER

Banyak sekali properti dari fitur css border, yang semuanya berfungsi mengatur tampilan gaya dan warna dari sebuah border. Berikut beberapa properti dari fitur css border yang bisa kita gunakan dalam pembuatan web atau untuk keperluan lain :

1. Border-style
Properti ini dapat mengatur tampilan border dengan bermacam-macam bentuk dan efek.

<style type="text/css">

div.dotted {border-style:dotted;}

</style>

<div class="dotted">TEKS DISINI</div>

<style type="text/css">

div.dashed {border-style:dashed;}

</style>

<div class="dashed">TEKS DISINI</div>

<style type="text/css">

div.solid {border-style:solid;}

</style>

<div class="solid">TEKS DISINI</div>

<style type="text/css">

div.double {border-style:double;}

</style>

<div class="double">TEKS DISINI</div>

<style type="text/css">

div.groove {border-style:groove;}

</style>

<div class="groove">TEKS DISINI</div>

<style type="text/css">

div.ridge {border-style:ridge;}

</style>

<div class="ridge">TEKS DISINI</div>

<style type="text/css">

div.inset {border-style:inset;}

</style>

<div class="inset">TEKS DISINI</div>

<style type="text/css">
div.outset {border-style:outset;}
</style>

<div class="outset">TEKS DISINI</div>

2. Border-width
Properti border-width digunakan untuk mengatur ketebalan border. Dan nilai ketebalan border bisa diatur dengan satuan nilai Pixel (px) atau menggunakan nilai yang sudah ditentukan yaitu thin, medium, dan thick.

<style type="text/css">
div.satu
{
border-style: solid ;
border-width: 10px ;
}
</style>

<div class="satu">TEKS DISINI</div>

<style type="text/css">
div.dua
{
border-style: solid ;
border-width: thin ;
}
</style>

<div class="dua">TEKS DISINI</div>

<style type="text/css">
div.tiga
{
border-style: solid ;
border-width: medium ;
}
</style>

<div class="tiga">TEKS DISINI</div>

<style type="text/css">
div.empat
{
border-style:solid;
border-width: thick ;
}
</style>

<div class="empat">TEKS DISINI</div>

3. Border-Color
Properti border-Color yang digunakan untuk mengatur warna border.Dan pengaturan warna kita bisa menggunakan penulisan kode seperti :

• nama-nama warna, penulisannya "red, blue, green, dll" 
• RGB, penulisannya dengan nilai RGB, seperti "rgb(225, 225, 225)" 
• Hex, penulisannya dengan nilai hex, seperti "# FF0000" 

<style type="text/css">
div.hijau
{
border-style:solid;
border-width:5px;
border-color:green;
}
</style>

<div class="hijau">TEKS DISINI</div>

<style type="text/css">
div.merah
{
border-style:solid;
border-width:10px;
border-color:#ff0000;
}
</style>

<div class="merah">TEKS DISINI</div>

<style type="text/css">
div.abu-abu
{
border-style:solid;
border-width:15px;
border-color:rgb(225, 225, 225);
}
</style>

<div class="abu-abu">TEKS DISINI</div>

4. Contoh Border lain
Kita bisa menentukan ukuran kertebalan dan warna hanya pada border bagian atas, bawah, maupun samping.

<style type="text/css">
div.tebal-atas
{
border-style:solid;
border-top-width:20px;
border-color:rgb(225, 225, 225);
}
</style>

<div class="tebal-atas">TEKS DISINI</div>

<style type="text/css">
div.tebal-bawah
{
border-style:solid;
border-bottom-width:20px;
border-color:green;
}
</style>

<div class="tebal-bawah">TEKS DISINI</div>

<style type="text/css">
div.tebal-samping
{
border-style:solid;
border-left-width:20px;
border-color:#E3E3AC;
}
</style>

<div class="tebal-samping">TEKS DISINI</div>

Ok...., Silahkan anda bisa mengexplore sendiri bentuk border yang lain sesuai keinginan anda sambil belajar. Selamat mencoba dan Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.

Baca artikel lain :

CSS LIST

Seperti halnya HTML List, fitur css List juga berfungsi untuk membuat sebuah List atau tanda pada daftar. Dalam hal ini ada tiga macam bentuk yang bisa kita gunakan yaitu :

• Ordered lists adalah daftar item yang ditandai dengan bentuk lingkaran kecil ataupun kotak kecil.

• Unordered lists adalah daftar item yang ditandai dengan bentuk angka atau huruf.

• Image lists adalah daftar item yang ditandai dengan bentuk gambar.

1. Ordered lists

<style type="text/css">
ul.a {list-style-type:disc;}
ul.b {list-style-type:circle;}
ul.c {list-style-type:square;}
</style>

<ul class="a">
<li>Bentuk lingkaran</li>
<li>Lingkaran kecil</li>
<li>Lingkaran blok</li>
</ul>

<ul class="b">
<li>Bentuk lingkaran</li>
<li>Lingkaran kecil</li>
<li>Lingkaran lubang</li>
</ul>

<ul class="c">
<li>Bentuk kotak</li>
<li>Kotak kecil</li>
<li>Kotak blok</li>
</ul>

Berikut hasilnya :

• Bentuk lingkaran
• Lingkaran kecil
• Lingkaran blok

• Bentuk lingkaran
• Lingkaran kecil
• Lingkaran lubang

• Bentuk kotak
• Kotak kecil
• Kotak blok

2. Unordered

<style type="text/css">
ol.e {list-style-type:decimal;}
ol.f {list-style-type:decimal-leading-zero;}
ol.g {list-style-type:lower-roman;}
ol.h {list-style-type:upper-roman;}
ol.i {list-style-type:lower-alpha;}
ol.j {list-style-type:upper-alpha;}
ol.k {list-style-type:lower-greek;}
ol.l {list-style-type:armenian;}
ol.m {list-style-type:georgian;}
</style>

<ol class="e">
<li>Bentuk angka</li>
<li>Bentuk angka</li>
<li>Bentuk angka</li>
</ol>

<ol class="f">
<li>Bentuk angka dg Nol didepannya</li>
<li>Bentuk angka dg Nol didepannya</li>
<li>Bentuk angka dg Nol didepannya</li>
</ol>

<ol class="g">
<li>Bentuk huruf romawi kecil</li>
<li>Bentuk huruf romawi kecil</li>
<li>Bentuk huruf romawi kecil</li>
</ol>

<ol class="h">
<li>Bentuk huruf romawi besar</li>
<li>Bentuk huruf romawi besar</li>
<li>Bentuk huruf romawi besar</li>
</ol>

<ol class="i">
<li>Bentuk huruf abjad kecil</li>
<li>Bentuk huruf abjad kecil</li>
<li>Bentuk huruf abjad kecil</li>
</ol>

<ol class="j">
<li>Bentuk huruf abjad besar</li>
<li>Bentuk huruf abjad besar</li>
<li>Bentuk huruf abjad besar</li>
</ol>

<ol class="k">
<li>Bentuk simbol 1</li>
<li>Bentuk simbol 1</li>
<li>Bentuk simbol 1</li>
</ol>

<ol class="l">
<li>Bentuk simbol 2</li>
<li>Bentuk simbol 2</li>
<li>Bentuk simbol 2</li>
</ol>

<ol class="m">
<li>Bentuk simbol 3</li>
<li>Bentuk simbol 3</li>
<li>Bentuk simbol 3</li>
</ol>

Berikut hasilnya :

1. Bentuk angka
2. Bentuk angka
3. Bentuk angka

1. Bentuk angka dg Nol didepannya
2. Bentuk angka dg Nol didepannya
3. Bentuk angka dg Nol didepannya

1. Bentuk huruf romawi kecil
2. Bentuk huruf romawi kecil
3. Bentuk huruf romawi kecil

1. Bentuk huruf romawi besar
2. Bentuk huruf romawi besar
3. Bentuk huruf romawi besar

1. Bentuk huruf abjad kecil
2. Bentuk huruf abjad kecil
3. Bentuk huruf abjad kecil

1. Bentuk huruf abjad besar
2. Bentuk huruf abjad besar
3. Bentuk huruf abjad besar

1. Bentuk simbol 1
2. Bentuk simbol 1
3. Bentuk simbol 1

1. Bentuk simbol 2
2. Bentuk simbol 2
3. Bentuk simbol 2

1. Bentuk simbol 3
2. Bentuk simbol 3
3. Bentuk simbol 3

3. Image lists

<style type="text/css">

ul.o {list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjafM1Sk2aMrBMH9ddhWuCLjlIIbG09Cb_be55frH5NQR6ir5dO79D2y-Za3YRYoGA2myrPapKobWgu1FCKS8v5xR-ZJ_15KTypTFaXzf54XjPghI27dMJIrfXZfdm4J7l1LDdaSaSyBiK_/s104/List+1.jpg');}

ul.p {list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidveQNjTAtbY3iQe10vb1TotbDcsjeoIwkg8PTezWgcfi3MXS-IHqDx28emJ976XlniZsO64R9YUscLcj8kTYCWOfDMzQ5Q2nTjCIGb4FMSanHxHfyLgLhWe9OgxEZEyIltaJiYV3lPygk/s104/List+2.jpg');}

ul.q {list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXFwAV0k_6Y8152rjJDxoA2EbD2O6KXpRS6WnisXASFURH3L8tDcYl6UT0-lbscWhbGpYi6ou8E9Cabg9i037YK2PXIC9I1nD7bJGmYl-LXGW9zfxu7TvsjjboHMPX2gZb9ASEpYQPXPLD/s104/List+3.jpg');}

ul.r {list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjffT4FNXU8LoTKjkvzaTR4e_V-4DHTvOlhUHT5BMSo9gTcPWZE5abL6jkshRuqvrIwGYbDs3F2mHld0QtS61PeEm6ZxX-Dcoxs8348m5K8llq-ZV-KT3TDOvpPNfl7gjsWbEV3OCBDRJtC/s104/List+4.jpg');}

ul.s {list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHQpuCaUSJFl2T4jemvIMBfF81Gb1nj7MHz8cq9fsME2vpHVtgOaO5x3SqDWGL1VmuOkIIWBA_eQIlieVTEfk72hLVMAzDEi-rzSxvo3FnrtE2ffMwdlIukMUMfsvIwQAMW7rOQ8zkidj0/s104/List+5.jpg');}

ul.t {list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAHLzO-dC-1SB5jRjJUXFD02P4S8A2OG3sag2feJH_zpBHIuuw3KKKZbrlv5H2FagFge682e8gGzl2k6SgO-FlBRrDOVf3s95KYiY_pFLIjIfvLMKRGn91MIM2R4Forb1Yn_kbIWJX1Sk7/s104/List+6.jpg');}

</style>

<ul class="o">
<li>Bentuk gambar 1</li>
<li>Bentuk gambar 1</li>
<li>Bentuk gambar 1</li>
</ul>

<ul class="p">
<li>Bentuk gambar 2</li>
<li>Bentuk gambar 2</li>
<li>Bentuk gambar 2</li>
</ul>

<ul class="q">
<li>Bentuk gambar 3</li>
<li>Bentuk gambar 3</li>
<li>Bentuk gambar 3</li>
</ul>

<ul class="r">
<li>Bentuk gambar 4</li>
<li>Bentuk gambar 4</li>
<li>Bentuk gambar 4</li>
</ul>

<ul class="s">
<li>Bentuk gambar 5</li>
<li>Bentuk gambar 5</li>
<li>Bentuk gambar 5</li>
</ul>

<ul class="t">
<li>Bentuk gambar 6</li>
<li>Bentuk gambar 6</li>
<li>Bentuk gambar 6</li>
</ul>

Berikut hasilnya :

• Bentuk gambar 1
• Bentuk gambar 1
• Bentuk gambar 1

• Bentuk gambar 2
• Bentuk gambar 2
• Bentuk gambar 2

• Bentuk gambar 3
• Bentuk gambar 3
• Bentuk gambar 3

• Bentuk gambar 4
• Bentuk gambar 4
• Bentuk gambar 4

• Bentuk gambar 5
• Bentuk gambar 5
• Bentuk gambar 5

• Bentuk gambar 6
• Bentuk gambar 6
• Bentuk gambar 6

Catatan :

Silahkan anda ganti Ulr gambar List dengan Ulr gambar List milik anda.

Untuk penerapan, anda bisa pilih salah satu bentuk yang disukai dan langsung ditempatkan pada posting bisa, langsung pada gadget juga bisa. Jadi bila salah satu yg dipakai (misal saya pakai List yg paling bawah), maka kode yg dipakai jadi seperti ini :

<style type="text/css">

ul.t {list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAHLzO-dC-1SB5jRjJUXFD02P4S8A2OG3sag2feJH_zpBHIuuw3KKKZbrlv5H2FagFge682e8gGzl2k6SgO-FlBRrDOVf3s95KYiY_pFLIjIfvLMKRGn91MIM2R4Forb1Yn_kbIWJX1Sk7/s104/List+6.jpg');}

</style>

<ul class="t">

<li>Bentuk gambar 6</li>

<li>Bentuk gambar 6</li>

<li>Bentuk gambar 6</li>

</ul>

Catatan : Huruf "t" yg berwarna biru merupakan ID, anda bisa ganti ID seperti huruf "t" diatas dgn nama bebas asal keduannya sama.

Bila ditambahkan Link, maka jadinya seperti berikut :

<style type="text/css">

ul.t {list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAHLzO-dC-1SB5jRjJUXFD02P4S8A2OG3sag2feJH_zpBHIuuw3KKKZbrlv5H2FagFge682e8gGzl2k6SgO-FlBRrDOVf3s95KYiY_pFLIjIfvLMKRGn91MIM2R4Forb1Yn_kbIWJX1Sk7/s104/List%2B6.jpg');}

</style>

<ul class="t">

<li><a href="http://www.carabuatwebgratis.com/2011/03/css-list.html">CSS List</a></li>

<li><a href="http://www.carabuatwebgratis.com/search/label/css list">Label CSS List</a></li>

<li><a href="http://www.carabuatwebgratis.com/search/label/css">Label CSS</a></li>

</ul>

Catatan : Jangan lupa ganti ukuran gambar berwarna pink (utk blogger biasanya s104 atau h104), dengan ukuran lebih kesil misal: "15px" , sehingga menjadi s15 atau h15.

• List pertama adalah contoh Link langsung keartikel
• List kedua adalah contoh Link Label CSS List
• List ketiga adalah contoh Link Label CSS

Berikut hasilnya :

• CSS List
• Label CSS List
• Label CSS

Ok...., Selamat mencoba dan Semoga bermanfaat....
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini.
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.

Baca artikel lain :

CSS LINK

Penggunaan css pada fitur css link sangat bervariasi. Ada banyak fungsi pada fitur css link, kita bisa mengatur warna link, warna latar pada link, merubah warna pada saat dikunjungi ataupun warna bila link dipilih atau diklik.




Beberapa properti yang digunakan yaitu :
    * a: link - link, normal belum dikunjungi
    * a: visited - link pengguna telah mengunjungi
    * a: hover - link ketika krusor mouse di atasnya
    * a: active - link saat itu diklik

Berikut contoh-contoh Penggunaan fitur Css Link :
1. Menambahkan warna link, saat dikunjungi serta pada saat diklik

<style type="text/css">
a.satu:link {color:#FF0000;}
a.satu:visited {color:#00FF00;}
a.satu:hover {color:#FF00FF;}
a.satu:active {color:#0000FF;}
</style>

<a class="satu" href="http://www.carabuatwebgratis.com" target="_blank">Cara Buat Web Gratis</a>

Berikut hasilnya :

Cara Buat Web Gratis

2. Penggunaan text-decoration pada link

<style type="text/css">
a.dua:link {text-decoration:none;}
a.dua:visited {text-decoration:none;}
a.dua:hover {text-decoration:underline;}
a.dua:active {text-decoration:underline;}
</style>

<a class="dua" href="http://www.carabuatwebgratis.com" target="_blank">Cara Buat Web Gratis</a>

Berikut hasilnya :

Cara Buat Web Gratis

3. Menentukan warna latar belakang untuk link

<style type="text/css">
a.tiga:link {background-color:#B2FF99;}
a.tiga:visited {background-color:#FFFF85;}
a.tiga:hover {background-color:#FF704D;}
a.tiga:active {background-color:#FF704D;}
</style>
<a class="tiga" href="http://www.carabuatwebgratis.com" target="_blank">Cara Buat Web Gratis</a>

Berikut hasilnya :

Cara Buat Web Gratis

4. Memberikan efek lain pada link

<style type="text/css">
a.empat:link {color:#ff0000;}
a.empat:visited {color:#0000ff;}
a.empat:hover {color:#ffcc00;}

a.lima:link {color:#ff0000;}
a.lima:visited {color:#0000ff;}
a.lima:hover {font-size:150%;}

a.enam:link {color:#ff0000;}
a.enam:visited {color:#0000ff;}
a.enam:hover {background:#66ff66;}

a.tujuh:link {color:#ff0000;}
a.tujuh:visited {color:#0000ff;}
a.tujuh:hover {font-family:monospace;}

a.delapan:link {color:#ff0000;text-decoration:none;}
a.delapan:visited {color:#0000ff;text-decoration:none;}
a.delapan:hover {text-decoration:underline;}
</style>

<a class="empat" href="http://www.carabuatwebgratis.com" target="_blank">Cara Buat Web Gratis</a>

<a class="lima" href="http://www.carabuatwebgratis.com" target="_blank">Cara Buat Web Gratis</a>

<a class="enam" href="http://www.carabuatwebgratis.com" target="_blank">Cara Buat Web Gratis</a>

<a class="tujuh" href="http://www.carabuatwebgratis.com" target="_blank">Cara Buat Web Gratis</a>

<a class="delapan" href="http://www.carabuatwebgratis.com" target="_blank">Cara Buat Web Gratis</a>

Berikut hasilnya :

Cara Buat Web Gratis

Cara Buat Web Gratis

Cara Buat Web Gratis

Cara Buat Web Gratis

Cara Buat Web Gratis

4. Membuat kotak link berbentuk tab menu

<style type="text/css">
a.sembilan:link,a.sembilan:visited
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
}
a.sembilan:hover,a.sembilan:active
{
background-color:#7A991A;
}
</style>
<a class="sembilan" href="http://www.carabuatwebgratis.com" target="_blank">Cara Buat Web Gratis</a>

Berikut hasilnya :

Cara Buat Web Gratis

Ok...., Selamat mencoba dan Semoga bermanfaat....
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini.
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.

Baca artikel lain :

CSS FONT

Fitur Css Font memang sangat diperlukan dalam pembuatan website. Beberapa kegunaan fitur Css Font yang bisa digunakan diantaranya seperti :

• Mengatur jenis font

• Mengatur ukuran font

• Mengatur ketebalan font

• Mengatur kemiringan font

OK..., mari kita lihat contohnya satu-persatu :

1. Mengatur jenis font

<style type="text/css">
p.serif{font-family:"Times New Roman",Times,serif;}
p.sansserif{font-family:Arial,Helvetica,sans-serif;}
</style>

<h1>CSS font-Mengatur jenis font</h1>
<p class="serif">Pada paragraf ini jenis font yang digunakan adalah Times New Roman.</p>
<p class="sansserif">Sedang Pada paragraf ini jenis font yang digunakan adalah Arial.</p>

Hasilnya sebagai berikut :

CSS font-Mengatur jenis font

Pada paragraf ini jenis font yang digunakan adalah Times New Roman.
Sedang Pada paragraf ini jenis font yang digunakan adalah Arial.

2. Mengatur ukuran font

<style type="text/css">
p {font-family:"Times New Roman",Times,serif; font-size:16px;}
p {font-family:"Times New Roman",Times,serif; font-size:1em;}
p {font-family:"Times New Roman",Times,serif; font-size:100%;}
</style>

<p>Teks standart dengan font berukuran 16 px</p>
<p>Teks standart dengan font berukuran 1 em</p>
<p>Teks standart dengan font berukuran 100 %</p>

Hasilnya sebagai berikut :

Teks standart dengan font berukuran 16 px
Teks standart dengan font berukuran 1 em
Teks standart dengan font berukuran 100 %

Catatan :
Untuk Mengatur ukuran font, ada tiga satuan nilai yang bisa kita gunakan yaitu "px", "em", "%". Pada tampilan standart, nilai ukuran font biasanya 16 px atau sama dengan 1 em, atau sama dengan 100%.

<style type="text/css">
p {font-family:"Times New Roman",Times,serif; font-size:20px;}
p {font-family:"Times New Roman",Times,serif; font-size:3em;}
p {font-family:"Times New Roman",Times,serif; font-size:200%;}
</style>

<p>Teks standart dengan font berukuran 20 px</p>
<p>Teks standart dengan font berukuran 3 em</p>
<p>Teks standart dengan font berukuran 200 %</p>

Hasilnya sebagai berikut :

Teks standart dengan font berukuran 20 px
Teks standart dengan font berukuran 3 em
Teks standart dengan font berukuran 200 %

3. Mengatur ketebalan font

<style type="text/css">
p.normal {font-weight:normal;}
p.bold {font-weight:bold;}
</style>

<p class="normal">Teks standart dengan ketebalan font normal</p>
<p class="bold">Teks standart dengan ketebalan font bold</p>

Hasilnya sebagai berikut :

Teks standart dengan ketebalan font normal
Teks standart dengan ketebalan font bold

4. Mengatur kemiringan font

<style type="text/css">
p.normal {font-family:"Times New Roman",Times,serif; font-style:normal;}
p.italic {font-family:"Times New Roman",Times,serif; font-style:italic;}
</style>

<p>Teks standart dengan font tegak normal</p>
<p>Teks standart dengan font miring</p>

Hasilnya sebagai berikut :

Teks standart dengan font tegak normal
Teks standart dengan font miring

Ok...., Selamat mencoba dan Semoga bermanfaat....
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini.
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.

Baca artikel lain :

Beri Komentar menggunakan Facebook

Baca artikel lain :

CSS Teks

Beberapa fungsi fitur CSS teks atau disebut juga dengan format teks seperti warna teks, penempatan atau posisi teks mengunakan properti align, properti Dekorasi teks yang berfungsi untuk membuat dekorasi atau menghilangkan dekorasi seperti menghilangkan garis bawah pada link, Transformasi teks yang berfungsi untuk menentukan besar kecilnya huruf dalam teks, Identitas teks yang berfungsi untuk menentukan posisi teks baris pertama pada suatu paragraf.

Berikut ini contoh fungsi fitur css yang digunakan dalam pemformatan teks :

1. Warna Teks

<style type="text/css">
body {color:red;}
h1 {color:green;}
p.paragraf-kedua {color:blue;}
</style>

<h1>JUDUL BERWARNA HIJAU</h1>
<p>Keseluruhan teks pada halaman berwarna merah, hal ini ditentukan oleh pemilihan "body" sebagai warna keseluruhan teks pada suatu halaman, kecuali pada contoh paragraf yang kedua dengan teks berwana biru.</p>
<p class="paragraf-kedua">Pada paragraf yang kedua adalah contoh teks dengan warna biru.</p>
<p>Pada teks atau paragraf yang lain tetap berwana merah, sebab warna body sudah ditentukan diatas dengan warna merah.</p>

Berikut hasilnya :

Catatan :

• Pada dasarnya warna teks secara default adalah hitam. Dalam contoh diatas Warna dasar teks diberi warna merah, hal ini ditentukan oleh kata body atau body selector.

• Pemberian warna bisa menggunakan salah satu diantara :

* nama-nama warna, seperti "red"
* kode warna RGB, seperti "rgb (255,0,0)"
* kode warna hex, seperti "# FF0000"

2. Align Taks

<style type="text/css">
h1 {text-align:center;}
p.date {text-align:right;}
p.artikel{text-align:justify;}
</style>

<h1>PERGI TAMASYA (contoh)</h1>
<p class="date">1 Januari 2011</p>
<p class="artikel">Pada hari minggu kuturut ayah kekota, naik delman istimewa kududuk dimuka, disamping pak kusir yang sedang bekerja, sambil mengendarai kuda supaya baik jalannya, dug dig dag dig duk suara sepatu kuda..., indahnya kota jogja...</p>

Berikut hasilnya :

PERGI TAMASYA (contoh)

1 Januari 2011

Pada hari minggu kuturut ayah kekota, naik delman istimewa kududuk dimuka, disamping pak kusir yang sedang bekerja, sambil mengendarai kuda supaya baik jalannya, dug dig dag dig duk suara sepatu kuda..., indahnya kota jogja...

3. Dekorasi teks

Contoh membuat dekorasi teks :

<style type="text/css">
h1 {text-align:center;}
p.satu {text-decoration:overline;}
p.dua {text-decoration:line-through;}
p.tiga {text-decoration:underline;}

p.empat {text-decoration:blink;}

</style>

<h1>Judul (contoh)</h1>
<p class="satu">Ini contoh teks pertama overline</p>
<p class="dua">Ini contoh teks kedua line-through</p>
<p class="tiga">Ini contoh teks ketiga underline</p>
<p class="empat">Ini contoh teks keempat dg efek blink</p>

Berikut hasilnya :

Judul (contoh)

Ini contoh teks pertama overline
Ini contoh teks kedua line-through
Ini contoh teks ketiga underline
Ini contoh teks keempat dg efek blink

Catatan : Untuk dekorasi "blink" tidak suport pada browser IE, Chrome, dan Safari.

Contoh untuk menghilangkan garis bawah pada link :

<style type="text/css">
a {text-decoration:none;}
</style>

<p>Website ini memberikan panduan bagaimana <a href="http://www.carabuatwebgratis.com">Cara buat web</a> mudah, cepat, dan gratis</p>

Berikut hasilnya :

Website ini memberikan panduan bagaimana Cara buat web mudah, cepat, dan gratis

4. Transformasi teks

<style type="text/css">
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
</style>

<p class="uppercase">Contoh membuat teks dengan huruf besar semua</p>
<p class="lowercase">Contoh membuat teks dengan huruf kecil semua</p>
<p class="capitalize">Contoh membuat teks dengan huruf besar hanya pada huruf pertama disetiap kata</p>

Berikut hasilnya :

Contoh membuat teks dengan huruf besar semua
Contoh membuat teks dengan huruf kecil semua
Contoh membuat teks dengan huruf besar hanya pada huruf pertama disetiap kata

5. Identitas teks

<style type="text/css">
p {text-indent:50px;}
</style>

<p>Contoh teks dengan properti "Identitas teks", memberikan efek pada teks baris pertama dalam paragraf lebih menjorok kedalam sesuai dengan besar kecilnya nilai "indent" yang telah ditentukan</p>

Berikut hasilnya :

           Contoh teks dengan properti "Identitas teks", memberikan efek pada teks baris pertama dalam paragraf lebih menjorok kedalam sesuai dengan besar kecilnya nilai "indent" yang telah ditentukan

Silahkan anda bisa coba otak atik sesuai selera anda.

Ok...., Semoga bermanfaat....
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini.
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.

Baca artikel lain :

CSS Background

Fitur dari css Background berfungsi untuk memberi efek latar belakang suatu elemen. Beberapa properti dan kelebihan dari fitur ini diantaranya kita bisa memberi efek latar belakang seperti; Latar belakang warna, Latar belakang gambar, mengulang Latar belakang gambar secara vertikal maupun horisontal, Mengatur posisi Latar belakang gambar.
Dengan fitur css ini, kita bisa gunakan untuk membuat sebuah web atau sekedar untuk memberi efek Background pada postingan artikel pada blog.

OK..., mari kita lihat contohnya satu-persatu :

1. Latar belakang warna

<style type="text/css">
div.background-warna
{
border-style:solid;
border-color:#E6E6E6;
margin-left:auto;
margin-right:auto;
width:80%;
background-color:#E0E0B8;
text-align:left;
padding:10px;
}
</style>
<div class="background-warna">
<h2>JUDUL TEKS</h2>
Ini adalah contoh bila kita membuat artikel dengan memberikan efek latar belakang warna
</div>

Berikut hasilnya :

JUDUL TEKS

Ini adalah contoh bila kita membuat artikel dengan memberikan efek latar belakang warna

2. Latar belakang gambar

<style type="text/css">
div.background-gambar
{
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSJFA82MvgiiJy9dfPfs-dtGoPTpH4ck4ot1_LG9ZXDgCNOihoSps89__pWF32dYPKyuQuQO-5_bjeC_MhqvoSqKVQOM6sUSxO7-MEOZ-nclHFutxWorQnD3cz2YmJacUlWG8M7BX1rOz5/s1000/kertas.jpg');
text-align:left;
padding:10px;
}
</style>

<div class="background-gambar"><h1>JUDUL TEKS</h1>
Ini adalah contoh bila kita membuat artikel dengan memberikan efek latar belakang gambar
</div>

3. Mengulang Latar belakang gambar secara horisontal

<style type="text/css">
div.background-gambar-repeat-x
{
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYKwb6ZrNgr157xryq-rWqJHtJLTg261phxr4N4D0fOFdD6BonaXa1OTmlO8O0LT2oN6QR9ah6LbBq83-bZw3GzOoXq6_mFH7N8R2lJb42MfcE3a0MWWQ6IvQrgfk5UVGq8kC3_6MHWQPW/s200/Background%2Bgambar.jpg');
background-repeat:repeat-x;
text-align:left;
padding:10px;
}
</style>

<div class="background-gambar-repeat-x">

<h1>JUDUL TEKS</h1>

Ini adalah contoh bila kita membuat artikel dengan memberikan efek latar belakang gambar yang diulang secara horisontal </div>

Berikut hasilnya :

 4. Mengatur posisi Latar belakang gambar
Dengan properti css ini kita bisa membuat artikel dengan memberikan efek latar belakang gambar yang bisa kita atur posisi penempatan gambar baik di sebelah kiri atau disebelah kanan, dan kita bisa menempatkan artikel atau posting dalam sebuah kotak yang ada disebelah gambar.

<style type="text/css">
div.background
{
margin-left:20px;
background:#ffffff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVtPJsjJg4x1bLz7-9BXjuOBfBakaXRyhjPMiYHIhQ6QqVhZR8mmx27h3UzJXfWlw4RN8IIEdQ0T6qC2qQJCmMQ86Bbida257w79eW9IvBtONVrMdz3n4VsWv319obPFQWZVw5BJj-1Rcs/s200/kupu.jpg') no-repeat top left;
}
div.container
{
text-align:center;
}
div.center_div
{
border-style:solid;
border-color:#E6E6E6;
margin-left:200px;
margin-right:auto;
width:50%;
background-color:#E0E0B8;
text-align:left;
padding:10px;
}
</style>

<div class="background">
<div class="container">
<div class="center_div">
<h2>JUDUL TEKS</h2>
Ini adalah contoh bila kita membuat artikel dengan memberikan efek latar belakang gambar yang bisa kita atur posisi penempatan gambar baik di sebelah kiri atau disebelah kanan, dan kita bisa menempatkan artikel atau posting dalam sebuah kotak
</div>
</div>
</div>

Berikut hasilnya :

JUDUL TEKS

Ini adalah contoh bila kita membuat artikel dengan memberikan efek latar belakang gambar yang bisa kita atur posisi penempatan gambar baik di sebelah kiri atau disebelah kanan, dan kita bisa menempatkan artikel atau posting dalam sebuah kotak

Catatan :

• Ganti Ulr image berwarna biru dengan Ulr tempat anda menyimpan gambar, dan tulisan berwarna merah adalah nilai ukuran besar dan kecilnya gambar.
•  nilai width:40% adalah lebar dari kotak

Silahkan anda bisa coba otak atik sesuai selera anda.

Ok...., Semoga bermanfaat....
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini.
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.

Baca artikel lain :

HTML LIST

List termasuk atribut yang sering digunakan dalam membuat sebuah daftar ataupun sub daftar. Biasanya bentuk list yang sering digunakan adalah seperti Angka, huruf, romawi, titik atau bentuk-bentuk bidang seperti lingkaran, kotak, dll.

Berikut beberapa contoh bentuk list yang sering digunakan :

---

<h4>List bentuk Angka :</h4>       <ol>  <li>Satu</li>  <li>Dua</li>  <li>Tiga</li>  <li>Empat</li> </ol>

List bentuk Angka :                 Satu Dua Tiga Empat

---

---

<h4>List bentuk Huruf besar:</h4> <ol type="A">  <li>Huruf besar A</li>  <li>Huruf besar B</li>  <li>Huruf besar C</li>  <li>Huruf besar D</li> </ol>

List bentuk Huruf besar :         Huruf besar A Huruf besar B Huruf besar C Huruf besar D

---

---

<h4>List bentuk Huruf kecil:</h4> <ol type="a">  <li>Huruf kecil a</li>  <li>Huruf kecil b</li>  <li>Huruf kecil c</li>  <li>Huruf kecil d</li> </ol>

List bentuk Huruf kecil :            Huruf kecil a Huruf kecil b Huruf kecil c Huruf kecil d

---

---

<h4>List bentuk Romawi besar:</h4> <ol type="I">  <li>Romawi besar I</li>  <li>Romawi besar II</li>  <li>Romawi besar III</li>  <li>Romawi besar IV</li> </ol>

List bentuk Romawi besar : Romawi besar I Romawi besar II Romawi besar III Romawi besar IV

---

---

<h4>List bentuk Romawi kecil:</h4> <ol type="i">  <li>Romawi kecil i</li>  <li>Romawi kecil ii</li>  <li>Romawi kecil iii</li>  <li>Romawi kecil iv</li> </ol>

List bentuk Romawi kecil :    Romawi kecil i Romawi kecil ii Romawi kecil iii Romawi kecil iv

---

---

<h4>Disc bullets list:</h4>                 <ul type="disc">  <li>Merah</li>  <li>Kuning</li>  <li>Hijau</li>  <li>Biru</li> </ul>

Disc bullets list :                    Merah Kuning Hijau Biru

---

---

<h4>Circle bullets list:</h4>               <ul type="circle">  <li>Merah</li>  <li>Kuning</li>  <li>Hijau</li>  <li>Biru</li> </ul>

Circle bullets list :                 Merah Kuning Hijau Biru

---

---

<h4>Square bullets list:</h4>             <ul type="square">  <li>Merah</li>  <li>Kuning</li>  <li>Hijau</li>  <li>Biru</li> </ul>

Square bullets list :                Merah Kuning Hijau Biru

---

---

<h4>Sub Daftar:</h4>                       <ul> <li>Buah</li>   <li>Hewan     <ul>     <li>Reptil</li>     <li>Mamalia       <ul>       <li>Sapi</li>       <li>Kambing</li>       </ul>     </li>     </ul>   </li>   <li>Pohon</li> </ul>

Sub Daftar :                            Buah Hewan Reptil Mamalia Sapi Kambing Pohon

---

OK....Selamat membaca artikel yang lain dan semoga bermanfaat....
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini.
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.

Baca artikel lain :