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,354
    [​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 "#"​
     
  2. Krisnanda Juni Antara

    Krisnanda Juni Antara General Moderating Staff Member

    Joined:
    Apr 21, 2014
    Messages:
    2,469
    gw malah ngga ngerti tentang CSS, baru belajar dikit sih tentang CSS
     
  3. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

    Joined:
    May 12, 2014
    Messages:
    6,354
    owh siip, semoga thread ini dapat membantu :goodjob:
     
  4. Krisnanda Juni Antara

    Krisnanda Juni Antara General Moderating Staff Member

    Joined:
    Apr 21, 2014
    Messages:
    2,469
    ok, eh cara buat isi halaman web dengan css gimana? aku cuma bisa buat header dan footernya aja bro
     
  5. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

    Joined:
    May 12, 2014
    Messages:
    6,354
    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
     
  6. Ambrizal Suryadinata

    Ambrizal Suryadinata Saya Ganteng Staff Member

    Joined:
    Jan 25, 2014
    Messages:
    2,587
    Bagus threadnya aku cuman bisa ngasih :
    [​IMG]
     
  7. Krisnanda Juni Antara

    Krisnanda Juni Antara General Moderating Staff Member

    Joined:
    Apr 21, 2014
    Messages:
    2,469
    ok Pak guru :ketawa:
     
  8. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

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

    jangan panggil pak guru :malu1: , saya juga masih sama sama belajar :goodjob:
     
  9. marwanto.se

    marwanto.se New Member

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

    Anyway for TS, nice for sharing. :goodjob:
     
  10. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

    Joined:
    May 12, 2014
    Messages:
    6,354
    oke thanks dah mampir kr thread saya.....
    :wow1:
     
  11. Febian

    Febian Administrator Staff Member

    Joined:
    May 7, 2013
    Messages:
    8,032
    +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:
     
  12. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

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

    Radith Yoga Active Member

    Joined:
    Mar 22, 2014
    Messages:
    3,260
    jempol sharenya :goodjob:
     
  14. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

    Joined:
    May 12, 2014
    Messages:
    6,354
    Thanks udah mampir....
    dan thanks Jempolnya
    :goodjob:
     

Share This Page