CSS
Tampilkan postingan dengan label CSS. Tampilkan semua postingan
Tampilkan postingan dengan label CSS. Tampilkan semua postingan

Memahami CSS Selector Api bagian dasar

KANG_SIRR 12/10/2015 Add Comment
Untuk pembahasan kali ini sesuai judul di atas, yaitu memahami CSS selector api bagian dasar, CSS sendiri kepanjangannya dari Cascading Style Sheet, untuk artinya di terjemahkan sendiri saja ya,, hehe..

Sekarang kita balik lagi ke pembahasan materi, dan tentunya kalian juga sudah tahu apa itu kata selector, selector di terjemahkan dalam artian Petunjuk Pemilihan.

Di dalam CSS terdapat istilah pemilihan element, id, class dan selector-selector yang lainnya.
Karena ini bagian dasar ! Saya akan membahas sedikit pembahasan dulu, dan biar tidak pusing kepala nantinya ketika kalian belajar,, hehe..

1. Pemilihan berdasarkan element, lihat contoh code di bawah ini :

<!DOCTYPE html>
<html>
<head>
    <title> Contoh Code </title>
</head>
<body>

<style type="text/css">

/* Pemilihan element "color-red", Style (1) */
color-red{
    background: #eeeeee;
    color: #ff0000;
}

/* Pemilihan element "color-green", Style (2) */
color-green{
    background: #dddddd;
    color: #00ff00;
}

/* Pemilihan element "color-blue", Style (3) */
color-blue{
    background: #cccccc;
    color: #0000ff;
}

/* Pemilihan element "color-orange", Style (4) */
color-orange{
    background: #bbbbbb;
    color: #ff9900;
}

/* Pemilihan element "color-red", Style (5) */
color-yellow{
    background: #aaaaaa;
    color: #ffff00;
}
</style>

/* Baris element HTML */
<color-red> #ff0000; </color-red><br/> /* Lihat Style (1) */
<color-green> #00ff00; </color-green><br/> /* Lihat Style (2) */
<color-blue> #0000ff; </color-blue><br/> /* Lihat Style (3) */
<color-orange> #ff9900; </color-orange><br/> /* Lihat Style (4) */
<color-yellow> #ffff00; </color-yellow> /* Lihat Style (5) */

</body>
</html>

Hasilnya :
#ff0000;
#00ff00;
#0000ff;
#ff9900;
#ffff00;


2. Pemilihan berdasarkan attribute id, lihat contoh code di bawah ini :

<!DOCTYPE html>
<html>
<head>
    <title> Contoh Code </title>
</head>
<body>

<style type="text/css">

/* Pemilihan attribute "id" harus di awali dengan tanda "sharp" atau "#", seperti penulisan di bawah ini. */
#backcolor {background:#552009;color:#ffffff;width:300px;height:100px;}

/* Pemilihan attribute "id" yang disertai dengan pemilihan "Element", Untuk contoh code pemilihan berdasarkan "Element" bisa lihat contoh di atas. */
div#paddingsepuluhborderdua {padding:10px;border:2px solid #66ff11;}
</style>

    <div id="backcolor">
        <div id="paddingsepuluhborderdua">
            Ini contoh code dalam pemilihan css id.
        </div>
    </div>

</body>
</html>

Hasilnya :

Ini contoh code dalam pemilihan css id.


2. Pemilihan berdasarkan attribute class, lihat contoh code di bawah ini :

<!DOCTYPE html>
<html>
<head>
    <title> Contoh Code </title>
</head>
<body>

<style type="text/css">

/* Pemilihan attribute "class" harus di awali dengan tanda "dot" atau "titik" atau ".", seperti penulisan di bawah ini. */
.backcolor {background:#ff9900;color:#000000;width:350px;height:100px;}

/* Pemilihan attribute "class" yang disertai dengan pemilihan "Element", Untuk contoh code pemilihan berdasarkan "Element" bisa lihat contoh di atas.*/
div.paddingsepuluhborderdua {padding:20px;border:5px solid #66ff11;}
</style>

    <div class="backcolor">
        <div class="paddingsepuluhborderdua">
            Ini contoh code dalam pemilihan css class.
        </div>
    </div>

</body>
</html>

Hasilnya :

Ini contoh code dalam pemilihan css class.


Selesai dulu deh, kita lanjutkan ke tutorial berikutnya ya sobat...

Belajar Dengan Mudah Dari HTML Reference

KANG_SIRR 12/06/2015 Add Comment
Sebenarnya hari ini saya agak malas posting, di karenakan ini blog yang perlu saya perbanyak postingan, jadi saya ambil judul Belajar Dengan Mudah Dari HTML Reference

Di sini kalian dapat mempelajari referensi-referensi manual dari situs / web yang sudah masternya.

Kalian bisa klick gambar atau link di bawah ini :

www.w3schools.com
http://www.w3schools.com

developer.mozilla.org
https://developer.mozilla.org/en-US/docs/Web

www.htmldog.com
http://www.htmldog.com

www.htmlgoodies.com
http://www.htmlgoodies.com

www.htmlref.com
http://www.htmlref.com

msdn.microsoft.com
msdn.microsoft.com

Oke, cukup sekian dulu dan selamat belajar ya !

Memahami element dasar pada HTML Style

KANG_SIRR 12/03/2015 Add Comment

Sekarang saya akan membahas tentang HTML Style, kemarin saya sudah menjelaskan tentang struktur dasar serta element dasar pada HTML, jika kalian ingin membacanya! silahkan kunjungi 'Memahami struktur dasar pada program HTML' dan 'Memahami element dasar pada program HTML'.

Oke, kita lanjut ke pembahasan HTML Style, untuk penulisan ada 3 cara yang akan saya bahas di sini !

1 . Penulisan HTML Style di dalam Element HTML, berikut ini contoh codenya :

<!DOCTYPE html>
<html>
<head>
    <title> Contoh Code </title>
</head>
<body>

    // Attribute "style" inilah yang di maksud untuk penulisan HTML Style di dalam Element HTML.
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMaEP0O528GtT9HzEoaihxZzBApVh3akBroa55TWE8fwPvgIoFqYrm4ntNRKNeyrTtHmbJIWrduvU0Oac-cEDT1KCbgcJmruKimkYr3sJEtH_bLMAs_WTn4HHaaoY1ULfVSxg-qicP_b4F/s1600/image.png" style="border:3px #880000 solid;" width="36px" height="36px"/><br/>
    
    Dan <br/>
    
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMaEP0O528GtT9HzEoaihxZzBApVh3akBroa55TWE8fwPvgIoFqYrm4ntNRKNeyrTtHmbJIWrduvU0Oac-cEDT1KCbgcJmruKimkYr3sJEtH_bLMAs_WTn4HHaaoY1ULfVSxg-qicP_b4F/s1600/image.png" style="background:#333333;margin:3px;padding:7px;border:1px #880000 solid;" width="42px" height="42px"/><br/>

</body>
</html>

Hasilnya :

Dan


2 . Penulisan HTML Style di luar Element HTML Dan masih di dalam Dokumen Html, berikut ini contoh codenya :

<!DOCTYPE html>
<html>
<head>
    <title> Contoh Code </title>
</head>
<body>

<style type="text/css">
div.contoh-code-div{
    background:#ffffff;
    margin:10px;
    padding:10px;
}

.contoh-code-botton-green{
    background:#64dd17;
    color:#f5f5f5;
    margin:0;
    padding:10px;
    border:1px #f5f5f5 solid;
}

.contoh-code-botton-green:hover{
    background:#f5f5f5;
    color:#64dd17;
    border:1px #64dd17 solid;
}
</style>

<div class="contoh-code-div">
<a class="contoh-code-botton-green" href="http://contoh-code.blogspot.com" target="_blank">PENCET TOMBOL</a>
</div>

</body>
</html>

Hasilnya :

PENCET TOMBOL


3 . Penulisan HTML Style di luar Element HTML dan di tulis terpisah dari Dokumen Html, berikut ini contoh codenya :

Simpanlah contoh code di bawah ini dengan nama "contoh1.css". 

div.contoh-code-div{
    background:#ffffff;
    margin:10px;
    padding:10px;
}

.contoh-code-botton-green{
    background:#64dd17;
    color:#f5f5f5;
    margin:0;
    padding:10px;
    border:1px #f5f5f5 solid;
}

.contoh-code-botton-green:hover{
    background:#f5f5f5;
    color:#64dd17;
    border:1px #64dd17 solid;
}


Kemudian Simpanlah contoh code di bawah ini dengan nama "contoh1.html". 

<!DOCTYPE html>
<html>
<head>
    <title> Contoh Code </title>
</head>
<body>

// Cara memasukkan style ke dalam HTML adalah seperti di bawah.
<link rel="stylesheet" src="contoh1.css" type="text/css" />

<div class="contoh-code-div">
<a class="contoh-code-botton-green" href="#">PENCET TOMBOL</a>
</div>

</body>
</html>


Oke, simpanlah file contoh1.css dan contoh1.html ke dalam 1 folder, dan jalankan contoh1.html .
Cukup sampai di sini dulu, jika ingin bertanya silahkan tuliskan komentar kalian di bawah, komentar yang tidak sopan saya tidak akan menanggapi. Jadi, maaf dari saya dan terima kasih kunjungannya, salam semua dari saya !
Langganan: Postingan (Atom)