Old school Swatch Watches


-------=»♥«=-------
-------=»♥«=-------

Tempat Nongkrong PaLing Asyik buat Pecinta Java
created by :
DenmasFeriyanto


Belajar Mengenal CSS
c s s

Cascading Style Sheet adalah suatu bahasa style sheet yang digunakan untuk mengatur style / tampilan suatu dokumen (umumnya halaman WEB / WAP site) yang ditulis dalam bahasa markup.
CSS digunakan untuk mengformat halaman WEB / WAP yang ditulis dengan HTML dan XHTML.
CSS digunakan untuk menentukan Warna, Jenis huruf, Tata letak, dan berbagai aspek tampilan suatu halaman WEB / WAP sesuai dengan keinginan pembuatnya.

Ada 3 Cara Penulisan Kode CSS :

  1. Internal CSS
    yaitu menuliskan langsung script CSS di file HTML nya dan dituliskan di antara tag <head> . . . </head> .

    Contoh Penulisan Internal CSS :
    <html>
    <head>
    <style type="text/css">
    body{background-color:white; font-family:cursive; color:maroon;}
    .feri{background-color:lime; border-style:double; border-size:2; border-color:blue; color:maroon; text-align:center; cellpadding:2;}
    </style>
    </head>
    <body>
    <center>BELAJAR CSS Gitu Loh !!</center>
    <div class="feri">Mari BeLAJar CSS bersama Feriyanto.</div><br/> <br/> </body>
    </html>


    HasiLnya :
    BELAJAR CSS Gitu Loh !!

    Mari BeLAJar CSS bersama Feriyanto.



  2. External CSS
    yaitu menulis / membuat file CSS sendiri secara terpisah, cara menggunakannya adalah dengan memanggil file tersebut dengan menggunakan kode seperti ini : <link rel="stylesheet" type="text/css" href="alamat URL file CSS">
    Kode pemanggil file CSS tersebut diletakkan di antara tag <head> . . . </head> .
    Berikut ini contoh penulisan file CSS :
    body {background:white; color:blue; font-family:cursive; text-align:center;}
    .feri {background:red; color:white; border-style:solid; border-color:blue; border-size:2px; text-align:left;}
    .simple {background:blue; color:yellow; border-style:dot; border-color:red; border-size:2px; text-align:right;}
    a:link {color:fuchsia; text-decoration:none;}
    a:hover {color:yellow; text-decoration:none;}
    a:visited {color:red; text-decoration:none;}

    Keterangan :
    .feri {background:red; color:white; border-style:solid; border-color:blue; border-size:2px; text-align:left;} itu yg disebut dengan CLASS, lebih tepatnya Class="feri", tergantung namanya apa., saya contohkan di atas dengan nama feri, jd nama classnya adalah FERI.
    Begitu juga dengan .simple {background:blue; color:yellow; border-style:dot; border-color:red; border-size:2px; text-align:right;}, itu yg disebut dengan class SIMPLE.
    Cara menggunakan / penulisannya sebagai berikut :
    <div CLASS="nama class"> . . . </div>
    Contoh :
    <div CLASS="simple"> . . . </div>
    Class juga bisa digunakan pada <table> dan <span> .
    Contoh :
    <span class="nama class"> . . . </span> dan <table class="nama class"><tr><td> . . . </td></tr></table>.

    Sedangkan untuk kode :
    a:link {color:fuchsia; text-decoration:none;} untuk mengatur warna LINK yg belum pernah di Klik, serta mengatur agar LINK tidak bergbris bawah.
    a:hover {color:yellow; text-decoration:none;} untuk mengatur warna LINK ketika kursor diletakkan pada LINK tersebut, serta mengatur agar LINK tidak bergbris bawah.
    a:visited {color:red; text-decoration:none;} untuk mengatur warna LINK yang sudah pernah di Klik, serta mengatur agar LINK tidak bergbris bawah.
    Itulah keterangan2 mengenai beberapa kode yg terdapat dalam file CSS.

    Sekarang kamu buat file external CSS seperti yang aku contohkan di atas, lalu kamu simpan dengan nama terserah kamu, yg penting berakhiran dengan .css , contoh : fileku.css .
    Setelah kamu buat file CSS, seterusnya kamu tinggal buat file HTML yang disertai dengan kode pemanggilan file CSS yg sudah kamu buat.
    Berikut contohnya :
    <html>
    <head>
    <title>BeLAjar CSS</title>
    <link href="fileku.css/" rel="stylesheet" type="text/css">
    </head>
    <body>
    <center>BELAJAR CSS Gitu Loh !!<br/>BELAJAR CSS Gitu Loh !!</center> <div class="feri">Ini adalah contoh file HTML yang menggunakan ExternaL CSS dengan Class "feri" . Semoga bisa membantu kamu untuk untuk mempercantik site kamu.</div>

    <center>BELAJAR CSS Gitu Loh !!<br/>BELAJAR CSS Gitu Loh !!</center> <div class="simple">Ini adalah contoh file HTML yang menggunakan ExternaL CSS dengan Class "simple" . Semoga bisa membantu kamu untuk mempercantik site kamu.</div>

    </body>
    </html>


    Berikut contoh hasilnya :
    BELAJAR CSS Gitu Loh !!
    BELAJAR CSS Gitu Loh !!
    Ini adalah contoh file HTML yang menggunakan ExternaL CSS dengan Class "feri" . Semoga bisa membantu kamu untuk untuk mempercantik site kamu.


    BELAJAR CSS Gitu Loh !!
    BELAJAR CSS Gitu Loh !!
    Ini adalah contoh file HTML yang menggunakan ExternaL CSS dengan Class "simple" . Semoga bisa membantu kamu untuk mempercantik site kamu.


  3. InLine CSS yaitu penulisan kode CSS di dalam tag <body> . . . </body> atau langsung ditulis bersama elemen HTML nya (langsung ditulis di dalam isi file HTML).

    Contoh penulisannya :


    <html>
    <body>

    <p style="background-color:maroon; color:white; text-align:center; font-family:cursive; size:4;">
    Hay pLend. , beLajar CSS yukk bareng admin kita yg cute pisan euy . . !!</p>

    </body>
    </html>



    Hasilnya :
    Hay pLend. , beLajar CSS yukk bareng admin kita yg cute pisan euy . . !!


    Demikianlah sedikit Tutorial tentang CSS, sumber tutorial ini aku dapat dari survey / browsing di beberapa blog dan WEB/WAP site.
    Semoga Bermanfaat.


    IkLan


    h0me | baCK
© Feriyanto




Ads :