1. Hello Guest, selamat datang di Forum WinPoin. Kamu bisa bertanya, berdiskusi, sharing, dan ngobrolin apapun seputar Windows, Windows Phone, PC, Gadget, atau hal seputar Teknologi lainnya. Selamat berkomunitas! ;)

Yuk Ketahui tentang Cascading Style Sheets

Discussion in 'Developer Corner' started by Yusril Ibnu, May 26, 2014.

  1. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

    Joined:
    May 12, 2014
    Messages:
    6,373
    [​IMG]​

    Pada Thread kali ini saya akan membahas salah satu bahasa yang saya sukai yaitu CSS, Apa itu css ?

    [​IMG]​

    [hide]
    [/hide]
    ya, sesuai pengertian diatas bahwa css itu mengatur tampilan laman pada web, minsal saja di winpoin, mimin menggunakan header dengan warna hijau. nah kenapa bisa warna hijau ? karena mimin telah mengaturnya dengan bahasa CSS agar header itu hijau. Mengerti ? :cool:

    dengan css ukuran, warna, bentuk dan bahkan animasi bisa diatur sedekimian rupa. Jujur saja saya pribadi sangat suka bahasa css karena bagaikan kita menggambar. soo berikut tutorialnya, ettss tapi tunggu dulu lebih baik kita ketahui dulu sejarahnya. :

    [hide]
    Penulisan CSS
    secara mudah css dituliskan seperti berikut ini :
    Code:
    hal apa {bagaimana:mau diapakan;bagaimana:mau diapakan;bagaimana:mau diapakan;}
    Gak ngerti Maksudnya..., oke kita masukan saja....
    Code:
    header {background:green;width:100%;}
    nah, dari data diatas telah kita ketahui bahwa css bermaksud untuk membuat si header agar warna backgroundnya hijau dan lebarnya penih 100%. lalu coba teliti lagi diawali oleh satu hal apa yang ingin diubah lalu disambung dengan tag { kemudian dimasukan dibagaimanakan (minsal background) selanjutnya titik dua (:) hal yang tadi harus bagaimana dan begitu selanjutnya yang dipisah dengan titik dua (;). terakhir jangan lupa ditutup dengan tag }. beres.

    oke itu dasarnya.... sebelum lanjut perlu diketahui pembagian css... yaitu ada dua Inline Style Sheet dan Embedded Style Sheet. nah apa bedanya ? klo inline itu bersatu dengan html, sedangkan embed seperti yang dijelaskan tadi (header). lebih jelasnya wikipedia mengatakan :

    [hide]Contoh penggunaan CSS dengan metode Inline Style Sheet :

    CSS didefinisikan terlebih dahulu dalam tag <style> ... </style> di atas tag <body>. Pada pendefinisian ini disebutkan atribut-atribut CSS yang akan digunakan untuk tag-tag HTML, yang selanjutnya dapat digunakan oleh tag HTML yang bersangkutan.

    Code:
    <html>
<head>
<title>Contoh Bentuk Inline </title>
</head>
<body bgcolor="#FFFFFF">
<p id="cth1">
Ini adalah contoh tag P tanpadiformat menggunakan CSS </p>
 
<p id="cth2" style="font-size:20pt">
Tag P ini diformat dengan besar font 20 point </p>
 
<p id="cth3" style="font-size:14pt; color:red">
Tag P ini diformat dengan besar font 14 point, dan menggunakan warna merah </p>
</body>
</html>
    Contoh penggunaan CSS dengan metode Embedded Style Sheet :

    Code:
    <html>
<head>
<title>Contoh Bentuk Embedded</title>
</head>
<style>
body {background:#0000FF; color:#FFFF00; margin-left:0.5in}
h1 {font-size:18pt; color:#FF0000}
p {font-size:12pt; font-family:arial; text-indent:0.5in}
</style>
    Code:
    <body>
<h1 id="cth1">Judul ini berukuran 18 dengan warna merah!</h1>
<p id="cth2">Tag p ini di format dengan besar font 12 point dengan tipe font Arial dan mempunyai identasi 0.5 inch </p>
<p id="cth3">Yang perlu diperhatikan juga bahwa body disini telah diformat dengan margin kiri 0.5 inch dan warna background biru</p>
</body>
</html>
    satu lagi...
    [/hide]
    Sekian dahulu semoga bermanfaat dan Terimakasih.

    Update selanjutnya : penggunaan div. class. "." dan "#"​
     
    Yusril Ibnu, May 26, 2014
    #1
  2. Krisnanda Juni Antara

    Krisnanda Juni Antara Moderator Staff Member

    Joined:
    Apr 21, 2014
    Messages:
    2,503
    gw malah ngga ngerti tentang CSS, baru belajar dikit sih tentang CSS
     
    Krisnanda Juni Antara, May 26, 2014
    #2
  3. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

    Joined:
    May 12, 2014
    Messages:
    6,373
    owh siip, semoga thread ini dapat membantu :goodjob:
     
    Yusril Ibnu, May 26, 2014
    #3
  4. Krisnanda Juni Antara

    Krisnanda Juni Antara Moderator Staff Member

    Joined:
    Apr 21, 2014
    Messages:
    2,503
    ok, eh cara buat isi halaman web dengan css gimana? aku cuma bisa buat header dan footernya aja bro
     
    Krisnanda Juni Antara, May 26, 2014
    #4
  5. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

    Joined:
    May 12, 2014
    Messages:
    6,373
    maksud ubah tampilannya.. ?
    klo ngebuat isi halaman web perlu juga bahasa html silahkan ke sini untuk belajar html http://forum.winpoin.com/diskusi-semua-tentang-html
     
    Yusril Ibnu, May 26, 2014
    #5
  6. Ambrizal Suryadinata

    Ambrizal Suryadinata Saya Ganteng Staff Member

    Joined:
    Jan 25, 2014
    Messages:
    2,592
    Bagus threadnya aku cuman bisa ngasih :
    [​IMG]
     
    Ambrizal Suryadinata, May 26, 2014
    #6
  7. Krisnanda Juni Antara

    Krisnanda Juni Antara Moderator Staff Member

    Joined:
    Apr 21, 2014
    Messages:
    2,503
    ok Pak guru :ketawa:
     
    Krisnanda Juni Antara, May 26, 2014
    #7
  8. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

    Joined:
    May 12, 2014
    Messages:
    6,373
    :ketawa: , bungkus terus

    jangan panggil pak guru :malu1: , saya juga masih sama sama belajar :goodjob:
     
    Yusril Ibnu, May 26, 2014
    #8
  9. marwanto.se

    marwanto.se New Member

    Joined:
    May 7, 2013
    Messages:
    7,653
    Buat Krisnanda, gak usah di-quote thread utama, kepanjangan jadinya.

    Anyway for TS, nice for sharing. :goodjob:
     
    marwanto.se, May 26, 2014
    #9
  10. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

    Joined:
    May 12, 2014
    Messages:
    6,373
    oke thanks dah mampir kr thread saya.....
    :wow1:
     
    Yusril Ibnu, May 26, 2014
    #10
  11. Febian

    Febian Administrator Staff Member

    Joined:
    May 7, 2013
    Messages:
    8,029
    +Rep bwt share nya
    entah kenapa, yang namanya web design n programming aku suka banget sm bidang itu

    tapi ya gitu..masih meraba2 didalam gelap..alias masih belajar juga :malu2:
     
    Febian, May 28, 2014
    #11
  12. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

    Joined:
    May 12, 2014
    Messages:
    6,373
    sama min... saya juga masih belajar... :goodjob:
    btw thanks +repnya :kagum:
     
    Yusril Ibnu, May 28, 2014
    #12
  13. Radith Yoga

    Radith Yoga Active Member

    Joined:
    Mar 22, 2014
    Messages:
    3,260
    jempol sharenya :goodjob:
     
    Radith Yoga, May 29, 2014
    #13
  14. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

    Joined:
    May 12, 2014
    Messages:
    6,373
    Thanks udah mampir....
    dan thanks Jempolnya
    :goodjob:
     
    Yusril Ibnu, May 29, 2014
    #14

Share This Page